HTML5の基本を学ぶのに良いサイトは、下記の記事で紹介しています。
| 私は３年ほど前までは、HTMLなんて全くわかりませんでした。でも今では、普通に一からサイト構築ができるくらいまでになってます。 初心者でもHTML5の基本がわかって書けるようになる、入門サイト５選 - shiru-web.com |
これらサイトでもイマイチ詳しく語られていないのが、HTML5の特徴でもある「構造化タグ」の使い方。
なので、初心者向けに、ちょっとここで学んでおきたいと思います。
ちなみに、WordPressのテーマを使っている場合は、多くがこの構造化タグを自動で挿入するされるようになっているはずです。
なので、WPのテーマを使ってサイト構築しているうちは特に気にする必要はないかもしれません。
目次
構造化タグとは何だ？
HTMLはそもそも文書構造を整え、コンピューター伝える役割を持つ言語ですが、HTML4以前は、その構造を明確に伝えるタグはほとんどありませんでした。「body」以下は、「h」タグくらいだったんでしょうね。
HTML5はそれを解決するために登場したわけです。
HTML5でのサイト構築が一般化され、「セマンティックSEO」の存在も知れ渡ってきました。
文章の意味を明確にコンビューター（検索エンジンのクローラーとか）に伝えることで、そのコンテンツがどんなことを言わんとしているかを認識させやすくしているわけですね。
検索エンジンは、検索するユーザーにとって欲しいであろう情報を返してあげたいので、意味がわからないコンテンツよりも、意味のわかるコンテンツの方が、「ユーザーに役立つだろう、たぶんね」って感じで、評価が高いだろうという考え方です。
実際どうだかわかりませんが、実生活でも、全く同じ内容だけど、理路整然とした説明をする人の方がもっともらしく、受け手も納得してしまうわけで。そういうことなんだと思います。
HTML5の構造化タグはたくさんありますが、まずは押さえるべき「ページ全体に関するもの」と「セクション（＝コンテンツにおける区切り）に関するもの」について紹介していきます。
先に基本的な構造を書いておきます。
<html>
<body>
<header>ここはヘッダー</header>
<nav>ここはナビゲーション</nav>
<main>
<article> //独立した一つの記事
<section>記事の中の文節</section>
<section>記事の中の文節</section>
</article>
</main>
<aside>右側サイドバーとか</aside>
<footer>ここはフッター</footer>
</body>
</html>
セクション関連
article
「article」と「section」はどう使い分けるか問題は、HTML5入門編あるあるです。
articleは、独立した記事やコンテンツであることを示します。
ブログでいえば、この記事全体が一つの独立した記事と言えます。
section
「section」は、章分けなどに使われます。
「section」内には、「h1」タグを持つことを強く推奨されています。
本で例えるなら、
長編小説（「article」）の各章（「section」）と言えると思います。
短編小説だと、本は１冊ですが、短編ごとが独立した話なので、各短編ごとが「article」で、その中に章分けがされていたら、それが「section」になりますね。
ここまではわかりやすいのですが、ややっこしいのが、「section」の中に「article」を持つこともできるということ。
でもこれは、そういうこともあるんだなーくらいに捉えておけば良いと思います。
整理するとこんな感じの構造にしておけば、問題ないと考えます。
<article>
<section>
<h1>21世紀型アイドル論</h1>
</section>
<section>
<h1>それはモーニング娘。からはじまった</h1>
<p>可愛いだけがアイドルではないという考え</p>
<p>なんとなく手に届きそうな存在へ</p>
<h1>AKB「会えるアイドル」へ</h1>
<p>クラスに一人くらいはいそうな人たち</p>
<p>テレビの中の存在から、いつでも会える存在に</p>
</section>
</article>
これは「navigation」の略なので、わかりやすいですね。
ただ、乱発して良いかというとそうではありません。
そのサイトにとって主要なナビゲーションだけにしましょう、とされています。
たとえば、ヘッダとサイドメニュー、あとは「ぱんくず」リストくらいでしょうか。
aside
これを使うセクションは、メインコンテンツとは異種の要素に使います。
このページで言えば、サイドバーの部分がそれにあたります。本文とは直接的に関係ないコンテンツが並んでいます。
ページの構造化関連
これはその名のとおりでわかりやすいと思います。
セクションのヘッダーやフッターに当たる部分につけます。
セクションに対するものなので、articleやsection内でももちろん使えます。
各塊ごとのヘッダーとフッターの役割に対して使えます。
ただ、一般的には、ページにおけるheaderとfooter部分に利用するという理解で良いと思います。
main
これも、そのままの理解ですね。ページにおける、「主要な」部分です。
原則、１ページに１つ。それができなければ、そのページは構造的におかしいと考えて良いと思います。
その他 どんなものがあるか
たくさんあるので、上記のサイトで必要な時にチェックするのが良いです。
HTML5から追加されたタグは、印をつけてくれているので、とてもわかりやすいです。
もっとも大事なのは、セクション構造なので、一からサイトを制作するような場合は、しっかりと基礎を押さえておきたいですね。