HTML5 <a>
<a>は、anchor（アンカー）の略です。
<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。
anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。
<a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。
<a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。
href属性は、ハイパーリンク先のURLを指定する際に使用します。 href属性の値には相対パスと絶対パスのどちらでも指定することができます。
相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。 絶対パスとは、http://～で始まるURLを指定する方法で、別のドメイン名のURLにリンクする際などに利用されます。
■使用例
HTMLソース
<a href="a.html">相対パスでリンクします</a><br>
<a href="https://www.manabi-bar.com/a-html5.html">絶対パスでリンクします</a><br>
<a href="../index.htm">ひとつ上のディレクトリへ</a><br>
<a href="mailto:[email protected]">メール</a><br>
<a href="../index.htm"><img src="https://www.manabi-bar.com/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png" alt="学びBAR"></a>
<a href="a.html">相対パスでリンクします</a><br>
<a href="https://www.manabi-bar.com/a-html5.html">絶対パスでリンクします</a><br>
<a href="../index.htm">ひとつ上のディレクトリへ</a><br>
<a href="mailto:[email protected]">メール</a><br>
<a href="../index.htm"><img src="https://www.manabi-bar.com/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png" alt="学びBAR"></a>
↓↓↓
ブラウザ上の表示 ※このサイトでは<a>タグにカスタムスタイルを設定しています。
target属性はハイパーリンク先のターゲット、つまり、リンク先をどのように開くかを指定する際に使用します。 target属性の値には以下の4種類、または、任意のターゲット名を指定することができます。 任意のターゲット名を指定する際には、リンク先にそのターゲット名を付けておきます。 ターゲット名は、一文字目がアンダースコア（ _ ）以外で始まる値でなければいけません。
■リンク先ターゲット（target属性）の値
_self
現在のウィンドウでリンク先を開く
_parent
現在のウィンドウの親ウィンドウでリンク先を開く
_top
現在のウィンドウの最上位階層のウィンドウでリンク先を開く
_blank
新しいタブやウィンドウでリンク先を開く
任意のターゲット名
任意の名前を付けたウィンドウでリンク先を開く
現在のウィンドウでリンク先を開く
_parent
現在のウィンドウの親ウィンドウでリンク先を開く
_top
現在のウィンドウの最上位階層のウィンドウでリンク先を開く
_blank
新しいタブやウィンドウでリンク先を開く
任意のターゲット名
任意の名前を付けたウィンドウでリンク先を開く
HTMLソース
<a href="a.html" target="_blank">別画面を開いてリンクします</a><br>
<a href="a.html" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="a.html" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="a.html" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="a.html" target="abc">abcという名前のフレームにリンクします</a><br>
<a href="a.html" target="_blank">別画面を開いてリンクします</a><br>
<a href="a.html" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="a.html" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="a.html" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="a.html" target="abc">abcという名前のフレームにリンクします</a><br>
↓↓↓
ブラウザ上の表示 ※このサイトでは<a>タグにカスタムスタイルを設定しています。
※このサイトではフレームを使用していないので、target="_parent"とtarget="_top"の動作はtarget="_self"と同じになります。 またabcという名前のフレームは設定していないのでtarget="abc"の動作はtarget="_blank"と同じになります。
rel属性・media属性・hreflang属性・type属性は、リンク先のリソースがどんな性質を持つかを、ユーザーがリンクをたどる前に知らせるための属性です。 rel属性は現在の文書とハイパーリンク先との関係性、 media属性はハイパーリンク先のメディア、 hreflang属性はハイパーリンク先の言語、 type属性はハイパーリンク先のMIMEタイプを、それぞれ指定する際に使用します。
■HTML4.01からHTML5へのバージョンアップによる変更点
HTML5では、a要素のname属性は廃止されています。 HTML4.01におけるname属性は、ウェブページ内の特定個所に名前を付けて、ページ内リンクを作成する際などに使用していました。 HTML5で同様の機能を作成する場合にはid属性を使用します。 id属性は、ひとつの文書の中では重複して同じ名前を付けることはできないので、ウェブページ内の場所を一意に特定できます。
HTMLソース
<a id="abc">ファイルの途中にabcという名前を付けます</a><br>
<a href="#abc">abcと名前を付けた場所へリンクします</a><br>
<a href="index.shtml#tex">別ファイルの名前を付けた場所へリンクします</a>
<a id="abc">ファイルの途中にabcという名前を付けます</a><br>
<a href="#abc">abcと名前を付けた場所へリンクします</a><br>
<a href="index.shtml#tex">別ファイルの名前を付けた場所へリンクします</a>
↓↓↓
ブラウザ上の表示 ※このサイトでは<a>タグにカスタムスタイルを設定しています。
HTML4.01ではa要素はインライン要素であったため、ブロックレベル要素全体をリンクを指定することはできませんでした。 例えば、段落全体を<a>～</a>で囲んでリンクするような指定方法は認められていませんでした。
HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>～</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。
HTMLソース
<aside">
<h1>宣伝</h1>
<a href="https://www.udemy.com/course/3h-html-css/?couponCode=EB3B8FCB7EBDFEE56740">
<section>
<img src="
https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/PR-Udemy3hHTML-img-02.jpg"
width="400px">
<h1>Udemy人気講座</h1>
<h2>【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座</h2>
<p>HTML初心者向け講座です。</p>
</section>
</a>
<a href="https://www.amazon.co.jp/dp/B09NK9WZ6M?ref=ive_vftp_hero_cx_pfo_vse-cards-ingress0&th=1">
<section>
<h1>カバンを落としても中のMacBook Airを守る</h1>
<h2>衝撃吸収バンパー内臓の超軽量・極薄のインナーバッグ</h2>
<img src="https://www.inorigami.com/uploads/9/1/8/2/9182343/to-ipag13yokow-pr_orig.jpg" width="400px">
<p>Macbook Pro,Macbook Airの13インチ、14インチ、15インチ、16インチ用<br>
縦型と横型の2タイプ、カラーは白と黒から選べます。</p>
</section>
</a>
</aside>
<aside">
<h1>宣伝</h1>
<a href="https://www.udemy.com/course/3h-html-css/?couponCode=EB3B8FCB7EBDFEE56740">
<section>
<img src="
https://creps-inc.heteml.net/creps-inc.jp/data/manabi-bar/html-sample/PR-Udemy3hHTML-img-02.jpg"
width="400px">
<h1>Udemy人気講座</h1>
<h2>【HTMLとCSS】ルールをしっかりマスター。初心者でも3時間後にはWEBサイトが編集できる基礎知識が身につく実践型講座</h2>
<p>HTML初心者向け講座です。</p>
</section>
</a>
<a href="https://www.amazon.co.jp/dp/B09NK9WZ6M?ref=ive_vftp_hero_cx_pfo_vse-cards-ingress0&th=1">
<section>
<h1>カバンを落としても中のMacBook Airを守る</h1>
<h2>衝撃吸収バンパー内臓の超軽量・極薄のインナーバッグ</h2>
<img src="https://www.inorigami.com/uploads/9/1/8/2/9182343/to-ipag13yokow-pr_orig.jpg" width="400px">
<p>Macbook Pro,Macbook Airの13インチ、14インチ、15インチ、16インチ用<br>
縦型と横型の2タイプ、カラーは白と黒から選べます。</p>
</section>
</a>
</aside>
↓↓↓
HTML5では、a要素にhref属性が指定されていない場合には、プレースホルダーを意味する要素となるとされています。 ここでいうプレースホルダーとは、暫定的に代わりに配置しておくものという程度の意味です。
例えば、コンテンツの一部がまだ作成されていない場合などに、ナビゲーションメニューからリンクを指定するURLが存在しないということがあるかと思います。 そのような場合に、将来的にはリンクメニューが入る予定のその位置に、href属性を持たないa要素を暫定的に配置しておくことができます。
尚、href属性を指定しない場合には、target属性・rel属性・media属性・hreflang属性・type属性も同じく指定できません。
■属性
href属性
ハイパーリンク先のURLを指定
target属性
ハイパーリンク先を開く際のターゲットを指定
rel属性
ハイパーリンク先との関係性を表す（<link>のrel属性と同じ）
media属性
ハイパーリンク先のメディアを指定
hreflang属性
ハイパーリンク先の言語を指定
type属性
ハイパーリンク先のMIMEタイプを指定（MIMEタイプとは、"タイプ名/サブタイプ名"でファイル形式を指定する文字列のこと、例えば、リンク先がHTMLファイルならtype="text/html"となる）
ping属性
ユーザーがハイパーリンクをたどった際にpingを送信する先のURLを指定。値にはスペースで区切って複数のURLのリストを指定することができる。pingの送信先では一般的にユーザーのアクセス記録・集計・解析などが行われる
download属性
リンク先URLへの移動ではなく、リンク先ファイルをダウンロードするようブラウザに示す
ハイパーリンク先のURLを指定
target属性
ハイパーリンク先を開く際のターゲットを指定
rel属性
ハイパーリンク先との関係性を表す（<link>のrel属性と同じ）
media属性
ハイパーリンク先のメディアを指定
hreflang属性
ハイパーリンク先の言語を指定
type属性
ハイパーリンク先のMIMEタイプを指定（MIMEタイプとは、"タイプ名/サブタイプ名"でファイル形式を指定する文字列のこと、例えば、リンク先がHTMLファイルならtype="text/html"となる）
ping属性
ユーザーがハイパーリンクをたどった際にpingを送信する先のURLを指定。値にはスペースで区切って複数のURLのリストを指定することができる。pingの送信先では一般的にユーザーのアクセス記録・集計・解析などが行われる
download属性
リンク先URLへの移動ではなく、リンク先ファイルをダウンロードするようブラウザに示す
■使用例
HTMLソース
<nav>
<ul>
<li><a href="/index.html">トップページ</a></li>
<li><a href="/html-index.html">HTMLタグリファレンス</a></li>
<!--新しいタブでページを開かせる-->
<li><a href="/list-of-symbols-and-special-characters.html" target="_blank">CSS3リファレンス</a></li>
<li><a>CANVASリファレンス</a></li>
<li><a href="/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png">ロゴ画像へリンク</a></li>
<li><a href="/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png" download="logomark">アイコンファイルをダウンロード</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="/index.html">トップページ</a></li>
<li><a href="/html-index.html">HTMLタグリファレンス</a></li>
<!--新しいタブでページを開かせる-->
<li><a href="/list-of-symbols-and-special-characters.html" target="_blank">CSS3リファレンス</a></li>
<li><a>CANVASリファレンス</a></li>
<li><a href="/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png">ロゴ画像へリンク</a></li>
<li><a href="/uploads/9/1/8/2/9182343/bar-logo-yoko-blue02b.png" download="logomark">アイコンファイルをダウンロード</a></li>
</ul>
</nav>
↓↓↓
ブラウザ上の表示 ※このサイトでは<a>タグにカスタムスタイルを設定しています。
