意味の無い要素

今回は前回よりも短いです。

HTMLには、意味を持たない要素があります。

section要素などのような大きいブロックを表すdiv要素と、フレージング・コンテンツ版のspan要素があります。

これで囲んでも全く意味はありません。しかし、グローバル属性を使うときに役立つ場合があります。次のような場合です。

<section>
  <h1>見出し</h1>
  <p>この段落は日本語で書かれています。</p>
  <p>This paragraph is written in English.</p>
  <p>This paragraph is written in English.</p>
  <p>This paragraph is written in English.</p>
  <p>この段落は日本語で書かれています。</p>
  <p>この段落は日本語で書かれています。</p>
</section>

こんなことが本当に起こるのかわかりませんが、1つのセクションの中に日本語と英語が混在しています。英語で書かれているので、lang属性を使ってlang="en"としたいのですが、1つのセクションの中で混在しているのでsection要素にlang属性をつけることはできません。そうなるとp要素に直接付けることになるのですが、英語の段落は3つあるのでlang属性を3回書かなければいけなくなり無駄です。

つまり、英語部分だけを何かの要素でまとめて囲むことができればいいわけです。しかし、目的はそれだけなので、特別な意味は持たせたくありません。そういうときに使うのがdiv要素（今回はフレージング・コンテンツではないので）です。

<section>
  <h1>見出し</h1>
  <p>この段落は日本語で書かれています。</p>
  <div lang="en">
    <p>This paragraph is written in English.</p>
    <p>This paragraph is written in English.</p>
    <p>This paragraph is written in English.</p>
  </div>
  <p>この段落は日本語で書かれています。</p>
  <p>この段落は日本語で書かれています。</p>
</section>

こうすることで、lang属性は1つですみました。div属性そのものは何の意味も持たないので、英語であるということが示された以外は文章は何も変わっていません。

また、これらの要素は、CSSを使うともっと役立つようになります。