HTMLでdivを乱用しない

概要

フロントエンドの開発者なら誰でも知っているように、Webページの基本構成要素はHTML、JavaScript、CSSであり、開発者は通常、JavaScriptとCSSに重点を置き、さまざまな言語仕様やデザインパターンを実践しています。デザイナーが描いたインターフェイスを実現できればそれでよく、HTMLが合理的かどうかはあまり気にしていないのです。その結果、以下のようなものがあちこちで見受けられる。

• ボタンがクリックできる <button> 要素の代わりに <div> になっている。
• ヘッダーはtitle要素（<h1>、<h2>など）の代わりに<div>を使用します。
• 入力された文字列は、label>.ではなく、div>.です。
• 入力ボックスも、キーボードイベントがバインドされた <div> を使用しており、 <input> ではありません。

ほらね。1つの<div>で全て解決! これって、何か問題があるのでしょうか？大した問題ではないように思えます。何しろ、ページがデザインされているように見えるし、ちゃんと対話もできるのですから。でも、考えたことがありますか？もし、<div> ですべてを解決できるなら、なぜ残りの何百ものタグが必要なのでしょうか？ここで、HTMLのセマンティック化について説明します。

セマンティック化とは

意味づけとは、HTMLの要素に対応する意味を持たせることです。要素の内容や他の要素との関係を記述するために使われます。HTMLでは、<div>と<span>を除き、基本的にセマンティック要素となっています。

タグ名もエピスタシスの程度が異なり、例えば <section> は <article> よりも内容の記述が曖昧です。<section> は、内容がグループに従属すべきことを示すので意味的にも意味があります。一方、<article>は、その内容がグループに従属することを示すだけでなく、記事であることも示しています。

意味づけの重要性をさらに説明するために、titleとbuttonの要素を使った例を挙げます。

Header要素

h1>はページのタイトルで、その下に<h2>があり、ページの階層を形成しています。

<! -- h1, first-level heading -->

<h1>When your HTML is full of divs, watch out</h1>

<! -- h2, secondary headings -->

<h2>What is semantic</h2>

<! -- h3, tertiary headings -->

<h3> The headline element</h3>

多くのリッチテキストエディタでは、適切なヘッダー構造を用いて、内容目次を自動的に生成することができます。例えば、この記事の目次はこのような構造になっています。

このように、HTMLそのものが記事全体の構造情報を伝えているのです。これに対して、もし全てが<div>で書かれていたとしたら、次のようになります。

• <div>です。HTMLがdivだらけになったら要注意!
• <div>: セマンティクスとは
• <div>: タイトル要素
• <div>: ボタン
• <div>: 意味づけされていない要素
• <div>: 概要

div>には意味がないので、フラットな構造である。正しいHTMLを用いれば、DOMは明確な構造を持つようになります。

ボタン

ボタンの目的は、フォームを送信したり、要素の状態を変更したりすることです。定義によれば、ボタンは次のような特徴を持ちます。

• フォーカスを得ることができる
• スペースキーやエンターキーで起動可能
• マウスクリックで起動

ボタンをシミュレートするためにクリックイベントを <div> でバインドすると、<button> が当然備えているセマンティックな対話機能を利用することができなくなるのです。また、これらの機能を手動で実装する必要があります。

• フォーカス状態
• キーボード操作
• マウス操作

それ以上に、スクリーン・リーダーが要素 <button> submit</button> を見つけたとき、スクリーン・リーダーはそのセマンティクスを認識し、それが送信ボタンであることをユーザーに知らせます。もしそれが単なる<div>であれば、読者はそれがボタンであるとは思わないでしょう。

セマンティックなHTML要素を使うことで、コンテンツに意味を与え、コンテンツに命を吹き込むことができるのです。

非意味的な要素

先に述べたように、<div> と <span> は非意味的な要素です。div>は、コンテンツに何の意味も持たせず、ただの<div>に過ぎません。もちろん、これは完全に正しいとは言えません。なぜなら、<div> と <span> には、まだわずかな違いがあるからです。

• <div> はブロックレベル要素です。
• <span> はインライン要素であり、他の要素、例えば <p><span>I</span>inline elements</p> の中に配置する必要があります。

どうしても内容を表すのに対応するHTML要素が見つからない場合は、<div> や <span> を使用することができます。div>や<span>はデザインされたものなので、自然と居場所ができてしまうのです。結局のところ、すべてのHTML要素が追加のセマンティクスを必要としているわけではないのです。

一般的な原則は、コンテンツを表現するために、対応する意味的な要素を優先的に使用するようにすることです。意味があまり明確でないタグは後回しにして、使用するようにしましょう。div>とspan>は最後に使うようにしましょう。

要約する

セマンティックHTML要素を使うことがプロジェクトに大きな利益をもたらすわけではありませんが、とにかくやってみることをおすすめします。少なくとも、セマンティックなHTMLページは、SEOのランキングを上げ、スクリーンリーダーに優しく、読みやすいコードになります。もしあなたがコーダーを目指しているのなら、きっと私の意見に賛成してくれることでしょう。

以上、「HTMLでdivを乱用しない」について詳しく解説しました。HTMLでdivを乱用しない」についての詳細は、スクリプトハウスの他の関連記事をご覧ください。