第14回　HTMLの基礎を見直す

みなさんこんにちは。teratail開発チームデザイナーの木村和寛です。

Webサイトの制作において欠かせない言語の1つがHTML（HyperText Markup Language）です。基本の基本とも言えるマークアップ言語であり、Web開発に関わる方なら誰もが一度は書いたことがあるのではないでしょうか。

そんな一般的なHTMLですが、ある程度書き慣れてきた人であっても「正しく書けているか？」と訊かれると少し不安を覚える方が多いのではないでしょうか。実際にteratailにもHTMLに関する多くの質問が投稿されています。

［参考］teratailでの質問件数（2016/8時点）: HTML：2735件; HTML5：1200件

HTMLも他の言語と同様に標準仕様に沿った“⁠正しさ⁠”を意識してマークアップすることでメリットがあります。今回は、実際に運用していく上で正しくHTMLを書くことの重要性と、HTMLマークアップの基本知識を具体的な例を交えながら紹介したいと思います。

HTMLを正しく書くことの重要性

今回、HTMLマークアップの“⁠正しさ⁠”として特に取り上げたいのは、「⁠適した箇所に適した意味のタグを設定する」ということです。アンチパターンの例を用いて説明します。

以下のHTMLは、あらゆる箇所にdivタグを多用してしまっている例です。

<body>
<h1>サイト見出し</h1>
<div>
    <div>
        <h2>ページ見出し</h2>
    </div>
    <div>
        <h2>コンテンツ見出し</h2>
        <div>本文</div>
    </div>
    <div>
        <h2>コンテンツ見出し</h2>
        <div>本文</div>
    </div>
</div>
</body>

このHTMLを見て「どこが何を意味しているのか」という点で、とてもわかりづらく感じたはずです。これは汎用要素を乱用してしまっていることで、文書の適切な意味付けが行われていない状態です。もしこれが何百行にも渡って書かれていたらどうでしょうか？また、何かの変更時にインデントが崩れたとしたらどうでしょうか？各要素の意味と構造を読み解くことがさらに困難になるはずです。このように“⁠正しくない⁠”HTMLは理解しづらくなってしまいます。

これは決して過剰な例ではありません。少ない工数で素早く開発を行わなくてはいけない状況下では、HTMLの標準仕様を基にしたルールをしっかり定めていない場合、こうした“⁠正しくない⁠”HTMLが生まれてしまうことがあります。

ブラウザ上でCSSが反映されていて、“⁠きれい⁠”に情報が表示されてしまうことも適切なマークアップをすることを疎かにしてしまう要因の1つかもしれません。

「適した箇所に適した意味のタグを設定する」を意識せずにHTMLをマークアップする、またはそのようなルールをしっかりと設けていない場合、どのような悪影響が起こりえるでしょうか。チーム開発の視点では、「⁠他の開発メンバーがHTML文書の意味と構造をすぐに理解できない」という問題が起こるでしょう。その結果、以下のような悪影響がでる可能性があります。

いちいち理解に時間がかかり、開発の工数が膨らむ
誤った構造の理解をしてしまい、違う階層の似た箇所に新たな開発をしてしまう

上記のようなことに合わせて、無駄なコミュニケーションや手戻りが発生することもあるでしょう。このような事態はできるだけ避けたいものです。

HTMLは本来「文書の論理構造とその意味付けをするための言語」です。特にHTML5においてはセマンティックスの考え方が強まり、文書構造の意味付けをするための標準仕様が多く加わっています。人間にも読解可能でコンピューターやデバイスにも正確に解読できるようにするという理由からです。よって、HTMLは、基本的にブラウザ上での見た目をつくる目的で記述してはいけません。あくまで、文書の論理構造を意味付けするために書くべきなのです。

HTMLを正しく書くとは？

ではどのように書くことで正しく理解しやすいHTMLを実現できるのでしょうか。今回は、より文書構造の意味付けを行うことができるHTML5を基本に、先ほど紹介したアンチパターンを用いながら説明していきます。

<body>
<h1>サイト見出し</h1>
<div>
    <div>
        <h2>ページ見出し</h2>
    </div>
    <div>
        <h2>コンテンツ見出し</h2>
        <div>本文</div>
    </div>
    <div>
        <h2>コンテンツ見出し</h2>
        <div>本文</div>
    </div>
</div>
</body>

こちらのアンチパターンをHTML5の要素を使いながら意味付けを行っていくと、以下のようなマークアップをすることができます。

<body>
<h1>サイト見出し</h1>
<article>
    <header>
        <h2>ページ見出し</h2>
    </header>
    <section>
        <h3>コンテンツ見出し</h3>
        <p>本文</p>
    </section>
    <section>
        <h3>コンテンツ見出し</h3>
        <p>本文</p>
    </section>
</article>
</body>

このHTMLの「文書構造における意味のわかりやすさ」はどうでしょうか。とても理解しやすくなったかと思います。アンチパターンで使われていたdivタグの部分を、それぞれの要素の意味に合ったarticleタグやheaderタグ、sectionタグに置き換えました。それぞれの要素の概要説明は以下の通りです。

article要素: ドキュメント、ページ、アプリケーション、またはサイト内で自己完結した構成物を表します。ここでいう構成物とは、雑誌、新聞、技術的または学術記事、エッセイ、レポート、ブログやソーシャルメディアへのポストなど、全体の構成を崩さずに独立での利用が可能なものです。
header要素: 最も近い祖先のセクショニング・コンテント、または、セクショニング・ルートの導入のコンテンツを表します。通常は、イントロダクションやナビゲーションを補助するグループが含まれています。
section要素: 一般的なドキュメントやアプリケーションのセクションを表します。セクションは、この文脈において、コンテンツのテーマをグループ化するものです。通常は、section要素の子として見出し (h1-h6要素) を入れることで、section要素それぞれのテーマが識別されます。

［参考］HTML 5.2: 4.3 Sections: http://w3c.github.io/html/sections.html

これらHTML5の要素を文書の意味付けに正しく使うことで、他の開発メンバーが理解しやすいHTMLを実現できます。さらに、もしこのような”正しい”HTMLが基礎として形成できていれば、デザイン目的のdivタグを付加するなどの変更が何度かあったとしても、文書のアウトラインはわかりやすい状態を維持でき、煩雑なHTMLになりにくいというメリットもあります。

HTMLを正しく書く上ではじめに意識したいこと

これまで紹介したように、HTMLを正しく書くことで、他の開発メンバーが理解し、扱いやすいものにすることができます。この状態を実現するために、以下のことを意識することからはじめてみると、大きな違いがでてくるはずです。

HTMLはどのバージョンで書いているのか
どの要素がどんなルールのもとに使えるのか
HTMLのソースコードだけを見て、文書構造とその意味を理解できるか

teratailにも以下のようなHTML5の要素がどんなルールのもとに使えるのかという質問があります。

［参考］最新仕様におけるHTML5のアウトライン判定とh1要素の扱いについて: https://teratail.com/questions/13297

最後に

いかがでしたか。今回はHTMLを書くにあたって、標準仕様に沿った“⁠正しさ⁠”を意識すると開発メンバー間で理解しやすいHTMLを実現できるということを、「⁠適した箇所に適した意味のタグを設定する」という部分に絞って紹介いたしました。

HTMLの標準仕様もどんどん変わっていきますが、大事なのはみんなが気軽に触れるHTMLだからこそ、基本に則った書き方をチームみんなで意識して「人もコンピューターも理解しやすい状態」を保つことです。これを機に、開発チームでHTMLをより理解しやすいものにするため、基本に立ち返り、ルールづくりをしてみてはいかがでしょうか。

teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム: https://teratail.com/