Webサイトは、家を建てるのと同じように、まず骨組みをしっかりと作ることが大切です。その骨組みとなるのがHTMLの基本構造です。この記事では、HTMLファイルが必ず持っている4つの主要な要素について、その役割と重要性を詳しく解説します。
目次
1. <!DOCTYPE html>
これはHTMLの「お約束」です。タグではありませんが、すべてのHTML文書の一番最初に書かなければなりません。
- 役割: ブラウザに対し、この文書がHTML5という最新のバージョンで書かれていることを宣言します。
- なぜ必要？: この宣言がないと、ブラウザはどのバージョンのHTMLで書かれた文書なのかを判断できず、古いブラウザ向けの互換モードで表示してしまう可能性があります。その結果、意図しない表示崩れが起きることも。Webサイトを正しく、安定して表示させるために不可欠な宣言です。
2. <html>タグ
<!DOCTYPE html>宣言の次に位置する、HTML文書全体の「根元」となる要素です。
- 役割: HTML文書のすべてのコンテンツをこのタグの中に記述します。
<html>タグは、<body>と<head>の両方を子要素として持ちます。 - 重要な属性:
lang属性- 例:
<html lang="ja"> - この属性は、文書の主要な言語を指定します。例えば「
ja」は日本語を意味します。これにより、検索エンジンやスクリーンリーダー（音声読み上げソフト）がコンテンツの言語を正しく認識し、適切な処理を行うことができます。
- 例:
3. <head>タグ
Webページの「頭」に当たる部分で、ユーザーの目には見えない情報を記述します。
- 役割: ページのタイトル、文字コード、外部ファイル（CSSやJavaScript）の読み込み、検索エンジン向けのメタ情報など、文書に関するメタ情報を定義します。
- なぜ重要？:
titleタグ:<head>内に記述するtitleタグは、ブラウザのタブや検索結果に表示されるページのタイトルを定義します。これはSEO（検索エンジン最適化）において非常に重要な要素です。metaタグ:<meta charset="UTF-8">という記述で、文字化けを防ぐために文字コードを指定します。また、検索エンジンのクローラーにページの内容を伝えるためのキーワードや概要を定義する際にも使われます。- スタイルとスクリプト:
<link>タグを使ってCSSファイルを、<script>タグを使ってJavaScriptファイルを読み込みます。これにより、Webページのデザインや動きを制御できます。
4. <body>タグ
Webページの「胴体」に当たる部分で、実際にユーザーの目に触れるコンテンツを記述します。
- 役割: 見出し（
<h1>〜<h6>）、段落（<p>）、画像（<img>）、リンク（<a>）、リスト（<ul>、<ol>）など、Webページを構成するすべての要素がこのタグの中に配置されます。 - なぜ重要？: このタグの中に記述された内容が、ブラウザによってレンダリング（描画）され、私たちが普段見ているWebサイトの見た目となります。Webサイトのコンテンツそのものなので、HTMLの記述はほとんどこの
<body>タグ内で行われます。
まとめ
HTMLの基本構造は、Webサイトの土台となる非常に重要な要素です。
| タグ名 | 役割 |
|---|---|
<!DOCTYPE html> | HTML5であることを宣言する |
<html> | 文書全体のルート要素 |
<head> | ブラウザに表示されないメタ情報を記述 |
<body> | 実際に表示されるコンテンツを記述 |
これらのタグを正しく理解し、記述することで、Webサイトは安定して機能し、検索エンジンにも正しく認識されるようになります。まずはこの4つの要素をマスターして、Web制作の第一歩を踏み出しましょう。
