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>があるのは間違っています。基本的な構文、正しいコンテンツ・モデルを意識したい。

その他、以外と見落としがちなa要素の変更点

無駄なタグが減っている!

アンカーリンク

▽HTML4/XHTMLまで

<a href="#a1">A1へジャンプする</a>
-----------
<a name="a1"></a>
<h1>A1ここへジャンプ</h1>

▼HTML5から

<a href="#a1">A1へジャンプする</a>
-----------
<h1 id="a1">A1ここへジャンプ</h1>

空リンク

▽HTML4/XHTMLまで

<a href="#">ダミーの空リンク</a>

▼HTML5から

<a>ダミーの空リンク</a>

これだけでOK。

「HTML5のa要素(リンク)が便利」への8件のフィードバック

  1. 度々すみません、以下のような書き方も同じですが、このimageにリンクを貼る方法がわかりません。

  2. 初めまして。
    リンクの貼り方について調べています。

    という画像で作られたスライドショーのhtmlがあるのですが、これにリンクを貼る方法がわかりません。
    imageに、あるいは範囲を指定して・・・と考えてみましたが、どうにもこうにも貼り方が・・・
    こちらにのダミーの空を入れる既述があったので、これを利用できないかと思いました。
    で囲えばimageは白くなって画像が表示されなくなってしまいます。
    何かお知恵がございましたらお教え頂けないでしょうか。

    1. こんにちは。
      参考のスライドショーがどういうものなのか分からないので難しいのですが‥
      JavaScriptやflashなどのスライドショーは、プログラム内に画像にリンクを貼る必要があるかもしれません。

      また念のためですが、<a>でブロックレベル要素を囲めるのはhtml5からです。html4で書かれたhtml文書では動きません。

      1. レスありがとうございます!
        ここのコメント欄にはソースの既述が入らないようですね。括弧を大文字にして再度お送りしてみます。

        先に書いたものは
        <div style=”background-image: url(images/001.jpg);”></div>
        後で書いたものは
        <div class=”author” style=”background-image: url(images/002.jpg);”></div>
        ですが、どちらもimageを呼び出して表示させる方法です。この個々のimageにリンクを貼る方法はどのような方法があるかなんですが、、、

        1. <div>内が空(画像を背景に入れた空要素にしている)なので、<div>内に透明な小さめの画像などを入れてみてはどうでしょう。
          <a href="#"><div style="background-image: url(images/001.jpg);"><img src="url"></div></a>
          で表示されなければ他のやり方は思いつきません‥

          これはJavaScriptのスライドショーですか?それだと先ほども書いたようにプログラム内での設定が必要かと思います。

          ※こちらのコメント欄でのソース表示は、<code>で囲み「<」「>」の記号は「&lt;」「&gt;」と記述して表示できます。タグミスでのエラーを防ぐためです。面倒でしたらそのまま全角でお書きください。

Mine にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です