下記記事の続きです（②記事については編集中です）。

基本構造

<!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」

「:」「-」「|」などで内容を区切り、かつ「固有のページ名 - カテゴリ名 | サイト名」という
構成で統一させています（太字部分は共通）。

参考