この実験では、学生は基本的な HTML ドキュメント構造を作成し、必須の HTML タグを理解するための基本的なスキルを学びます。この実験では、適切な DOCTYPE 宣言を使用して HTML ドキュメントを設定し、HTML ルートタグを追加し、ヘッドセクションを構成し、さまざまな種類の HTML タグを調べることができます。
参加者はまず HTML5 ドキュメントを作成し、ドキュメントタイプを宣言し、基本的なページレイアウトを構築し、<html>、<head>、<body>などの重要な要素の目的を理解する方法を学びます。この実験が終了するまでに、学生は適切な HTML ドキュメントを作成し、さまざまな HTML タグを使用して Web ページのコンテンツを構造化する方法を十分に理解しているでしょう。
このステップでは、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 ドキュメントの基本構造について学びます。特に 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"属性：ドキュメントの言語を指定します（この場合は英語）<head>：ドキュメントに関するメタデータを含む<body>：Web ページの表示可能なコンテンツを含むWeb ブラウザでの例の出力は次のようになります：
Welcome to HTML Structure
This is the basic structure of an HTML document.覚えておくべき要点：
<html>ルートタグが必要ですlang属性は、アクセシビリティと検索エンジン最適化に役立ちます<head>と<body>セクションに分割されますこのステップでは、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 タグの 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.
[ここに画像が表示されます]
[テキスト入力フィールドが表示されます]
覚えておくべき要点：
このステップでは、<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 開発における意味的マークアップの重要性などの重要な概念を学びました。
