基本的な HTML 構造とタグを作成する

はじめに

この実験では、学生は基本的なHTMLドキュメント構造を作成し、必須のHTMLタグを理解するための基本的なスキルを学びます。この実験では、適切なDOCTYPE宣言を使用してHTMLドキュメントを設定し、HTMLルートタグを追加し、ヘッドセクションを構成し、さまざまな種類のHTMLタグを調べることができます。

参加者はまずHTML5ドキュメントを作成し、ドキュメントタイプを宣言し、基本的なページレイアウトを構築し、<html>、<head>、<body>などの重要な要素の目的を理解する方法を学びます。この実験が終了するまでに、学生は適切なHTMLドキュメントを作成し、さまざまなHTMLタグを使用してWebページのコンテンツを構造化する方法を十分に理解しているでしょう。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/head_elems -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/charset -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/lang_decl -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/viewport -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/text_head -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/doc_flow -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} html/inter_elems -.-> lab-451029{{"基本的な HTML 構造とタグを作成する"}} end

DOCTYPE宣言を使ってHTMLドキュメントをセットアップする

このステップでは、DOCTYPE宣言を追加することでHTMLドキュメントの基本的な基礎を設定する方法を学びます。DOCTYPE宣言は、ドキュメントがどのバージョンのHTMLを使用しているかをWebブラウザに伝え、適切なレンダリングと互換性を保証するために重要です。

まず、WebIDEを開き、~/projectディレクトリにindex.htmlという名前の新しいファイルを作成します。

HTML5のDOCTYPE宣言は簡単で分かりやすいものです。HTMLドキュメントの最初の行として追加します：

<!doctype html>

この宣言は、最新版のHTMLであるHTML5を使用していることをブラウザに伝えます。大文字小文字は区別されませんが、一貫性と読みやすさのために小文字のバージョンが推奨されます。

DOCTYPE宣言付きの完全な基本的なHTMLドキュメント構造を作成しましょう：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

注：WebIDEでHTMLファイルをプレビューする方法に関する詳細はこちらをご覧ください。

ブラウザでの例の出力は次のように表示されます：

Welcome to HTML!

覚えておくべき要点：

DOCTYPE宣言はHTMLドキュメントの最初の行でなければなりません
ブラウザに使用しているHTMLのバージョンを理解させるのに役立ちます
現代のWeb開発では、HTML5用に<!DOCTYPE html>を使用します
宣言はHTMLタグではなく、ブラウザに対する指示です

HTMLルートタグと基本構造を追加する

このステップでは、HTMLドキュメントの基本構造について学びます。特にHTMLルートタグと基本的なドキュメント構造に焦点を当てます。<html>タグは、他のすべてのHTML要素のコンテナであり、HTMLページのルート要素として機能します。

前のステップでWebIDEで作成したindex.htmlファイルを開きます。前のHTML構造に追加して、完全なルートタグとその必須コンポーネントを追加しましょう：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

重要なコンポーネントを分解してみましょう：

<html>タグ：他のすべてのHTMLコンテンツを囲むルート要素
lang="en"属性：ドキュメントの言語を指定します（この場合は英語）
2つの主な子要素：
- <head>：ドキュメントに関するメタデータを含む
- <body>：Webページの表示可能なコンテンツを含む

Webブラウザでの例の出力は次のようになります：

Welcome to HTML Structure
This is the basic structure of an HTML document.

覚えておくべき要点：

すべてのHTMLドキュメントには<html>ルートタグが必要です
lang属性は、アクセシビリティと検索エンジン最適化に役立ちます
ドキュメントは<head>と<body>セクションに分割されます
タグの適切なネストは、有効なHTMLにとって重要です

メタタグとタイトルタグを使ってヘッドセクションを構成する

このステップでは、HTMLドキュメントの<head>セクションについて学び、メタタグとタイトルタグを使ってWebページに関する重要な情報を提供する方法を学びます。

WebIDEでindex.htmlファイルを開き、次の例で<head>セクションを更新します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

重要なメタタグとその目的を分解してみましょう：

<meta charset="UTF-8">：ドキュメントの文字エンコーディングを指定する
<meta name="viewport">：さまざまなデバイスでの適切なレンダリングを保証する
<meta name="description">：検索エンジンに対してページの簡単な説明を提供する
<title>：ブラウザのタブに表示されるページタイトルを設定する

ブラウザのタブでの例の出力：

My HTML Learning Journey

覚えておくべき要点：

<head>セクションにはHTMLドキュメントに関するメタデータが含まれる
メタタグはブラウザと検索エンジンに追加情報を提供する
<title>タグはページの識別とSEOにとって重要である
常に文字エンコーディングとビューポートメタタグを含める

シングルとダブルのHTMLタグを理解する

このステップでは、HTMLタグの2種類、すなわちシングル（自己終了）タグとダブルタグについて学びます。これらのタグの違いを理解することは、構造的に良好なHTMLドキュメントを作成するために重要です。

WebIDEでindex.htmlファイルを開き、次の例でボディセクションを更新します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- ダブルタグ（開始と終了） -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- シングル（自己終了）タグ -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

異なる種類のタグを分解してみましょう：

ダブルタグ（ペアタグ）：

開始タグ<tag>と終了タグ</tag>があります
コンテンツは開始タグと終了タグの間に配置されます
例：<h1>、<p>、<strong>、<div>

シングルタグ（自己終了タグ）：

別の終了タグはありません
タグ内で自己終了します
例：<img>、<br>、<input>

ブラウザでの例の出力は次のように表示されます：

Welcome to HTML Tags
This is a paragraph with bold text.
[ここに画像が表示されます]
[テキスト入力フィールドが表示されます]

覚えておくべき要点：

ダブルタグはコンテンツを囲み、開始タグと終了タグの両方が必要です
シングルタグは自己完結型で、コンテンツを囲みません
適切なHTML構造を維持するために、常にダブルタグを閉じます
一部のシングルタグには追加情報を提供する属性があります

ボディタグとページコンテンツの配置を学ぶ

このステップでは、<body>タグについて学び、HTMLドキュメント内のコンテンツをどのように構造化するかを学びます。ボディタグは、Webページのすべての表示可能なコンテンツが配置される場所です。

WebIDEでindex.htmlファイルを開き、次の例でボディセクションを更新します：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- 見出し -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>サブ見出しレベル2</h2>
    <h3>サブ見出しレベル3</h3>

    <!-- 段落 -->
    <p>これは、コンテンツ構造の重要性を説明する段落です。</p>

    <!-- リスト -->
    <h4>重要なHTML要素：</h4>
    <ul>
      <li>見出し</li>
      <li>段落</li>
      <li>リスト</li>
    </ul>

    <!-- コンテンツをグループ化するためのdiv -->
    <div>
      <p>この段落はdivコンテナの中にあります。</p>
    </div>

    <!-- リンクと画像 -->
    <a href="https://example.com">Example Websiteを訪問する</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

ブラウザでの例の出力は次のように表示されます：

覚えておくべき要点：

<body>タグにはすべての表示可能なページコンテンツが含まれます
見出しタグ（<h1>から<h6>）を使用してコンテンツの階層構造を作成します
段落、リスト、その他の要素が情報を整理するのに役立ちます
<div>タグを使用してコンテンツをグループ化し、構造化することができます
ページのインタラクティビティを向上させるために、リンクと画像を含めます

まとめ

この実験では、参加者は基本的なHTMLドキュメント構造を作成する基本的な手順を学びました。このプロセスは、適切なブラウザレンダリングとHTML5との互換性を保証するために不可欠なDOCTYPE宣言の設定から始まりました。学習者は、ルート<html>タグ、<head>、および<body>セクションを含む必須のHTMLタグを調べ、ドキュメントの組織化におけるそれらの特定の役割を理解しました。

この実験では、学生たちに完全なHTMLドキュメントを作成する方法を示し、メタタグを追加する方法、文字エンコーディングを設定する方法、ページタイトルを定義する方法、およびボディタグ内にコンテンツを配置する方法を学ばせました。参加者は、構造的に良好なHTMLページを構築する実践的な経験を得て、シングルとダブルのHTMLタグ、適切なタグのネスト、およびWeb開発における意味的マークアップの重要性などの重要な概念を学びました。