HTML5の新しいタグの使い方

XHTMLからHTML5へ修正する際、DTDやmetaタグの修正をした後、コンテンツの部分についてはHTML5から新しく追加されたタグを使って修正していきます。

  • <header>
  • <main>
  • <article>
  • <nav>
  • <aside>
  • <footer>
  • <section>

これらのタグの使い方については、サイト運営者の意図によって使い方に違いが出てきます。

例えば、サイトバーを主要なナビゲーションと考えれば<nav>で囲むことになりますし、補足情報と考えれば<aside>で囲むことになります。また、<article>や<aside>などはまったく使用していないサイトも多いです。

この新しいHTML5タグの使用は必須ではないため、使い方の判断が難しい場合には無理には使用せず、既存の<div>のままにしておくのもよいでしょう。

ヤフーニュースなどがそうですが、HTML5ではあるものの、これらの新しいタグを使用していないサイトも多いです。

特に<article>などはアウトラインといわれる文章構造へ影響を与えるタグになりますが、従来通り、シンプルにh1やh2だけで暗黙的にアウトラインを作成していった方が綺麗に仕上がる可能性があります。SEO対策上、どちらが有利かは分からないため、サイト運営者によって違いがあるものと思われます。

XHTMLからHTML5の新しいタグへの修正方法

<header>部分の修正

<header>部分については、既存のID属性をそのまま利用して置換することをおすすめします。

例えば、既存サイトで<div id="abc">がヘッダー部分の場合、このID属性をそのまま利用して<header id="abc">と修正するだけで既存のスタイルシートをそのまま利用できます。

当サイトでは<div id="header">がヘッダー部分のため、どちらもheaderで紛らわしくはなるものの、これを<header id="header">へと一括で置換しました。


<div id="header"></div>

  ↓「特定のタグ」で一括置換

<header id="header"></header>


Dreamweaverの場合、「特定のタグ」で「div」を選択し、属性も「id」で「header」を指定します。次に、「タグを変更」を選択し、変更後のタグを「header」に指定すれば、閉じタグまでを含めて一括で置換することができます。

特定のタグを置換

<footer>部分の修正

次に、こちらも運営者によるタグに使い方にあまり違いがない<footer>部分を修正するとよいでしょう。このフッター部分についても、既存のID属性をそのまま利用して置換することをおすすめします。


<div id="footer"></div>

  ↓「特定のタグ」で一括置換

<footer id="footer"></footer>


<nav>部分の修正

グローバルナビゲーションがある場合には、この部分を<nav></nav>に置換します。

<nav></nav>

この<nav>の部分は判断が分かれるかと思いますが、「主要なグローバルナビゲーション」についてはこの<nav>タグを使って間違いありません。また、パンくずリストについても使用しても特に問題はないかと思います。

ただし、関連記事についてはどちらかというと「補足情報」を意味する<aside>を使用した方がいいのかなという気もしております。

また、サイドバーについても、一般的には<aside>を設定するかと思いますが、グローバルナビゲーションがないサイトの場合、サイドバーが主要なナビゲーションになるはずなので、<nav>で設定してもよいかと思います。

<main>と<article>の違い

<main>と<article>の使い方には微妙な違いがありますが、<main>は主要なコンテンツ部分であることを意味するタグで1ページに1回しか使えません。一方、<article>は何度でも使えます。

また、<main>はセクションを生成しないのに対し<article>はセクションを生成します。

カテゴリーページなどでの記事一覧がある場合、それぞれの個別記事を<article>で囲い、そのコンテンツ部分の全体を<main>で囲むといった使い方になるかと思います。

  • <main></main> → 1ページに1回だけ → セクションしない
  • <article></article> → 何回でも使える → セクション生成でアウトラインへ影響

ちなみに、Dreamweaverの古いバージョンでは「タグを変更」の箇所で「main」がないため、「任意」の箇所に直接記入するとよいでしょう。

概ね、1ページを「ヘッダー」と「コンテンツ」、「サイドバー」、「フッター」の領域に分け、それぞれを<header>と<main>、<aside>、<footer>に割り当ててしまうのがシンプルかと感じています。

そして、<main>内の個別の記事にそれぞれ<article>を設定するのかどうかでアウトラインへ影響してしまうため、このあたりはサイト運営者によって判断が分かれるかもしれません。

「main」への「display:block;」の指定

この「main」については、FirefoxやChromeではデフォルトで「display:block;」ではあるものの、IE11ではデフォルトで「display:inline;」となっています。そのため、IE11で表示した際、main要素のpaddingが効かないはずです。

当サイトでもコンテンツ部分のpaddingが効かず、IE11では余白が空いていませんでした。

main要素のpadding

これを回避するために、main {display:block;}を指定しておくとよいでしょう。

<aside>部分の修正

サイドバーについては、補足情報を意味する<aside>かナビゲーションを意味する<nav>を利用するかで迷う箇所かもしれません。

<nav>は主要なナビゲーションリンクに使うものですが、当サイトではサイドバーも主要なリンクと考えてますので、以下のような形でもよい気がしております。

<aside>
<nav>
サイドバー全て
</nav>
</aside>

ただし、サイドバーを広告表示や新着情報の一覧などで使用している場合、単に<aside>だけの方がぶなんかと思います。

また、関連記事については各個別記事についての補足情報になるかと思いますので、<nav>ではなく、<article>タグ内に内包する形で<aside>で囲んでおく方がよい気もします。

<main>
<article>
<h1>記事タイトル</h1>
記事内容
<aside>
関連記事
</aside>
</article>
</main>

当サイトでは、極力、html5の新しいタグは使わないようにしていますので、<header>や<footer>などの必要最低限なものだけを使用するようにしています。サイト運営者によって、これらHTML5タグの使い方に違いがありますので、主要メディアでの使い方も参考にしてみるとよいでしょう。