HTMLの基本構造を知ろう

HTMLの基本的な構造を理解することは、Webサイト制作において非常に重要です。
この記事では、HTMLの雛形を確認しながらそれぞれのタグがどのような役割なのかを解説します。

HTMLの雛形
DOCTYPE宣言
htmlタグ
headタグ
bodyタグ
まとめ

HTMLの雛形

HTMLの基本的な雛形は以下の通りです。

<!DOCTYPE html>
<html　lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
</head>
<body>
    <!-- ここにコンテンツを記述 -->
</body>
</html>

これは、HTML文書を作成する際に記述する基本的な内容です。
HTMLを作成する際には基本的にどのページでもこれらの記述があります。

以下では、各要素の役割について詳しく見ていきます。

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言は「Docyment Type 宣言」の事で、HTML文書の先頭に記述する宣言です。

この宣言は、ブラウザに対して「この文書はHTMLです」と宣言します。
そうすることで、ブラウザはHTML文書を適切なレンダリングモードを使用して表示することができます。

小文字で書いても大丈夫です。

htmlタグ

<html>
    <!-- ここにheadとbodyを含む -->
</html>

<html>タグはHTML文書のルート要素であり、全体のコンテンツを囲みます。
ルートとは「起点」という意味があり、ここでいう「ルート要素」とは「最上位要素」という意味です。
つまり、入れ子構造の一番親に当たるのが最上位要素の<html>タグになるということです。

headタグ

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
</head>

<head>タグ内にはページのメタデータやスタイルシート、JavaScriptなどのリンクを含めます。
ここに記述された情報はブラウザに直接表示されるわけではありませんが、ページの挙動や外観に影響を与えます。

<head>タグ内にある記述を見ていきましょう。

carset

<meta charset="UTF-8">

このcharsetは、文字コードの設定をしています。
この設定をすることで、文字化けを防ぐことができます。

文字コードは「UTF-8」以外にも「Shift_JIS」や「EUC-JP」などがありますが、「UTF-8」以外は非標準となります。

必ず「UTF-8」で設定しましょう！

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

このviewportの設定は、ウェブサイトのウィンドウ領域の設定をしています。
ウェブサイトにアクセスするユーザーの端末がそれぞれ違うので、画面サイズが違くなります。
様々な画面サイズでも適切に表示・閲覧するための設定です。

<title>タグ

<title>タイトル</title>

<title>タグは、ページタイトルを設定します。
ここで指定したテキストは、検索結果やブラウザのタブに表示されます。

bodyタグ

<body>
    <!-- ここに実際のコンテンツを記述 -->
</body>

<body>タグは実際のコンテンツを含みます。
この部分には様々なタグを使用して、テキスト・画像・リンク・動画など、ユーザーが閲覧するコンテンツを記述します。

主に編集する箇所はこの<body>タグ内ということを覚えておきましょう。

まとめ

この記事ではHTMLの雛形を紐解いて解説しました。
HTMLには様々なタグで構成されますが、それらを一つ一つ理解することが大切です。
headタグ内の設定には今回紹介したもの以外にも様々なmetaタグなどがあります。
まずは最低限必要な知識として、この記事で出てきたタグの意味を理解しておきましょう。