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

はじめに

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

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

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>

HTML Document Structure

注：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 タグの例の出力

覚えておくべき要点：

ダブルタグはコンテンツを囲み、開始タグと終了タグの両方が必要です
シングルタグは自己完結型で、コンテンツを囲みません
適切な 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>

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

HTML コンテンツ配置の例の出力

覚えておくべき要点：

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

まとめ

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

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