みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

ご無沙汰しています。珍しく熱を出して寝込んでしまっていました。
高熱を出すのは5年ぶりくらいだったので、非常に新鮮でした。

それはさておき、暑いですね。梅雨が本当に来るのか心配なくらい暑いです。
でも、暑い夏に見かける涼しい景色は本当に良いですね。

セマンティック（正しい意味づけをした）なコーディングを心がける・・・

さて、昨今自分の中でテーマにしていることがあります。
それはセマンティックなコーディングを心がけるということです。

・・・すぐ横文字を使いたがるのはこの業界の非常に悪い癖です。
正しいタグを正しいところに、正しく使用しようということですね。

はい、HTML5の記述のお話しです。

HTML4世代のお話し

HTML5が出てくる前までは、意味を持ったタグというのはほとんどありませんでした。
例えばコンテンツのセクションを区切るタグは存在しなかったので、<div class=”sec”></div>のような記述をしていました。

<div>タグはあくまで意味を持たないブロック要素だったので、レイアウト的な意味で使用され、
その<div>にclassやidを振り分けて、人間的にコンテンツの区切りを把握していたのでした。

しかし、コンピュータにはなんのことやら、コンテンツの区切りというのは<div>では分かりません。

HTML5がでてきて・・・

HTML5になると、今までのブロック要素、インライン要素という考え方が排除され、
それぞれのタグが目的に応じたカテゴリにわけて区分されるようになりました。（CSSの便宜上ブロック要素、インライン要素の考え方は残っています）

• メタデータ(metaなど)
• フロー(ul,figureなど)
• セクショニング(article, sectionなど)
• ヘディング(h1,h2など)
• フレージング(small,timeなど)
• エンベディッド(canvas,svgなど)
• インタラクティブ(a,inputなど)

タグひとつひとつに意味が付与され、それぞれを適切な場所で、適切なくくりで使用することが推奨されるようになりました。

例えば？

HTML4.01世代とHTML5.1での、ブログ一覧のコンテンツ部分の記述の違いを見てみましょう。

HTML4.01世代

<div class="sec">
  <h1>セクションタイトル</h1>
  <p>2017/05/05</p>
  <p>テキストテキストテキストテキストテキストテキスト</p>
</div>

HTML5世代

<article>
  <h2>セクションタイトル</h2>
  <time>2017/05/05</time>
  <p>テキストテキストテキストテキストテキストテキスト</p>
</div>

違うところは、まずコンテンツの自体の囲いが<article>となりました。
<article>で囲っている中は、それで一つのコンテンツとして認識できる場合に使用されます。
よく使用される例えでは、一冊の本自体は<article>で囲われると言います。

次に<h1>ではなく<h2>を使用しました。
なぜか？それはHTML5では<h1>では原則1ページ上に1つのみを使用することを原則とされたからです。
つまりHTML5での場合、<h1>は<h1>ブログ記事一覧</h1>として使用するのが正しいというわけですね。

次に投稿日を<time>で表すようになりました。
<time>タグを使うことで、この中身は「時間」を表しているよとコンピュータに教えてあげてるわけですね。
但し、<time>2017年05月05日</time>のように2バイト文字がはいるなどするとコンピュータは時間とは認識できず、文字列として認識してしまいます。
その際には<time datetime=”2017-05-05″>2017年05月05日</time>のようにdatetime属性を足してあげます。

 

非常に簡単な例でしたが、このようにコンピュータに対して優しい記述をするということはもちろん、
セマンティックなコーディングを常日頃心がけるだけで、アクセシビリティも極めて向上します。

それは主に音声読み上げブラウザ等に対して極めてフレンドリーであるからですね。
コンテンツ構造を正しく記述していれば、音声読み上げだったとしても、意味の通じるコンテンツとして読み上げてくれます。

自治体等のサイトはもちろん、そうでなくても私達が作るサイトはいつどんな人が、どのように閲覧しているか分かりません。
HTMLコーダー、フロントエンジニアはこの辺肝に銘じて、よりよいコーディングができるように努めていきたいと思います。
そしてまたそれを追求するのがまた楽しくて仕方がないのです。