webmas.jp

サンプル

• このタグは特定の意味を持ちません
• このタグはほとんどのブラウザで、標準ではマージンなどのスタイルを持ちません

タグをグループ化する際まずは他に適切なタグが無いか一度検討してみましょう。以下は個人的見解ではありますが参考にしてみてください。

ヘッダー

<header>

フッター

<footer>

メインコンテンツ

<main>

記事

<article>（<article> で記事本文の開始から終了までを囲みます。この要素の内容は基本的に見出しタグから始まります。記事内に小見出しが入る場合は <section> で囲います。）

セクション

<section>（h3, h4 といった見出しで始まる場合、スタイルの有無にかかわらずその範囲内を <section> で囲むことが理想です）

サイドバー

<aside>（<article> に関連していて補足的内容ならばこれを使用します。関係ないならば <div> を使用します。）

ナビゲーション

<nav>（サイトのグローバルメニューなどはこの要素内に配置します）

文書の段落

<p>（文書中の <img> も基本はこの要素内に配置します。文書は<p>、<img> は <div> でマークアップされている HTML も見かけますが、どちらも <p> でマークアップしたほうが良いでしょう。）

正しく HTML タグを選択できることは理想ではありますが、HTML を完ぺきに理解できている人もそう多くはないですし、HTML の仕様策定に参加している Microsoft や Apple の Web サイトですら滅茶苦茶なタグ選択をしていることも少なくありません。また、完ぺきな HTML を作成したからといって bing や Google の検索結果の上位にインデックスされるなんてこともありません。SEO 上重要なのはサイトの内容が閲覧者にとって有益であることなのは今も昔もこれからも変わりません。

説明リストに使用

HTML5 では <dt> と <dd> を <div> でひとつのグループとしてまとめることができます。<dt> に対し <dd> が複数ある場合とその逆もあり、グループ化することでまとめて背景色や配置の指定ができるようになります。

<dl>
	<div>
		<dt>用語<dt>
		<dd>値</dd>
		<dd>値</dd>
		<dd>値</dd>
	</div>

	<div>
		<dt>用語</dt>
		<dd>値</dd>
	</div>

	<div>
		<dt>用語</dt>
		<dd>値</dd>
	</div>
</dl>