今さら聞けない？HTMLの話

Webに関わる人であれば知らない人はいないであろう「HTML」。
Webの仕組みの根幹となっている技術の一つです。

まさに「今さら？」という感じのテーマですが、掘り下げてみると奥が深いHTMLの世界。
Webサイトやページの実制作に携わることはない方でも知っておきたい知識についてまとめました。

テキストに意味や情報を付与するための「マークアップ」

HTMLは「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」の略称です。
「マークアップ言語」の代表格で、他にはXML（ExtensibleMarkupLanguage）などが広く使われています。

ところで「Language＝言語」というとプログラム言語を思い浮かべますが、HTMLはPHPやPerlといったプログラム言語とは異なり、プログラムそのものを作成することはできません。

また、Webページの作成に使われることもあってレイアウトやデザインをするための言語と思われている方もいますが、これも誤解でHTMLはデザインやレイアウトに関する情報を持っていません。
（この役割を担うのがCSS＝カスケーディングスタイルシートです。）

では、HTML（マークアップ言語）とは一体どのような言語でしょうか？

マークアップ言語は “視覚表現や文章構造などを記述するための形式言語（wikipedia）” とされ、マークアップを直訳すると “印をつける” となるのですが、作業としては「所定の＜タグ＞を使ってテキストに意味や情報を付与していく＝印をつけていく」行為として捉えることができます。

しかし、人間が読めば内容がわかるテキストにどうして「情報」や「意味」を付与する必要があるのでしょうか？

ブラウザや検索エンジンが適切に処理できるよう「文書化」

今でこそ検索エンジンの解析能力も格段に向上していますが、基本的にコンピューターは人間が書いたテキストを正確に理解することができません。

同様にレイアウトやデザイン（フォントの形や大きさ・色など）の情報について違いを認識することはできますが、その意味や重要度合いを判別するには「タイトルはフォントサイズが大きい」といった人間が無意識的に認識している情報が別に必要です。

つまり、コンピューターがテキストの内容を理解できるよう情報や意味を付与するため必要があるのです。

HTMLはコンピューターが内容を理解し適切な処理を行えるよう、タグの意味や入れ子関係といった書式や文法が細かく定められています。

こうした背景からHTMLファイルのことを「HTML文書」と呼ぶこともあります。
（PHPなどのプログラムが出力するHTMLも含まれます。）

HTMLが書式や文法に基づいた「文書」であるというのは重要なポイントです。
マークアップは「文書」を作成する行為でもあるのです。

タグは和訳とセットで覚える

理屈っぽい話はここまでにして、タグによって与えられている意味や情報がどのようなものか、その中身を見ていきましょう。

タグの多くは英単語（の頭文字）からとったもので、その単語の和訳とセットで覚えるのが理解への近道です。

• h1〜h6（h＝Heading）：見出し
• p（＝Paragraph）：段落
• li（＝list）：リスト・箇条書き
• quote / blockquote：引用
• table：表

いかがでしょうか？
例えばタイトルや見出しに相当するテキストは＜h1〜h6＞のいずれか、通常のテキストであれば＜p＞、箇条書きなら＜li＞タグでマークアップすべきということになります。

ちなみにリンクとしてお馴染みの＜a＞タグは「Anchor：碇」の略であり、「href（Hypertext Reference：ハイパーテキストリファレンス※）」という属性にリンク先のURLを記載することで「ハイパーリンク」が機能するようになります。

<a href="（リンク先のURL）">

参照先（href）に碇（Anchor）をかけることでWebページ同士がつながる＝ハイパーリンクとは少々想像力が必要ですが、ともあれタグはそれぞれ意味や情報があり、タグに従ってコンピューターが処理を行うという仕組みは抑えておきたいところです。

※「Hypermedia Reference：ハイパーメディアリファレンス」など諸説あります。

メタ情報を侮るべからず

もう一つ、HTMLを理解する上で欠かせないのが「メタ情報」です。
※本稿では「meta」タグだけではなく、「head」タグ内に記載される情報をメタ情報として取り扱います。

メタ情報とはブラウザなどに表示はされないけれど、検索エンジンやブラウザなどに伝える必要がある情報の総称です。

「キーワード」や「ディスクリプション」などはSEO対策で必須の情報としてお馴染みですが、他にもさまざまな情報が付与されています。

• 文書のタイトル（タイトルタグ）
• 文字コード
• OGP（Open Graph Protocol：いわゆるOGタグ）
• 外部ファイルへのリンク（CSS / JavaScript / RSSなど）
• アクセスログなどの計測タグ（多くはJavaScript）

こうした情報は目に見えないところで検索エンジンやブラウザが文書を適切に処理する手助けをしています。
例えば文字コードが正しく記載されていないと文字化けの原因となります。

文書のタイトルを意味付けるタイトルタグはSEO対策の有無に関わらず欠かせない要素です。

OGPは主にFacebookで使われるタグで、こちらもタイトルやディスクリプション、運営者などの情報を付与することができます。

またタイトルタグやディスクリプション、OGP（の一部）は検索結果ページを始めサイト内外で広く流用される情報です。

ページに表示されないからといって疎かにしていると検索結果ページやSNSからの流入を「取り逃がす」要因ともなります。

ヒューマンリーダブル×マシンリーダブル

このように主にコンピューターに向けた情報を付与するHTMLですが、最終的には「人間」が見るものということを忘れるわけにはいきません。

HTMLのマークアップをよりコンピューター（検索エンジン）にフォーカスしたものが「SEO（Search Engine Optimization：検索エンジン最適化）」となるのですが、過剰にSEOを施してしまうと「検索結果ページで見つけてもらう」ことに注力するあまり（人間が読むための）文法や文脈を無視した構成になりがちです。

結果として人間にとって読みにくい、あるいは意味のないテキストになってしまうのはご想像のとおりです。

また、見た目やインパクトを重視するあまり画像やスクリプトを多用したコンテンツも数多くありますが、画像やスクリプトで構成されたHTMLはコンピューターにとっても内容の把握が難しく、SEO対策としても不利に働きます。
（SEO業者が「できる限り画像化せずテキストで！」と口を酸っぱくして指摘するのはこのためです。）

コンピューターが解読できる情報を「マシンリーダブル」、人間にとって読みやすい情報のことを「ヒューマンリーダブル」と呼びます。

マシンリーダブルとヒューマンリーダブルの両立こそ、理想的なHTMLの姿なのだと思います。