WebサイトをHTML5に対応させようとすると、section・article・asideの使い方に結構悩まされます。これらはドキュメントを構造化するためにHTML5から導入されたものですが、「よくわからないからdivのままでいいや」となりがちです。
今回は理論はよく理解できていないけど、とりあえずこうしておけばエラーにはならないというsection・article・asideの使い方について解説します。
かなり怪しげな知識で記事を書いていますので、使う前に確認をするようにしてください。なお、WordPressで運営するブログを念頭においています。
本当に文法が正しいのかチェックするには
今回紹介するHTMLは、W3Cが文法が正しいのかチェックするために提供しているMarkup Validation Serviceを使って確認しました。
The W3C Markup Validation Service
すでに公開しているWebサイトであれば、Validate by URIタブのAddressにサイトアドレスを、
まだ公開していないのであれば、Validate by File Uploadタブの「ファイルを選択」からチェックすることができます。
問題が無ければ「No errors or warnings」と表示されます。
文法に問題があるとエラーや警告が表示されるので、修正して再確認しましょう。
今までのドキュメント構造
一般的なブログとして、次のような2カラムのレイアウトを考えます。
これを従来のdivを使ったマークアップで実現しようとすると、おおよそ次のようになると思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>...</title> <meta name="description" content="..."> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="header">...</div> <div id="nav">...</div> <div id="container">...</div> <div id="footer">...</div> </body> </html> |
主要な構造をdivで囲み、それぞれにidをふって識別しています。
HTML5に置き換えると
これをHTML5から導入された構造化タグで記述するとどうなるでしょうか。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>...</title> <meta name="description" content="..."> <link rel="stylesheet" href="css/style.css"> </head> <body> <header>...</header> <nav>...</nav> <article>...</article> <footer>...</footer> </body> </html> |
header・nav・footerといったタグは、今までdivのidとして割り振られていたものがそのまま対応するので、比較的わかりやすいと思います。
問題は記事コンテンツの構造をどのように表現するのかです。
sectionとarticleとaside
記事本文についてはsection・article・asideを使って構造化します。
article
articleタグは記事のメインコンテンツを明示するために使われます。article部分だけを抜き出しても意味がわかるものである必要があります。
section
「セクション」といえば日本でもカタカナで用いられ、「仕切り」や「部分」といった意味合いで使われます。書籍や論文でいえば、「章」、「節」、「項」になるでしょうか。
sectionタグはドキュメントのアウトラインを明示するために使われます。アウトラインであることから、内部に見出しであるhタグをもつことを強く推奨されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <section> <h1>title</h1> <p>content<p> <section> <h2>title</h2> <p>content<p> </section> <section> <h2>title</h2> <p>content<p> <section> <h3>title</h3> <p>content<p> </section> <section> <h3>title</h3> <p>content<p> </section> <section> <h3>title</h3> <p>content<p> </section> </section> </section> |
使い方はなんとなく感覚的に理解できるのではないでしょうか。
aside
コンテンツに関係はしているけど、あまり重要でないものはこれで囲みます。実際に使い方を見ればわかるかと思います。
section・article・asideをどのように使うのか？
実際にブログをHTML5で記述するとどのようになるのか見てみましょう。文字コードをUTF-8にしておかないと、日本語部分でエラーが出るので注意してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="description" content=""> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <header></header> <nav></nav> <article> <div id="content"> <h1>タイトル</h1> <p>コンテンツ<p> <section> <h2>タイトル</h2> <p>コンテンツ<p> </section> <section> <h2>タイトル</h2> <p>コンテンツ<p> </section> <aside> 広告 </aside> <aside> コメント </aside> </div> <div id="sidebar"> <aside> <h3>サイドバーウィジェット</h3> <ul> <li></li> <li></li> <li></li> </ul> </aside> <aside> <h3>サイドバーウィジェット</h3> <ul> <li></li> <li></li> <li></li> </ul> </aside> </div> </article> <footer></footer> </body> </html> |
検索すると、sectionの内側にhタグが必要であるという記述はよく見かけるのですが、articleにhタグがない場合にも警告が出ます。
section・article・asideといった構造化タグは、あくまでドキュメントのアウトラインを明示するものです。デザインのために使ってはいけません。divを使いましょう。
関連するけど重要でないものはasideで囲みますが、このほかに該当するものといえばアイキャッチ画像、関連記事、次の記事・前の記事、参考リンク、補足などが挙げられます。
コメントをいっぱい書いてもらえるブログであれば、コメントだけで独立したコンテンツになりえますので、articleを使ってもいいかもしれません。articleは入れ子にすることができます。
asideで囲まれたコメントや関連記事ですが、aside内部ではいつもどおりにdivタグでコーディングしてあげればよいです。
サイドバーについてですが、navにするかasideにするかは迷うところです。navを使えるのは、そのサイトにとって主要なナビゲーションだけですので、個人的にはサイドバーはasideだと考えています。
記事一覧はどうなるの？
WordPressであればプログのトップページには記事の一覧があると思いますが、HTML5で記述すると次のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="description" content=""> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <header></header> <nav></nav> <section> <h1>記事一覧</h1> <article> <h2>タイトル</h2> <p></p> </article> <article> <h2>タイトル</h2> <p></p> </article> <article> <h2>タイトル</h2> <p></p> </article> <article> <h2>タイトル</h2> <p></p> </article> </section> <footer></footer> </body> </html> |
ひとつひとつの記事はarticleでマークアップし、一覧全体をsectionで囲みます。
サイドバーの扱いについて
先ほどの例ではサイドバーをarticleに含めていましたが、次のように記述することもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="description" content=""> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <header></header> <nav></nav> <article> <div id="content"> <h1>title</h1> <p>content<p> <section> <h2>title</h2> <p>content<p> </section> <section> <h2>title</h2> <p>content<p> </section> <aside> adsense </aside> <aside> comment </aside> </div> </article> <div id="sidebar"> <aside> <h3>sidebar title</h3> <ul> <li></li> <li></li> <li></li> </ul> </aside> <aside> <h3>sidebar title</h3> <ul> <li></li> <li></li> <li></li> </ul> </aside> </div> <footer></footer> </body> </html> |
このように記述すると、article内のasideはより関連性が強いと解釈されます。
hタグをすべてh1にしてよいのか？
HTML5について検索していると、次のようなソースコードを見かけるかもしれません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="description" content=""> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <header></header> <nav></nav> <article> <h1>タイトル</h1> <p>コンテンツ<p> <section> <h1>タイトル</h1> <p>コンテンツ<p> </section> <section> <h1>タイトル</h1> <p>コンテンツ<p> </section> </article> <footer></footer> </body> </html> |
従来はhタグで階層を表現しましたが、articleやsectionで階層を明示しているので、すべてのhタグをh1にすることでSEOで有利になるというものです。以前のことはわかりませんが、現在ではこれだと警告が出ます。
h1はページで一番大事なものを囲うもの、というのが私の考えでありまして、それについては以前に記事にしました。
W3Cでも階層にあわせたhタグの使用を推奨していますので、不精なことをしないできちんと使い分けたほうがいいかと思います。
まとめ
理論をすっ飛ばしてとりあえずエラーチェックを通ればいいやのノリで記事にしましたが、参考にする場合にはよく確認してから使うようにしてください。あんまり自信ないので。
Comment