【HTMLのaタグとは？】基本の使い方・属性・SEO対策について解説

Webページを制作していると、ページ内にハイパーリンクを設定する機会が多くあるかと思います。HTMLを使ってコーディングを行なうとき、リンク設定に用いるのが「aタグ」です。aタグはコーディングの際に頻出のタグであり、さまざまな属性を有しています。

実はHTML のaタグはSEO対策にも深く関わる重要なタグ。aタグをしっかり理解し活用することがWebページ制作では大切になります。

この記事では、HTMLのaタグの基本的な使い方や属性、SEO対策としての活用方法について触れていきます。

aタグのaとは「anchor（アンカー）」を省略したものです。aタグは、ハイパーリンクの出発点と到達点を指定する役割を持っています。出発点とはWebページの画像や文字、到達点とはリンク先となる他のWebページやファイルのことを指します。

またaタグはhref（エイチレフ）属性やtarget属性など多くの属性を有していることも特徴です。そのためリンクを設定する際に、さまざまな性質を付加させることが可能となります。

なお、Webページ作成で使用されるHTMLについて詳しく知りたい方は、別の記事「HTMLとは？CSSとの違いや代表的なタグも紹介」もぜひご覧ください。

HTMLのaタグには、情報を付加するための属性を指定することができます。ここでは使用する機会の多い5種類の属性を紹介します。

aタグのhref属性では、ハイパーリンク先のURLを指定することができます。先ほどの例では、「https://www.△△△.jp/」の部分がハイパーリンク先のURLにあたります。つまり、aタグとして設定された文字列「アンカーテキスト」をクリックすると、「https://www.△△△.jp/」に画面遷移することになります。

target属性では、リンクを開く方法を指定することができます。例えば、次のタグをクリックした場合は「リンク先のWebページを別タブで開く」という動作を行ないます。

「target="_blank"」を指定すると、元のWebページを表示しているタブを残したまま、別タブでページを開くことができます。そのため、リンク先に移動したユーザーにまたサイトに戻ってきてほしい場合や、複数のWebページを表示したい場合などに有効な表示方法となります。

なお、新しいタブではなく、今表示中のタブに表示したい場合は、空欄にするか、次のように 「_self」 と入力します。

charset属性では、リンク先の文字コードを指定することができます。次の例では「UTF-8」の部分が指定された文字コードとなります。UTF-8以外にも、「Shift_JIS」や「EUC-JP」などの文字コードを設定することも可能です。

なお、charset属性はhtml5では廃止されています。

type属性では、リンク先のMIMEタイプ（マイムタイプ=ファイルの種類を表す情報）を指定することができます。

以下の例では、「type="text/html"」でファイルがHTMLであることを表しています。

「絶対パス」と「相対パス」は、リンク先のURLを指定する方法です。ここでは、HTMLのaタグの「絶対パス」と「相対パス」について解説していきます。

絶対パスは、WebページのURLをすべて記述し、リンク先のページを指定する方法です。

上の例では「https://www.△△△.jp/staffing/55/」がリンク先として指定されたURLです。URLを省略せずにhttpsから記述するため、aタグ内の文字列が長くなるのが特徴です。

一方で、サイトのどのページから見ても必ず「https://www.△△△.jp/staffing/55/」に遷移することができます。

相対パスは、リンクを設定する際に、URLの一部を省略する設定方法です。遷移先のURLを、パスを記述した地点からの「相対的な位置」として記述するため相対パスと呼びます。

例えば、先ほどの例では、相対パスは以下のように省略することができます。

この場合、該当リンクの記述ページが「https://www.△△△.jp/」であれば、href属性に記述しているパス「staffing/55/」に、「https://www.△△△.jp/」を付加するため、「https://www.△△△.jp/staffing/55/」がhref属性として認識されるURLになります。しかし、記述ページが「https://www.△△△.jp/test/」の場合、「staffing/55/」に「https://www.△△△.jp/test/」を付加してしまうため、遷移先URLは「https://www.△△△.jp/test/staffing/55/」と変わってしまいます。

本来「https://www.△△△.jp/staffing/55/」とする部分を「staffing/55/」と記述することができるので、コードがシンプルになるものの、記述されているページが変わると同じ記述でも遷移先が変わってしまう可能性があるため注意が必要です。

Webページ制作では多くのハイパーリンク設定を行ないますが、その際に用いるのがHTMLのaタグです。

HTMLのaタグはただリンク先を設定するだけではなく、「リンク先はどこなのか」「どのように指定のWebページを表示するのか」などの、ハイパーリンクに関わるさまざまな設定を行なうことができます。

またHTMLのaタグはSEO対策に活用することもできます。アンカーテキストには、上位表示を狙いたいキーワードを反映するように心がけるとよいでしょう。

AKKODiSでは、HTML知識を活かしてWebデザイナーやエンジニアとして活躍できる求人を多数取りそろえています。Webページのコーディングを勉強中の方や、転職を検討されている方は、ぜひお気軽にお問い合わせください。

（2021年4月現在）