WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section？ ココがわからない！ HTMLのマークアップ。どうしたらいいの？」でお話してきました。
私が小林さんからHTMLに関する質問を受けてライブコーディングなどを交えて回答するという対談形式でした。よってセッション全体がまとまった資料がないため、頂いた質問と答えたことや途中で紹介した資料をざっくりまとめました。
質問1. div, article,
section の使い分けと、その必要性
使い分け
まず仕様を見て考えてみましょう。英語がわからなければまずは日本語訳からでも大丈夫です。例示もあるので、参考にしてみましょう。
article
は単独で成り立つもの、sectionは、部分、と考えると使い分けしやすいと思います。
必要性
セマンティクスに実装されていると、機械（クローラーなど）にサイトのコンテンツを意図通りに正確に伝えられやすくなります。
例えばPocketやInstapaperなどの本文を読むサービスにキチンと本文はどこかを伝えたりなどが考えられます。機械はどんどん賢くなっていきますが、それでもまだ自分たちのコンテンツを正確に伝える努力はしたほうがよいと思っています。
質問2. header, footer,
article,
section要素をCSSで装飾したいときはどうするの？
という質問で、具体的には
- 要素に直接にCSSを指定してよい？
- class属性を付加する？
- おとなしく、divに置き換える？
という3つの質問がありました。
HTML5に対応していないブラウザ問題
HTML5に対応していないブラウザ（IE8以下など）は、html5の要素にスタイルを指定しても認識されないので、それらが対象ブラウザに入っている場合はdivでラップして、div要素にスタイルをあてる、もしくは
html5shiv.js
などを使って要素として認識させスタイリングできるようにしましょう。（私の場合は前者を採用しています。）
対象ブラウザがモダンブラウザのみの場合は気にしなくてよいですが、意味と構造を分けるためにdivでラップする考え方もあります。
CSS設計の観点から
HTMLの話からは脱線しますが、要素に直接スタイルを当てる（CSSのセレクタで要素セレクタを使用する）のは避けましょう。
header {
background-color: #red;
}
上記の例ではHTMLにheader要素が一つしか出現しない場合は問題ないかもしれませんが、例えばページのheaderのみでなく、コンテンツの中の
article
要素にもheaderを追加するとなった場合に、意図しないスタイルが適用されてしまいます。
よってCSS設計の観点からみてもheaderにも適切なclassを付与してclassセレクタを利用することをオススメします。
<header class="g-header">
hogehoge
</header>
<article class="article">
<header class="article__header">
fugafuga
</header>
contents...
</article>
.g-header {
background-image: url('hoge.jpg');
}
.article__header {
background-color: black;
}
質問3. header, footer,
article,
section要素は、「文章（原稿）を理解した上で指定する」
とあるが、どこまで「理解する」のか？
具体的には
- カンプがダミーテキストのときはどうする？
- 最初はdivで指定、趣旨が明確になるとarticleに変更する？
という質問がありました。
私は判断できないケースではdivでマークアップしておき、のちにarticleなどの要素に置き換えています。
ただしカンプやワイヤーフレーム、Markdown などでも文書構造が読み取れる場合も多くありますのでダミーテキストでもそれらから判断してマークアップしています。わからない場合は、デザイナーやIA、ディレクターとコミュニケーションを取って確認しましょう。
質問4. role="banner"その必要性は？WAI-ARIAってなに？
WAI-ARIA（ウェイ-アリア）は W3C内のWeb Accessibility Initiative が策定したAccessible Rich Internet Applications に関する仕様群です。アクセシビリティの観点からHTMLなどに足りないセマンティクスを補うために使用します。
詳しくは、Extend HTML - WAI-ARIA とMicrodataでHTMLを拡張する のスライドを参考にしてください。また途中でWAI-ARIAの記載を可視化するのに使ったツールは display-wai-aria.css というツールです。
アクセシビリティ対応って必要あるの？
UXの基礎はアクセシビリティであるようにまずアクセスできることが非常に重要です。また今年の4月より障害者差別解消法が施行され、Webアクセシビリティに対応することが今まで以上に求められていく（といいな）と思っています。
質問5. HTML5でのコーディングは作業量が多くなっている？その作業量を見積にも反映している？それとも更にコストを抑える秘策がある？
秘策は（多分）ありません！
個人的には新規構築やリニューアルの場合はHTML5を選択しない理由はないと感じています。ただし現時点でそれが無視できないコストであれば誤用を避ける意味でもHTML5を採用したとしても無理に新しい要素を使う必要はないと思います。articleやsectionだけがHTML5というわけでもありませんし。
少しずつでもできるところから適切な要素を選択できるようレベルアップしていきましょう。
イベントで話をしてみて
50分という時間の中で5つの質問に答えるというのは欲張り過ぎたかなと思います。それでも普段マークアップを意識しない方々やコア技術がマークアップではない方にもマークアップの大切さをお伝えできていたら嬉しいですね。