セマンティクスしたい（semantics）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ページのタイトル | サイト名</title>
</head>
<body>
<header>
<nav>
<!-- グローバルナビゲーション -->
</nav>
</header>
<nav class="breadcrumb">
<!-- パンくずナビ -->
</nav>
<main>
<article>
<header>
<h1>ページのタイトル</h1>
<time>公開日</time>
</header>
<figure>
<img src="#">
<figcaption>図のキャプション／クレジット</figcaption>
</figure>
<section>
<h2>章見出し1</h2>
<p>本文本文本文本文本文</p>
<h3>節見出し2</h3>
<p>本文本文本文本文本文</p>
<blockquote>引用引用引用引用引用引用</blockquote>
</section>
<section>
<h2>賞見出し2</h2>
<p>本文</p>
</section>
<footer>
<!-- 執筆者の情報 -->
</footer>
</article>
<aside class="related_pages">
<h2>関連記事</h2>
<article>
<h3>関連記事のタイトル</h3>
<time>公開日</time>
</article>
<article>
<h3>関連記事のタイトル</h3>
<time>公開日</time>
</article>
<article>
<h3>関連記事のタイトル</h3>
<time>公開日</time>
</article>
</aside>
<nav class="pagination">
<!-- 前のページ -->
<!-- 次のページ -->
</nav>
</main>
<aside class="sidebar">
<!-- サイドバー -->
<section>
<h3>月別</h3>
<!-- 月別アーカイブ -->
</section>
<section>
<h3>カテゴリ</h3>
<!-- カテゴリ別アーカイブ -->
</section>
<section>
<h3>タグ</h3>
<!-- タグクラウド -->
</section>
</aside>
<footer>
<header>ロゴ</header>
<nav>
<!-- メガフッター -->
</nav>
<footer>コピーライト</footer>
</footer>
</body>
</html>
HTMLのセマンティクスは、文書構造を基に、適切なタグを割り当てることです。 タグ割り当ては具体的に定義されておらず、作成者やユースケースに依存しています。 コンテンツカテゴリーの区分を参考にするとよいと思います。
上記のサンプルも、僕の解釈で作成したものです。 以下のような対応で、よくあるHTMLマークアップの変換を考えています。
よくあるHTMLタグ |
セマンティクスを意識したタグ |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
注釈
LaTeXで文書を作成したり、WordやGoogleドキュメントのアウトライン機能やスタイル機能を使ったりするのと、作業工程の感覚が同じだなぁと思っています。
メタデータ・コンテンツ
<head>タグ内に記述するタグです。
文書の文字エンコーディングやページのタイトル、読み込むスタイルシートなどを設定できます。
フロー・コンテンツ
<body>タグ内に記述できるタグです。
いろいろあります。
区分（sectioning）・コンテンツ
<body>タグ内に記述するタグです。
文書のアウトライン（やセクション）を構成するタグです。
見出し（heading）・コンテンツ
セクションの見出しのためのタグです。
hgroupは
記述（phrasing）・コンテンツ
本文を記述するためのタグです。 記述コンテンツが集まって段落を構成します。
埋め込み（embedded）・コンテンツ
文書に画像や動画などを埋め込むためのタグです。