HTML5 ロゴ

ウェブサイトでリンクを設定する <a> タグですが、HTML5 ではいくつか仕様が変更になりました。

  • target 属性が非推奨ではなくなった。
  • name 属性が廃止になった。
  • アンカーリンクの使い方が変更になった。
  • リンクを設定する範囲がブロックレベル要素でも可能になった。

※なお a 要素は他にも細かい部分が修正されていますが、今回は代表的な変更点を紹介します。

target 属性が非推奨ではなくなった。

リンクを別ウィンドウで表示させる際に使用する "target=_blank" は、これまでも様々なウェブサイトで使われてきました。しかし、実際は非推奨の属性でした。
HTML5では target 属性が非推奨ではなくなり、正式に "target=_blank" が使えるようになりました。

<a href="index.html" target="_blank">新らしいウィンドウで開きます</a>

name 属性が廃止になった。

HTML5では、a 要素の name 属性は廃止されています。
HTML4 以前では name 属性を指定（<a name="名前">）してリンクさせることが可能でしたが、同じ機能を HTML5 で実装する際は id 属性を使用することになります。
id 属性は、１つの文書の中で重複して同じ名前を使うことができないので、ウェブページ内の場所を一意に特定できます。

<a href="#anchor">アンカーリンクへジャンプする</a>
.
.
.
<div id="anchor">ここにジャンプしてくる</div>

アンカーリンクの使い方が変更になった。

例えば、今までは製作途中でダミーリンクを表示するために <a href="#">リンク</a> を使っていたと思いますが、HTML5では href 属性を使わずに a 要素のみでダミーリンクを表現できるようになっています。

<a>このリンク</a>はダミーです。

リンクを設定する範囲がブロックレベル要素でも可能になった。

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

<section>
<h1>HTML5 で仕様が変更になりました。</h1>
<a href="https://on-ze.com">
<div class="entry-content">
<h2>a 要素の変更点</h2>
<p>このように複数のタグをまとめてリンク設定することができます。</p>
</div>
</a>
</section>

日本語に訳すと「船の錨・つなぎ止めて固定する」といった意味の「anchor（アンカー）」が <a> タグの名称の由来です。
指定した場所同士や、関連する情報同士を結びつけ、繋ぐ。まさにウェブサイトに必須の要素。完璧にマスターして使いこなしたいですね。

参考：HTML5 タグ一覧