よくわかってないけどsectionとarticleとasideについてまとめてみた

 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を使ったマークアップで実現しようとすると、おおよそ次のようになると思います。

主要な構造をdivで囲み、それぞれにidをふって識別しています。

HTML5に置き換えると

これをHTML5から導入された構造化タグで記述するとどうなるでしょうか。

header・nav・footerといったタグは、今までdivのidとして割り振られていたものがそのまま対応するので、比較的わかりやすいと思います。

問題は記事コンテンツの構造をどのように表現するのかです。

sectionとarticleとaside

記事本文についてはsection・article・asideを使って構造化します。

article

articleタグは記事のメインコンテンツを明示するために使われます。article部分だけを抜き出しても意味がわかるものである必要があります。

section

「セクション」といえば日本でもカタカナで用いられ、「仕切り」や「部分」といった意味合いで使われます。書籍や論文でいえば、「章」、「節」、「項」になるでしょうか。

sectionタグはドキュメントのアウトラインを明示するために使われます。アウトラインであることから、内部に見出しであるhタグをもつことを強く推奨されています。

使い方はなんとなく感覚的に理解できるのではないでしょうか。

aside

コンテンツに関係はしているけど、あまり重要でないものはこれで囲みます。実際に使い方を見ればわかるかと思います。

section・article・asideをどのように使うのか?

実際にブログをHTML5で記述するとどのようになるのか見てみましょう。文字コードをUTF-8にしておかないと、日本語部分でエラーが出るので注意してください。

検索すると、sectionの内側にhタグが必要であるという記述はよく見かけるのですが、articleにhタグがない場合にも警告が出ます。

section・article・asideといった構造化タグは、あくまでドキュメントのアウトラインを明示するものです。デザインのために使ってはいけません。divを使いましょう。

関連するけど重要でないものはasideで囲みますが、このほかに該当するものといえばアイキャッチ画像、関連記事、次の記事・前の記事、参考リンク、補足などが挙げられます。

コメントをいっぱい書いてもらえるブログであれば、コメントだけで独立したコンテンツになりえますので、articleを使ってもいいかもしれません。articleは入れ子にすることができます。

asideで囲まれたコメントや関連記事ですが、aside内部ではいつもどおりにdivタグでコーディングしてあげればよいです。

サイドバーについてですが、navにするかasideにするかは迷うところです。navを使えるのは、そのサイトにとって主要なナビゲーションだけですので、個人的にはサイドバーはasideだと考えています。

記事一覧はどうなるの?

WordPressであればプログのトップページには記事の一覧があると思いますが、HTML5で記述すると次のようになります。

ひとつひとつの記事はarticleでマークアップし、一覧全体をsectionで囲みます。

サイドバーの扱いについて

先ほどの例ではサイドバーをarticleに含めていましたが、次のように記述することもできます。

このように記述すると、article内のasideはより関連性が強いと解釈されます。

hタグをすべてh1にしてよいのか?

HTML5について検索していると、次のようなソースコードを見かけるかもしれません。

従来はhタグで階層を表現しましたが、articleやsectionで階層を明示しているので、すべてのhタグをh1にすることでSEOで有利になるというものです。以前のことはわかりませんが、現在ではこれだと警告が出ます。

h1はページで一番大事なものを囲うもの、というのが私の考えでありまして、それについては以前に記事にしました。

1ページ内にH1はいくつ使っても大丈夫なのか?

W3Cでも階層にあわせたhタグの使用を推奨していますので、不精なことをしないできちんと使い分けたほうがいいかと思います。

4.3.9. Headings and sections

まとめ

理論をすっ飛ばしてとりあえずエラーチェックを通ればいいやのノリで記事にしましたが、参考にする場合にはよく確認してから使うようにしてください。あんまり自信ないので。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP