はじめに
MDN Web Docs の HTML の head には何が入る? HTML のメタデータ のページを読みます。
これまで読んだページは以下の通りです。
- いまこそ読む MDN Web Docs - HTML: ハイパーテキストマークアップ言語
- いまこそ読む MDN Web Docs (2) - HTML: コンテンツの作成
- いまこそ読む MDN Web Docs (3) - 基本的な HTML の構文
※ 読み進め方や、なぜ今あらためて MDN Web Docs を読んでいるのか については、以前の記事 に書いています。
読みながら確認したこと
今回は、<head> 要素に入る情報について確認します。
<head> は、ページが読み込まれてもウェブブラウザの画面には表示されない部分です。
<head> 要素の内容は ヘッド部 と呼ばれ、文書そのものではなく、文書に関する情報や設定が入ります。
たとえば、ページのタイトル、文字コード、説明文、CSS や JavaScript の読み込み、SNS で共有されたときに使われる情報などです。
タイトルをつける: <title> 要素
<head> の中に書く <title> 要素は、ページ本文に表示される見出しではなく、HTML 文書全体のタイトルを表すメタデータ です。
たとえば、Qiita の記事ページを検証ツールで確認すると、次のような <title> がありました。
<title>いまこそ読む MDN Web Docs - HTML: ハイパーテキストマークアップ言語 #新人プログラマ応援 - Qiita</title>
<title> の内容は、ブラウザのタブに表示されたり、ブックマーク時のページ名として使われたりします。
また、Google などの検索エンジンで検索結果に表示されるタイトルとして使われることもあります。
一方で、ページ本文に表示されるタイトルは <body> の中に <h1> 要素などを使って書きます。
つまり、<title> はブラウザや検索エンジンなどに向けた文書のタイトルであり、<h1> はページ本文の中で読者に見える見出し、ということです。
メタデータ: <meta> 要素
メタデータとは、ページそのものの本文ではなく、その文書に関する追加情報 のことです。
たとえば、ページの説明、文字コード、SNS 共有時のタイトルや画像などが含まれます。
Qiita に投稿した記事を検証ツールで確認すると、説明文として次のような meta 要素が含まれていました。
<meta content="はじめに MDN Web Docs の HTML: ハイパーテキストマークアップ言語 のページを読みます。 読み進め方としては、MDN を安易に読み飛ばさずに順に読み進めて、理解をしていないところがあれば立ち止まって確認します。 理解していない点は、ChatGPT ..." name="description">
この description は、検索結果でページの説明文として使われることがあります。
そのため、description は SEO（Search Engine Optimization, 検索エンジン最適化） の観点でも意識しておくとよさそうです。
Open Graph Data
MDN では、Facebook が開発した Open Graph Data というメタデータプロトコルにも触れられていました。
OGP は、SNS でページを共有したときのタイトルや説明、画像などを伝えるためのメタデータです。
Qiita の記事を検証ツールで確認すると、たとえば次のようなメタデータがありました。
<meta property="og:title" content="いまこそ読む MDN Web Docs - HTML: ハイパーテキストマークアップ言語 - Qiita">
普段はあまり意識していませんでしたが、SNS 上でページがどのように見えるかも、こうしたメタデータによって決まっているのだと分かります。
このようにページ本文には表示されない情報でも、検索結果や SNS での見え方には大きく関わっているという点は意識しておきたいです。
ファビコン
ファビコンは、ブラウザのタブやブックマークなどに表示される小さなアイコンです。
ファビコンは、たとえば次のように <link> 要素で指定します。
<link rel="icon" type="image/x-icon" href="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico">
また、iPhone などの Apple の機器のホーム画面に保存されたときに表示されるアイコンを個別に設定することもできます。
<link rel="apple-touch-icon" type="image/png" href="https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f.png">
こうしたアイコンもページ本文には表示されませんが、ブラウザや端末上でページを識別しやすくするために使われます。
ページの内容そのものではなく、ページがどのように扱われるかを指定する情報として、<head> に入るものだと理解しました。
HTML に CSS と JavaScript を追加する
<head> には、CSS や JavaScript を追加するための記述も含められます。
たとえば、CSS は次のように読み込みます。
<link rel="stylesheet" href="https://cdn.qiita.com/assets/public/article-a64c42484d3bf366e96ce62a03313092.min.css" media="all">
そして JavaScript は、<script> 要素で読み込みます。
<script src="https://cdn.qiita.com/assets/public/v3-article-bundle-6d5492462af4a648.min.js" defer></script>
MDN では、<script> 要素には src 属性で読み込みたい JavaScript のパスを指定し、さらに defer 属性を付ける方法が現代のブラウザでは信頼できると説明されていました。
ここでのポイントは次のとおりです。
-
src属性で、読み込む JavaScript ファイルを指定する -
defer属性を付けると、HTML の構文解析が終わってから JavaScript を実行する - その結果、まだ読み込まれていない HTML 要素に JavaScript がアクセスしてエラーになるのを防ぎやすくなる
また、<script> 要素は、外部ファイルを読み込むだけでなく、要素の中に直接 JavaScript を書くこともできることは押さえておきたいです。
<script>
console.log("Hello, JavaScript!");
</script>
つまり、<script> 要素には大きく分けて、次の 2 つの使い方があります。
-
src属性で外部の JavaScript ファイルを読み込む -
<script>要素の中に JavaScript を直接書く
コードが長くなる場合は、HTML の中に直接書くよりも、別の JavaScript ファイルとして分けて読み込む方が良いですが、直接書くことも場合によってはあるかと思います。
今回 HTML を学んでいる主目的のひとつは、JavaScript を理解するためでもあるので、その意味でも、この部分はしっかり確認しておきたいと思いました。
文書の主要な言語の設定
HTML 文書では、主要な言語も設定できます。
たとえば、日本語の文書であれば次のように書きます。
<html lang="ja">
MDN では、言語を設定しておくことの意義として、次のような点が挙げられていました。
- 検索エンジンがそのページの言語を理解しやすくなる
- 言語ごとの検索結果に適切に表示されやすくなる
- スクリーンリーダーなどの読み上げソフトが、正しい言語設定で読み上げやすくなる
このあたりを読むと、HTML の属性は、ブラウザや検索エンジン、そのほか関連ソフトにとって意味のある情報なのだと感じられます。
おわりに
今回は、HTML の <head> に入る情報について確認しました。
<title>、<meta>、OGP、ファビコン、CSS や JavaScript の読み込み、lang 属性など、ページ本文には表示されない情報にも多くの役割があることが分かりました。
普段は画面に表示される部分に注目しがちですが、ブラウザ、検索エンジン、SNS、関連技術などに向けた情報を適切に書くことも、HTML の大切な役割なのだと感じました。
引き続き MDN を読みながら、基礎の理解を固めていきたいと思います。
ありがとうございました。
Web 開発の会社に入社してすでに 4 年経過した私が基礎勉強している様子を見て焦らず進んでほしい、という形での応援で、イベント参加、タグづけしています 