〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

HTMLのaタグとは?基本的な使い方やよく使われる属性を徹底的に解説します!

本記事は、「HTMLの初心者なんだけど、aタグの基本的な使い方や属性を知りたいな…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・特定の属性の使い方を知りたい(例えばhrefやtarget)人
・ページ内リンクや他のページへのリンクの設定方法を知りたい人
・画像やボタンをリンクにしたい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「HTMLのaタグの基本的な使い方」を「後半」では「「絶対パス」と「相対パス」の違いと使い分け」や「HTMLのaタグで画像をリンク」を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

HTMLのaタグの基本的な使い方を解説します。

HTMLの<a>タグは、ウェブページ内でリンクを作成するのに使います。例えば、「クリックしてください」というテキストをクリックすると、指定したウェブページに移動できます。

この場合、hrefという属性にリンク先のウェブページのアドレスを指定します。リンクのテキストは「クリックしてください google検索に飛びます」という部分です。

UIHACK
編集長
UIHACK 編集長

基本的なリンクを作成するには、以下の手順に従います。

<a>タグを使います。これはリンクを定義するための要素です。
href属性にリンク先のURLを指定します。URLは通常、http://やhttps://で始まります。
以下に基本的なサンプルコードを記載します。
<a href="https://www.example.com">Visit Example Website</a>
HTML
UIHACK
編集長
UIHACK 編集長

この例では、”Visit Example Website”というテキストがリンクになり、

クリックすると”https://www.example.com”に遷移します。

HTMLのaタグの属性(href、target、idなど)の使い方と効果

この章では、現場でもよく利用される基本的な属性の使い方を説明します。

href属性

href属性はリンク先のURLを指定します。絶対パスや相対パスを使うことができます。

<a href="https://www.example.com">Visit Example Website</a>
HTML

target属性

target属性はリンクが開かれる場所を指定します。例えば、新しいタブで開く場合には”_blank”を使います。

<a href="https://www.example.com" target="_blank">Visit Example Website</a>
HTML

id属性

同じページ内の特定のセクションにリンクするには、href属性に#とセクションのIDを組み合わせます。

<a href="#section2">Go to Section 2</a>
HTML

その他のaタグで利用できる属性の一覧

downloadリンク先のリソースをダウンロードします。
例:<a href=”file.pdf” download>Download PDF</a>
relリンク先のリソースとの関係を指定します
例:<a href=”https://www.example.com” rel=”nofollow”>Visit Example Website</a>
titleマウスオーバー時に表示されるツールチップを指定します。
例:<a href=”https://www.example.com” title=”Visit Example Website”>Visit</a>
class要素にクラスを指定します
例:<a href=”https://www.example.com” class=”link-style”>Visit Example Website</a>
その他のaタグで利用できる属性の一覧
非推奨の属性

charset属性、coords属性、name属性、rev属性、shape属性はMDN Web Docsでは非推奨になっています。

プチ解説

これらの属性を活用することで、リンクの動作や見た目をカスタマイズできます。これが、使いやすいページを作成する一歩です。ぜひ、実際に試してみてください!

HTMLのaタグのhref属性を使ったリンク先の指定方法

HTMLの<a>タグを使ってリンクを作成する際、href属性を活用することでリンク先を指定できる事は前章で解説しましが。以下では、href属性の使い方について詳しく解説します。

「絶対パス」と「相対パス」の違いを解説!使い分けのポイントとは?

リンク先を指定する際に使われる方法は「絶対パス」と「相対パス」です。それぞれの違いを理解し、使い分けて見て下さい。

絶対パスとは?

絶対パスは、ウェブ上の特定の場所を完全なURLで指定する方法です。これによって、どのページからでも同じ場所にアクセスできます。

以下に例を記載します。

<a href="https://www.example.com/about">About Us</a>
HTML
UIHACK
編集長
UIHACK 編集長

このリンクは常に「https://www.example.com/about」にアクセスします。

相対パスとは?

相対パスは、現在のファイルからの相対的な場所を指定する方法です。主に同一サイト内のリンクを作成する際に使います。

<a href="about.html">About Us</a>
HTML
UIHACK
編集長
UIHACK 編集長

この場合、about.htmlは現在のディレクトリ内にあるファイルと仮定され、そのファイルにリンクします。

使い分けのポイント
  1. 絶対パスの使用
    外部のウェブサイトへのリンクや、自身のサイトの特定のページへのリンクを作成する場合に適しています。
  2. 相対パスの使用
    同一サイト内の異なるページ間でのリンクを作成する場合に便利です。ファイルの階層構造を考慮する必要があります。

HTMLのaタグにclass属性を追加する方法

class属性を追加することで、特定のCSSを要素に対して追加でき「色」や「文字サイズ」を変更できたりします。

以下は、class属性を追加する例です。

<a href="https://www.example.com" class="custom-link">Visit Example Website</a>
HTML
UIHACK
編集長
UIHACK 編集長

この例では、class属性に“custom-link”という値が指定されています。

以下のCSSを上記のHTMLに対応しております。

.custom-link {
  color: pink;
  text-decoration: underline;
  font-size: 30px;
}
CSS

実行結果

プチ解説

color: pink;テキストの色をピンクに設定します。

text-decoration: underline;テキストに下線を追加します。

font-size: 30px;テキストのフォントサイズを30ピクセルに設定します。

HTMLのaタグで画像をリンクする場合はalt属性を付けよう

HTMLにおいて、画像をリンクとして使用する際、<a>タグを使います。この場合、必ず画像にalt属性を追加しましょう。

以下は、画像をリンクとして使用する基本的なHTMLの例です。

<a href="https://www.example.com">
  <img src="image.jpg" alt="代替テキスト">
</a>
HTML
UIHACK
編集長
UIHACK 編集長

この例では、<a>タグでリンク先のURLを指定し、その内部に<img>タグを配置しています。<img>タグにはsrc属性で画像のファイルパスを指定し、alt属性には画像の代替テキストを記述します。

alt属性の役割と必要性

altは、画像の代替テキストを指定する属性です。以下のように使います。

<img src="example.jpg" alt="代替テキスト">
HTML

なぜ必要なのか

  1. アクセシビリティ向上
    alt属性は、画像が読み込めない場合や視覚障害者向けの補助技術を利用する場合に、画像の内容を伝える重要な手段です。
  2. SEO(検索エンジン最適化)
    検索エンジンは、画像のalt属性を読み取り、コンテンツの理解に役立てます。適切な代替テキストを提供することで、検索結果への影響を与えることがあります。
  3. 遅延読み込みの補完
    ページが読み込まれる際に、画像が遅れて表示される場合でも、alt属性が表示されるため、ユーザーにとって理解可能です。
まとめ

alt属性は、アクセシビリティを向上させ、SEOを強化し、画像が正しく理解されることを保証します。すべての画像に適切な代替テキストを提供

結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、HTMLのaタグでリンクを貼る方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • HTMLのaタグの基本的な使い方
  • aタグの属性(href、target、idなど)の使い方
  • aタグのhref属性を使ったリンク先の指定方法
  • aタグにclass属性を追加する方法
  • aタグで画像をリンクする場合はalt属性

もう一度、最初から「HTMLのaタグの基本的な使い方を解説します。」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

HTMLで年と月を選択する入力欄を実装したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

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