【初心者向け】a 要素について、調べてみた。【HTML】

a 要素は Web 制作ですごく大切な要素というのは言うまでもありませんね！そんな a 要素の使い方について、皆さんはちゃんと理解していますか？私はあんまり知りませんでした（恥ずかしながら；）。とにかくたくさん使うし、まぁまぁてきとうでも使えちゃいますし、そんなに深く勉強しないですもんね！

ですので、
せっかく本記事にたどり着いた方は、a 要素について今一度見直しててはみませんか？

a 要素は
アンカーの「a」

a 要素の a は anchor （アンカー：名詞/動詞）の『a』からくるものだと考えられます。意味は、名詞だと「いかり（船のアレ）」や「支え」など、動詞だと「（船を）留める」、「固定する、据えつける」などです。

どうして anchor なのかは、ふわっとはイメージできますね。（厳密なニュアンスはわかりませんが……。まぁ深く悩む必要はないでしょう。。。）

a 要素のセマンティックな意味としては、そのまま「リンク」を示すもので、別段難しくはないかと思います。

a 要素は
href 属性とセットで！

a 要素の最も基本的な使い方は、href 属性とセットで使用することだと思います。Web ページを作ったことがある人のほとんどが当たり前のよう使っているのではないでしょうか。

<a href="（リンク先のURL）">リンク先のページはこちら</a>

というような記述ですね。

これで a 要素の最低限の機能は使えるかと思います。ちなみにこの「href」は、「エイチレフ」と発音している人が多いようです。

a 要素に追加できる属性

href 属性とセットで使用するというのは、皆さんなんとなくわかっているかと思いますが、他にもどのような属性を追加できるのかというところを見ていけたらと思います。

グローバル属性

class 属性や id 属性、title 属性といったあらゆる HTML 要素につけられるグローバルな要素をつけることができます。a 要素に限らずよく使う属性ですね。

href 属性

前項でも触れたとおり、
「値」にリンク先を記述して使用します。href="リンク先URL"といった記述です。また、「値」に任意の id を記述することでページ内リンクにすることも可能です。こちらはhref="#top"というような記述です。

target 属性

リンクをクリックしたときに“開く方法（例えば新規タブで開くなど）”を設定する属性です。

target="_blank"といえば、けっこうピンとくる記述なのではないでしょうか。デフォルトだと（target 属性を記述しないと）target="_self"と同様の挙動をします。（厳密には、デフォルト ＝ _self ではない）

個人のホームページを作るくらいのレベルであれば、基本は何も記述しないか、外部リンクや意図的に新規タブで表示させたい場合にtarget="_blank"を記述するかの２通りを覚えておけば事足りると思います。

rel 属性

relationship（関係：名詞）の略だと思われます。a 要素とリンク先の関係を示します。rel 属性の「値」はいろいろありますが、a 要素においてよく使うものとして、rel="nofollw"があります。この記述を見ればなんとな～く使い道が分かってきますね！SEO 的な用途でよく使う属性のようです。ちなみに「nofollow」は、該当リンクとリンク先ページを関連付けたくない場合、または“クロール”させたくない場合に使用します。

他にもいろいろあるようですが、 Google のこちらのページでは「sponsored」や「ugc」といった「値」を紹介しているので、一度目を通して必要に応じて使い分けると良いかと思います。

media 属性

a 要素でこちらの属性を使用するのは、かなり玄人向けだと思うので、サラッと。

リンク先がどのようなメディア（画面の幅や解像度）に適しているかを示すという効果があるようです。リンク自体の挙動を直接制御するものではないので、条件に関係なく、リンク先は通常通り開かれる可能性があるみたいです。特に記述しない場合（デフォルト）ではmedia="all"と同じ挙動をします。

media=“print”とかで使用するのが、SEO 的にも効果がありそうです、、。

hreflang 属性

こちらも玄人向けだと思うので、サラッと。

リンク先が特定の言語や地域向であることを示すことができる属性ということです。

type 属性

こちらも少々難しい属性ですね。

リンク先のコンテンツの種類を示すことができる属性ということです。コンテンツの種類というのは、例えば、HTML、CSS、JavaScript、画像、PDFなどといったものです。（これらのコンテンツの種類のことを MIME タイプというようです。）

以上の属性が W3C のページで紹介されています。他のサイトでも違った属性（download 属性や ping 属性など）も紹介されているのでいろいろと調べてみると a 要素をもっと上手に使いこなせるかもしれませんね。

個人的には、href 属性はもちろんとして、target 属性と rel 属性をきちんと使用、使い分けできるようになれば、まずはよしっ！という感じだと思いました。

a 要素が内包できる要素は？

W3C のページの説明によれば、a 要素のコンテンツモデルは、

Content model:
Transparent, but there must be no interactive content descendant.

W3C

という説明です。

コンテンツモデルとは、内包することができる要素のルールみたいなものです。よくわからない場合は、先に下記記事を参考にしていただけたらと思います。

関連記事

【HTML5】コンテンツモデルについて調べてみた

「Transparent」は親要素のコンテンツモデルがそのまま継承されるということを示しているということなので、a 要素が内包できる要素は、a 要素の親要素のコンテンツモデルを継承ということです。ただし、「Interactive content（a 要素や button 要素など）」は持てないという条件がついています。

例えば下記のようなコードであれば

<div>
  <a href="https://www.igmocho.com/">ここに内包できる要素は？</a>
</div>

a 要素は、div 要素のコンテンツモデルを継承します。div 要素が内包できるコンテンツモデルのカテゴリは、「Flow content」です。つまり、上のコードの場合、a 要素は「Flow content」を内包することができるというわけですね。ただし「Interactive content（a 要素や button 要素など）」は、内包できないという感じです。

a 要素は通常はインライン要素
ということを忘れずに

a 要素は通常、display: inline;でインライン要素ですので、内包する内容によっては、CSS でブロックレベル要素を指定する必要があります。特に指定しなくても、見た目上、ブロックレベル要素として機能する場合がありますが、インライン要素であることは把握しておきたいものです。

まとめ

a 要素は、リンクさせるときに使う要素で、皆さんもよく使っている要素ですが、詳しく調べてみると一言ではまとめられないくらい深い内容が隠されていました。特に属性については新しい発見があったのではないでしょうか。a 要素は HTML でとても馴染み深い要素であり、非常に重要な要素でなので、正しい知識で使いこなせるようになりたいものですね。本記事ではまだまだ情報不足だと思うので今後とも内容を充実させていけたらと思います。

出典・参考文献

・W3C. 「4.6.1 The a element」. https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element, 2024年9月9日閲覧。

weblio. 「anchorとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/anchor, 2024年4月10日閲覧。

Google 検索セントラル. 「Google に外部リンクの関係性を伝える」. https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links?hl=ja, 2024年4月11日閲覧。