HTML講座 / タイトル・説明・言語・文字コードを設定する

HTML文書のheadには、タブのタイトル、文字コード、ページの説明などを書きます。文書全体の言語はhtmlのlang属性へ指定します。これらの設定は文書の解釈を助けますが、読者に見せる本文の代わりにはなりません。

完全な文書で置き場所を確認する

次の文書をindex.htmlとして保存して開きます。タブにはtitle、画面内にはh1の内容が表示されます。役割は違っても、同じページの主題を矛盾なく表すようにします。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden | Plant Care Guide</title>
  <meta name="description"
        content="Learn about beginner-friendly plants and basic care in the Small Garden guide.">
</head>
<body>
  <h1>Small Garden</h1>
  <p>Start learning how to care for plants.</p>
</body>
</html>

head内の情報の多くは通常の本文としては表示されません。読者へ見せたい手順や条件はbodyへ書きます。複数のページでは同じサイト名だけを使い回さず、それぞれを区別するタイトルと説明にします。基本の入れ物はHTML文書の構造で確認できます。

言語と文字コードを指定する

この例は英語の文書なのでlang="en"です。日本語が主ならlang="ja"を使います。言語を指定しても文章は翻訳されません。別の言語の長い引用などには、その要素へ個別のlangを付けられます。短い外来語があるだけで文書全体の言語を変える必要はありません。

meta charset="utf-8"を先頭近くへ置き、実際のファイルもUTF-8で保存します。宣言だけ変えても、別の文字コードのファイルや、すでに壊れた文章が自動的に直るわけではありません。読み上げとの関係はHTMLアクセシビリティでも扱います。

descriptionとviewportの限界

descriptionはそのページで分かる内容を自然な文で要約します。キーワードの羅列にはしません。検索エンジンは本文などから別のスニペットを作る場合があり、記述した説明が必ずそのまま表示されるわけではありません。Googleのスニペットの説明で方針を確認できます。

viewportはモバイルのレイアウト幅と初期倍率などへ関係しますが、それだけですべての画像や表が画面に収まるわけではありません。CSSも合わせて調整し、文字が小さいことを理由に拡大操作を禁止しないようにします。属性はmetaとtitleを参照できます。

設定ごとの確認方法

langはhead内に別のタグとして書くものではありません。文字化けした場合は元ファイルのコピーを残し、正しい原本の保存形式を調べます。ローカルでは正常なのに公開ページで壊れるなら、Networkで文書のContent-Typeとcharsetも調べ、実際の保存形式とそろえます。MDNのlang属性に指定方法があります。

共有前にページを点検する

各タブの題名でページを区別できるか、本文の見出しと主題が一致するか、日本語が壊れていないかを確認します。説明文を以前の本文から使い回していないかも読み直します。スマートフォン程度の幅とズームで、横にはみ出す内容や操作できない部品がないかを確認してください。