HTML5のa要素(リンク)が便利

何が便利かというと…リンクできる範囲がかなり広がった点。

HTML 4/XHTMLまでは<a>要素はインライン要素であるため、ブロックレベル要素(p、div、ul、h1、h2…)などを囲んではいけなかった。

▽HTML4/XHTMLまでの<a>要素

<div class="box">
<p><a>ブロックレベル要素を囲んではいけない</a></p>
</div>

が、しかし!
HTML5ならブロックレベル要素も囲んでいいのです。

▼html5からの<a>要素

<a>
<div class="box">
<p>html5からのa要素は、様々なタグや複数要素を囲むことができる。</p>
</div>
</a>

html5はインライン・ブロックレベル要素という概念がなくなった

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。
<a>-HTML5タグリファレンス

ということなので、HTML5ならDIVやP全体にリンク範囲を広げたい…とかでCSSやJSをいじくりまわす必要もないわけです。

ちなみに、SEO的にどうなのかはわからない。
なるべくは”文字にのみ”がいいのかもしれないが…構文的に問題ないわけだし、余計なソースも増やしたくないのでこれを推し進める(笑

ただし以下のようなやり方はダメ。

<p>
<a>
<h1>間違ったやり方</h1>
<p>html5からのa要素は、様々なタグや複数要素を囲むことができるが…</p>
</a>
</p>

<a>要素を削除してみるとわかりますが、<p>の中に<h1>があったり<p>があるのは間違っています。基本的な構文、正しいコンテンツ・モデルを意識したい。

続きを読む HTML5のa要素(リンク)が便利

header要素

ページやページ内文章のヘッダー(見出し情報)を示す要素です。
例えばタイトル、概要、日付などを<header>で囲います。

<body>
<header><!--サイトの見出し情報 -->
<h1>日本の詩</h1>
<nav>メニューナビゲーション</nav>
</header>
 <article>
  <header><!-- 文書の見出し情報 -->
  <h1>くらかけの雪</h1>
  <p>宮沢賢治『春と修羅』より</p>
  </header>
  <p>たよりになるのは
  くらかけつづきの雪ばかり
 野はらもはやしも
 ぽしやぽしやしたりくすんだりして
 すこしもあてにならないので
 ほんたうにそんな酵母かうぼのふうの
 おぼろなふぶきですけれども
 ほのかなのぞみを送るのは
 くらかけ山の雪ばかり
   (ひとつの古風こふうな信仰です)
 </p>
 </article>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

上記のように、サイト全体のヘッダー情報や、各文書内の見出し情報である部分はheader要素として囲うことができるため、一つのページに複数回使用可能。
<header>の中に<header>を入れたりしてはいけません。

ちなみにmetaタグやCSSなどを記述する<head>とは別物。

h1~h6の見出しが必ずしも必要ではない

html5を学習し始めの頃は、<header>は「ヘッダー」なんだから、必ず見出しタグが必要なんだ!と思い込んでいたけど…必ず必要というわけでもないとのこと(笑)

<article>
<header><!--▼見出しを入れなくてもいい -->
<p><time datetime="2013-09-15">2013.09.15</time></p>
<p>新着情報のお知らせ</p>
</header>
<p>サイトをリニューアルしました。</p>
</article>

<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

<header>-HTML5タグリファレンス

でも、個人的には見出しを入れたほうが様になる?気がして、見出しを入れてコーディングするようにしてますが・・。

article要素

<article>は「単体で完結できるセクション」を示す際に使用する要素です。

articleで囲う箇所について

  • そのページから切り取っても単独で成り立つ文章(箇所)であること
  • そのページの主要な内容であること

一つのページに複数使用可能

ページに単体でなりたつ文章が複数ある場合は<article>で区切ってもOK。

ニュース情報などの場合–追記更新

作成中

TOPページなどの場合–追記更新

作成中

入れ子にしてもよい

<article>を入れ子にして使用する場合は、必ず外側の<article>の内容に対し、内側の<article>の内容は関連しているものでなければならない。

<article>
<header>
<h1>『屈折率』</h1>
<p>宮沢賢治「春と修羅」より</p>
</header>
<p>七つ森のこつちのひとつが
 水の中よりもつと明るく
 そしてたいへん巨きいのに
 わたくしはでこぼこ凍つたみちをふみ
 このでこぼこの雪をふみ
 向ふの縮れた亜鉛あえんの雲へ
 陰気な郵便脚夫きやくふのやうに
   (またアラツデイン 洋燈ラムプとり)
 急がなければならないのか</p>
<section>
  <header>
  <h2>コメント</h2>
  <p>2件のコメントが投稿されました</p>
  </header>
  <article>
  <header>  <p>Hさんのコメント</p>
  <p><time datetime="2013-03-02">2013-03-02</time></p>
  </header>
  <p>七つ森のひとつが明るい(屈折でより大きく見える)に対し、でこぼこ雪、縮れた亜鉛の雲、陰気な郵便脚夫のように険しく孤独な道を行く…賢治の修行僧のような人生を暗示しているような詩だ。</p>
  </article>
  <article>
  <header>
  <p>Kさんのコメント</p>
  <p><time datetime="2013-01-15">2013-01-15</time></p>
  </header>
  <p>光の現象による屈折と、心情の現象による屈折。光と影、明から暗へ…といった二つの対象とカタチを実に美しく表現していると思います。</p>
  </article>
</section>
</article>

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

<article>-HTML5タグリファレンス

section要素

<section>は、ページ内のその部分が一つの文章の章や節(セクション)であることを示すタグ。見出しを含む文章の区切りなどに使用します。

section要素内には見出しタグが必要

前述にあるように<section>で囲われた箇所は、章や節であることを意味づけるので<section>要素内には必ず、h1~h6の見出しタグが必要不可欠です。

どの見出しタグから記述しても大丈夫なようですが、ページ全体の文章構成の流れがおかしくならないよう注意。

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>-HTML5タグリファレンス

sectionが必要?不必要?と迷ったら…

なんとなく理解できたと思って、コーディングし始めると、ここは<section>で囲うか囲わないべきか?と戸惑うことがあります。

そんなときは見出しが必要か必要でないかで判断するといいそうです。
「見出しが必要ないor無理に付ける内容でもない」=「章や節として区切る必要はない」と判断できるから、<section>で囲う必要もないってわけですね。

section使用の注意点

  • レイアウト目的で使用しない。レイアウト目的なら<div>を使用。
  • 見出しを付けれない、また付ける必要ながない部分を<section>で囲まない。

article、nav、aside、header、footerなどもセクションのひとつ

より具体的な意味がある内容は、各セクションタグにあわせコーディングすることが重要です。
例えば、コンテンツの主要内容であれば<article>、ナビゲーションであるなら<nav>、コンテンツ本文と関係あるがややそれる内容であるなら<aside>を使用する…など。

HTML5でサイトをコーディングする際は、各セクション要素の意味を理解しておくことが必要不可欠ですね。

HTML5のレイアウト構造

html5で作った場合の基本レイアウト。あくまで基本です。

ワンカラムレイアウトの基本

<body>
<div id="container">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
 <main role="main">
  <article>
  <h1>タイトル見出し1</h1>
   <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section>
  </article>
 </main>
<aside>カテゴリなど</aside>
<footer>フッター</footer>
</div>
</body>

サイドバーなど複数のカラムで構成されたレイアウトの場合

フルードレイアウト基本

<div id="wapper">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
<div id="contents">
 <main role="main">
 <article>
  <h1>タイトル見出しh1</h1>
  <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section> 
  </article>
 </main>
 <aside>カテゴリーなどのサイドバー</aside>
</div>
<footer>フッター</footer>
</div>

<article>要素は、それ単体でも成り立つセクションに使用。複数使用ができます。
<main>要素は一ページに一つだけ、そのページのメイン部分を囲います。
また、他セクションの子孫として使用してはいけない。
ただ<div >の中に<main>があるのはよいのか…?<div>は装飾用タグだからいいんじゃないか…?考察中….
<div>の中に<main>もOK。
<div>は装飾タグなので基本どこへ使っても問題はないと思います。

main 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

大見出し要素<h1>の複数使用

htm4では、h1要素は一つのページに一つで、複数使用すると構造的にアウト。SEOでもスパム行為とみなされます。

しかしhtml5では、h1要素を複数使用することができるんです!

とはいえh1内にキーワードを乱発すると結局スパム扱いされてしまいそう…なのでキーワードの多用に注意しながら、階層ごとにあった見出しにするよう注意が必要です。

<hgroup>要素は使わない

wordpressデフォルトテーマ「twentyeleven、twentytwelve」では、見出しをグループ化する要素<hgroup>が使用されていますが…

■hgroup要素の使用例

<header>
 <hgroup>
 <h1>見出し1</h1>
 <h2>見出し2</h2>
 </hgroup>
</header>

が、新テーマ「twentythirteen」では使用されていません!
このhgroup要素は2013年4月に廃止勧告がされています。

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

なのでhgroupは使用は避けましょう。