HTML要素の配置制約についてheadタグ・bodyタグの解説【ウェブデザイン技能検定 1級学科範囲】

2024年7月1日 2024年7月7日 5分17秒

タスラ t3l

HTMLにて親要素と子要素の制約についての記事を作りましたが、今回はheadタグに関する配置の制約などについて解説していきたいと思います。

ウェブ制作をしていると、他の言語と違い各場所が違ったとしても案外動いてしまうのがHTMLですが、検索エンジンにクロールされる際などにマイナスだったり、正常に表示されていても読み込み順によってjavasctiptが動かなかったりなど、様々なトラブルにつながってしまうので、慣れている方も改めて理解を深めておくこともよい項目かもしれません。

また、ウェブデザイン技能検定でも出題されたことがある内容になりますので、検定対策としても是非見直ししていただけたらと思います。

HTMLの要素とその子要素の制約についての解説【ウェブデザイン技能検定 1級学科範囲】

1 HTML要素の配置制約
2 head 要素内に配置するべき要素
3 body 要素内に配置できる要素
4 まとめ

HTML要素の配置制約

改めてHTML文書の構造において特定の要素は特定の位置にのみ配置することが求められます。
これは、文書の正確な構造とブラウザによる正しいレンダリングを保証するためです。

head 要素内に配置するべき要素

title 要素

説明: サイトのタイトルを指定します。

使用例:

<head>
    <title>サンプルページ</title>
</head>

meta 要素

説明: メタデータ（そのページの様々な設定）を指定します。

使用例:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="これはサンプルページです。">
</head>

link 要素

説明: 外部リソース（主にスタイルシートやアイコン）との関係を定義します。

使用例:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

style 要素

説明: スタイル情報を直接記述するときに使います。

使用例:

<head>
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
</head>

base 要素

説明: 相対URLの基準となる基本URLを指定します。

使用例:

<head>
    <base href="https://example.com/">
</head>

body 要素内に配置できる要素

body 要素内には、文書の内容を構成するためのさまざまな要素を配置できます。
特に、script 要素については、ページの読み込み速度を最適化するために body の一番下に配置することが一般的です。
ただし、head 要素内に配置することも許可されています。

GTMのコードなどに関しては指定の位置に設置することになりますので、また微妙に解説とは違った位置になることもあると思います。

script 要素

説明: JavaScriptコードを文書内に埋め込むために使用されます。

配置:

head 内: 初期化や先に読み込む必要があるスクリプト。
body の最後: ページの読み込み速度を最適化するため。

使用例:

<!-- head内に配置 -->
<head>
    <script src="head-script.js"></script>
</head>

<!-- body内に配置 -->
<body>
    <h1>サンプル</h1>
    <script src="body-script.js"></script>
</body>