下記記事の続きです（②記事については編集中です）。
基本構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
今回は、３行目～７行目の<head>とその子要素を確認していきます。
３行目：head要素
ページ情報であるメタデータを記述する要素の親要素です。
この内容はページには表示されません。
必ずtitle要素を１つ含みます。
メタデータとは
データを説明するためのデータのことです。
HTML文書としては、ページタイトル、ビューポート、文字エンコーディング指定などが
あります。
４～５行目：meta要素
他要素で指定できないメタデータを記述するための要素です。
終了タグはなく、内容を持つことはできません。メタデータの内容は各種属性で
指定します。
基本的にはcontent属性は含まないといけませんが、charset属性の場合は不要です。
charset属性
HTML文書内で適用する文字エンコーディング（文字コードの変換ルール）を指定するための
属性です。一般的な現在のHTML文書ではUTF-8を利用します（Encoding Living Standard
により必須として要求されています）。
<meta charset="UTF-8">
name属性
任意のメタデータの名前を指定する属性です。メタデータの内容を指定するcontent属性
と併用します。
メタデータの標準的な名前は、HTML Living Standard に記載があります。
例えば５行目の内容は、ビューポートについての指定です。
viewportという名前のメタデータについて、width=device-width, initial-scale=1.0
という内容を設定しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
表示領域が異なる場合の表示方法をcontent属性によって以下のように指定しています。
様々なデバイスでページを閲覧することがほとんどのため、指定が推奨されます。
width=device-width
幅についての指定です。
device-widthと指定しているため、デバイスやブラウザの横幅に合わせて表示する
ような指定です。
initial-scale=1.0
最初にページを表示したときのズーム倍率を指定します。
1.0と指定しているため、拡大縮小なしの等倍で表示します。
ビューポートとは
デバイスやブラウザでページが表示される領域のことです。
PC、タブレット、スマートフォンなどのデバイスやブラウザの表示サイズにより
異なります。
６行目：title要素
<title> 採用情報 | ABC株式会社 </title>
ページのタイトルを指定するための要素です。
子要素などは含められず、テキストのみを内容として持つことができるため
タグなどを記述するとテキストとして出力されてしまいます。
ブラウザのタブに表示されたり、検索結果の内容表示として利用されます。
また、スクリーンリーダーはこの内容を最初に読み上げるため、
適切に内容を設定することが大切です。
同じシステムやページ内のすべてのHTML文書で同一のタイトルをつけてしまうと
現在のページがどの内容か、タイトルから分かりづらくなってしまいます。
そのため、固有のページタイトル、カテゴリ、会社名やサイト名などをページごとに設定
するようなタイトルにすると分かりやすいです。
例えば、MDNは以下のようにページタイトルを構成しています。
▼title要素の記事（https://developer.mozilla.org/ja/docs/Web/HTML/Element/title）
「<title>: 文書題名要素 - HTML: ハイパーテキストマークアップ言語 | MDN」
▼meta要素の記事（https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta）
「<meta>: メタデータ要素 - HTML: ハイパーテキストマークアップ言語 | MDN」
「:」「-」「|」などで内容を区切り、かつ「固有のページ名 - カテゴリ名 | サイト名」という
構成で統一させています（太字部分は共通）。
参考