HTML要素 ・ 基本構造
<head>
文書のメタ情報をまとめる
ページのタイトルや文字コード、読み込むCSSなど、画面に表示しない情報をまとめる要素です。html の最初の子要素として書きます。
01
サンプルコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>カフェ・ミモザ</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <p>head の中身は画面に表示されません。</p>
11</body>
12</html>
02
実行結果
ブラウザでの表示head の内容は画面に表示されず、ブラウザが読み取ります
03
解説
head には、ブラウザや検索エンジンに向けた「ページについての情報」を書きます。ここに書いた内容は、基本的に画面には表示されません。
よく入れるのは、文字コードを指定する meta charset、スマートフォン表示のための meta name="viewport"、タブに表示される title、CSSを読み込む link です。
meta charset は文字化けを防ぐため、head のできるだけ先頭に書きます。
04
応用例・注意点
head に入れる主な要素
| 要素 | 説明 |
|---|---|
meta | 文字コード・説明文・viewport などのメタデータ |
title | ページのタイトル（必須） |
link | CSSファイルやアイコンの読み込み |
style | ページ内に直接書くCSS |
script | JavaScriptの読み込み |
SNSでシェアされたときの表示を整える
OGPと呼ばれる meta を head に書くと、SNSでのタイトルや画像を指定できます。
HTML
1<head>
2 <meta property="og:title" content="カフェ・ミモザ">
3 <meta property="og:image" content="https://example.com/ogp.png">
4</head>
注意点
- 01head の中に見出しや段落など、画面に表示する要素を書かないでください。
- 02title は head に必ず1つ書きます。