はじめに
前回の講座で、HTMLがウェブページの「骨組み」を作る言語であることを学びました。今回は、もう少し深く掘り下げて、HTMLファイルの基本的な構造と、最もよく使われるHTML要素について学んでいきます。この講座を通じて、HTMLの構造を理解し、より複雑なページを作成するための土台を築きましょう。
HTML文書の基本構造
すべてのHTML文書は、特定の構造に従って記述されています。この構造を守ることで、ブラウザが正しく内容を解釈し、表示できるようになります。以下は、基本的なHTML文書のテンプレートです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出しタイトル</h1>
<p>これは段落です。</p>
</body>
</html>
この基本的な構造を理解することが、HTMLの学習の第一歩です。では、各部分について詳しく見ていきましょう。
HTMLの主要な要素の解説
<!DOCTYPE html>（DOCTYPE宣言）
このタグは、HTML文書がどのバージョンのHTMLを使用しているかをブラウザに伝える役割を果たします。現在、HTML5が標準で使われているため、<!DOCTYPE html> を最初に宣言することで、ブラウザはその文書がHTML5で記述されていると認識します。
<html> と </html>（HTMLタグ）
<html> タグは、HTML文書全体を囲むルート要素です。このタグの中にすべてのHTML要素が含まれます。また、lang="ja" のように、文書の言語を指定する属性を加えることで、ブラウザや検索エンジンが正しく文書の言語を認識できます。
<head> と </head>（ヘッド要素）
<head> タグは、文書のメタ情報を含む部分です。この部分には、ブラウザに表示されない情報（タイトルや文字コード、SEO用のメタタグなど）が含まれます。以下の重要な要素が含まれます：
- <title>: ウェブページのタイトルを指定します。このタイトルはブラウザのタブに表示されます。
- <meta charset=”UTF-8″>: 文書の文字コードを指定します。日本語を正しく表示するために、通常は
UTF-8を使用します。
<body> と </body>（ボディ要素）
<body> タグは、ユーザーが実際に画面上で見るコンテンツを定義する部分です。ここに見出しや段落、画像、リンクなどの要素を配置します。すべての表示されるコンテンツはこの <body> タグの中に書かれます。
よく使われるHTML要素
見出し要素（<h1>～<h6>）
HTMLでは、6段階の見出しを使うことができます。<h1> が最も大きく重要な見出しで、<h6> が最も小さな見出しです。ページの構造を整理するために、適切なレベルの見出しを使うことが推奨されます。
<h1>メインタイトル</h1><h2>セクションタイトル</h2><h3>サブセクションタイトル</h3>
段落要素（<p>）
段落を作成するための要素です。<p> タグで囲んだテキストは、1つの段落として扱われ、ブラウザで適切なスペースが空けられます。
<p>これは段落です。</p>リンク要素（<a>）
ウェブページから別のページに移動するためのリンクを作るには、<a> タグを使用します。href 属性にリンク先のURLを指定します。
<a href="https://example.com">こちらをクリック</a>画像要素（<img>）
ページに画像を表示するには、<img> タグを使います。src 属性に画像ファイルのURLを指定し、alt 属性には代替テキストを入れて、画像が表示されない場合やアクセシビリティのための説明を記述します。
<img src="image.jpg" alt="サンプル画像">HTML構造のポイント
HTML文書は、要素を「入れ子（ネスト）」にして記述します。例えば、<body> の中に <h1> や <p> のような要素を配置します。入れ子にすることで、ページの論理的な構造が明確になり、ブラウザや検索エンジンにとって理解しやすくなります。
以下に例を示します：
<body>
<h1>ウェブページのタイトル</h1>
<p>これは段落です。</p>
<a href="https://example.com">リンク先に移動</a>
</body>
まとめ
今回の講座では、HTML文書の基本構造と、よく使われる主要なHTML要素について学びました。<html> タグや <head>、<body> の役割を理解することは、HTMLの基礎を固める上で非常に重要です。さらに、見出しや段落、リンク、画像などの要素を使いこなせるようになると、基本的なウェブページを作成できるようになります。
次回は、テキストの装飾やフォーマットに焦点を当て、HTMLでどのように文章をスタイル付けできるかを学びます。引き続き、HTMLの世界を楽しみながら学んでいきましょう！
2. HTMLの基本構造と要素
5. 画像を追加する
7. テーブルの作成方法
9. フォーム要素の種類と属性
10. メタデータとSEOの基礎
11. コメントとコードの整理
12. HTML5の新しい要素
13. メディア要素の追加: 音声と動画
16. レスポンシブデザインの基本
17. アクセシビリティを考えたHTML
18. HTMLでのデバッグと検証
19. パフォーマンスの最適化
20. HTMLプロジェクトを作成しよう