HTML5でサイト作る場合のマークアップの使い方。セマンティクス＆コンテンツ・モデルという概念

HTML

HTML5はセマンティクスという概念でマークアップします。これは人の目で見たものではなく機械的に構造化を示すものです。
articleやsection、asideなど人間にはどうでもよい事ですがブラウザやアプリケーションには意味を持って扱われます。

今回はセマンティクスの説明とHTML5マークアップの一例を載せます。
一例というのは様々なパターンがあるためです。サイト内容によるので。
通常のwebサイトとブログではマークアップの方法が大きく変わります。
ここが今後のコーダーの武器になるのでしょうか・・・

まずはHTML5のコンテンツ・モデルという概念

専門的知識は色々なところで配信されているのでザックリ言います。

HTML5は「コンテンツ・モデル」と呼ばれる分類があります。
HTML4やXHTMLでブロック要素/インライン要素と言われていたものが細分化されました。
「インライン要素の中にブロック要素は含めることができない」そんなルールがHTML5にも存在しますが複雑なので別記事にしようと思います。

コンテンツ・モデルの一覧

メタデータ・コンテンツ：メタデータ系
例）meta,style,title

フロー・コンテンツ：コンテンツマークアップ
例）header,footer,div,p,table,form

ヘディング・コンテンツ：見出し
例）h1,h2,hgroup

セクショニング・コンテンツ：階層化
例）article,section,nav,aside

フレージング・コンテンツ：短いフレーズ、装飾
例）span,br,テキスト

エンベデッド・コンテンツ：画像・動画等の外部
例）embed,iframe,video,img,canvas

インタラクティブ・コンテンツ：リンクやフォームの中身
例）a,button,select,textarea

コンテンツ・モデルは親を継承します

なんのこっちゃですね。構造化を図で考えてみてください。

図の用に「article」の中の「article」は親のコンテンツになります。
どんどん階層化されていく形ですね。
article < section < sectin < articleってできます。※この階層はテキトーです。

たとえばnavをsectionやarticleの中に入れると、そのナビゲーションと言えます。
body直下だと「そのページの・・・」という具合です

HTML5マークアップの例

ブログを作る際のマークアップ一例を書いてみます。

サンプルブログイメージ

HTML5マークアップ例

<body>
<header>
	<h1>APPLE屋さん</h1>
	
	<nav>
		<ul>
			<li>ホーム</li>
			<li>メニュー１</li>
			<li>メニュー２</li>
		</ul>
	</nav>
<!-- /header --></header>



<figure id="mainImg">
	<img src="img.jpg" alt=""/>
<!-- /#mainImg --></figure>



<div id="main">
	<section>
		<article>
			<a href="#">
				<figure><img src="img.jpg" alt=""/></figure>
				<h1>今年は豊作です！！</h1>
				<p>テキストテキストテキストテキストテキスト</p>
			</a>
			<aside>いいね！</aside>
		</article>
	</section>
	<section>
		<article>
			<a href="#">
				<figure><img src="img.jpg" alt=""/></figure>
				<h1>ブログ始めました！</h1>
				<p>テキストテキストテキストテキストテキスト</p>
			</a>
			<aside>いいね！</aside>
		</article>
	</section>
<!-- /#main --></div>



<div id="sidebar">
	<aside>
		<nav>
			<h1>カテゴリー</h1>
			<ul>
				<li><a href="#">日記</a></li>
				<li><a href="#">収穫</a></li>
				<li><a href="#">りんご料理</a></li>
			</ul>
		</nav>
	</aside>
	
	<aside>
		<ul>
			<li><a href="#"><img src="img02.jpg" alt=""></a></li>
		</ul>
	</aside>
<!-- /#sidebar --></div>



<footer>
	<p>copyright appleya</p>
<!-- /footer --></footer>
</body>

トップのナビゲーションは「セクショニング・コンテンツ」の中に入っていないのでサイトのメニューとしてマークアップされています。

メインエリアの投稿記事一覧はそれぞれが記事として独立しているので<article>で各マークアップ。
また、各記事一覧の<article>内に<aside>でいいねボタンを設置。この記事のいいねとマークアップ。
※pなどのブロック要素をaで囲む事ができるようになりました。

サイドバーはメインメニューではないので<aside>で関連メニューであることをマークアップ。
セクション外なのでサイトの関連メニューという位置づけ。
広告も関連広告のはずなので<aside>を使っています。