【 リンク 】を埋め込むHTMLタグについて解説します~HTML入門~
このような方にオススメの記事
- HTMLの学習を始めた方
- HTMLでリンクを埋め込む方法を知りたい方
- aタグについて詳しく知りたい方
この記事は、HTMLのタグについて、『なんとなくで使えている』方へにむけて一度タグの意味と種類を確認してみよう的な感じの記事です。
実際は感覚的にどういうタグかわかっていればコードは書けるけど、ある程度かけるようになったからこそ、一歩先の『正しい使い方』や『もっといい使い方』等理解を深めて行けたらなあと思っています。
なお、本記事の内容はHTMLクイックリファレンスを参考文献として、より具体的に実際のコードを見ながら解説していきます。
contents
リンク
part3～②テキストの表現～ではHTMLタグの分類の『②テキストの表現』について解説しました。
テキストの表現に分類されるタグは、主にブラウザで表示するテキストの装飾を付与するものでした。非推奨のタグも多く、スタイルシートで指定する方が自由度も高く、変更も容易です。
しかしながら先日、ワードプレスプラグインの【smartslider3】でテキストを入力する際に、入力項目に<b><b/>を使用ました。このように、スタイルシートが使用できない場面でテキストに装飾を付ける際は案外知っていて便利なのかもしれません。
今回の③リンクに分類されるタグは、その名の通りリンクを貼ったり、文書ファイルを指定する際に使用します。
クイックリファレンスの分類では、下記四つのタグが分類されます。
<A><MAP><AREA><BASE><LINK>
<A>タグのウェイトがかなり重いので本記事では<A>に焦点を当てて解説していきます。
<A>・・・リンクをはる、リンクの出発点・到達点を指定する
＜A＞は、アンカー（Anchor）の略で、このタグ内の領域、つまり記述したテキストや画像にリンクを貼ることができる。ページ外へ遷移する際は、href属性に遷移先のURLを指定します。ページ内で遷移する際には、href属性とid属性で出発点と到達点を指定します。具体的には、遷移の出発点となるタグにhref属性でリンク先を指定し、到達点となるタグにはid属性で先ほど出発点に指定したリンク先であるということ指定します。
上記の例以外にも、<A>タグでは10以上の属性が指定でき、概要は下記のとおりです。href属性以外の属性についても解説します。
| 属性 | 属性の値 | 概要 |
| href | URI | リンク先の指定 |
| name(※廃止) | 文字列 | リンク到達点とする名前を指定 |
| charset (※廃止) | 文字コード | リンク先の文字コードセットを指定 |
| hreflang | 言語コード | リンク先の言語を指定 |
| type | MINEタイプ | リンク先のMINEタイプを指定 |
| rel | リンクタイプ | この文書から見たリンク先文書との関係を記述 |
| rev (※廃止) | リンクタイプ | リンク先文書からみたこの文書との関係を記述 |
| shape (※廃止) | rect,circle,poly,default | リンク領域の形状を指定 |
| coords (※廃止) | 座標(X,Y) | リンク領域の座標を指定 |
| target | _blank,_self,_parent、_top, フレーム名,ウィンドウ名 | リンク先文書の表示方法を指定 |
| download | ダウンロード時のファイル名 | リンクがファイルのダウンロード用であることを指定 |
| accesskey | ショートカットキー | ショートカットキーを割り当てる |
※クイックリファレンス【HTMLタグリファレンス】を参考
※Chrono Drive【<a>】を参考
name属性 (※廃止)
name属性はHTML5では、廃止されています。使用方法としては基本的にid属性と同じで、指定することでページ内遷移先の到達点として指定できます。注意点としては、この方式でページ内遷移をする場合、到達点として指定できる要素はa要素のみとなる点が挙げられます。
| <a name=”abc”>到達点</a> |
charset属性 (※廃止) 、hreflang属性
リンク先の文字コードセット、言語を指定します。HTML5では、<A>のcharset属性は廃止となっています。hreflang属性は、ページの言語（英語・日本語・フランス語など）を示すので、日本語ページしかない日本向けサイトでは利用する必要はありません。
| <a charset=”utf-8″ hreflang=”en”>出発点</a> |
type属性
リンク先のMINEタイプを指定します。MINEタイプとは『ファイルの種類を表す情報』のことで、HTMLファイルは【text/html】というMINEタイプに分類されます。
| <a type=”text/html” href=”https://~~~~~”>出発点</a> |
target属性
リンクを開く方法を指定します。『blank』を指定すると、開いているのページを残した状態でリンクを開き、『self』を指定すると、開いているページでリンクを開くことができます。
| <a target=”blank” href=”https://~~~~~”>出発点(新しいページで遷移)</a> <a target=”self” href=”https://~~~~~”>出発点（開いているページを遷移）</a> |
rel属性
この文書(出発点のある文書)から見たリンク先文書(到達点の文書)との関係を記述 します。下記のタイプがあります。
- alternate：現在のドキュメントの代替ドキュメントへのリンクであることを示す。
- author：現在のドキュメントや記事の著者へのリンクであることを示す。
- bookmark：ブックマークのためのパーマリンク（固定リンク）であることを示す。
- help：ヘルプ・ドキュメントへのリンクであることを示す。
- license：著作権情報へのリンクであることを示す。
- next：一連のドキュメントにおける次のドキュメントへのリンクであることを示す。
- nofollow：リンク先ドキュメントをフォローしない。
- noreferrer：リンク先へHTTPリファラを送らない。
- prefetch：リンク先ドキュメントを先制キャッシュ。
- prev：一連のドキュメントにおける前のドキュメントへのリンクであることを示す。
- search：現在のドキュメントとその関連ページを検索するために使用可能なリソースへのリンクであることを示す。
- tag：現在のドキュメントのタグであることを示す。
download属性
リンクがファイルのダウンロード用であることを指定します。値は、ダウンロードする際のファイル名を指定でき、指定なしの場合は、リソース本来のファイル名として保存されます。ブラウザによっては、同じオリジンにあるリソースしか対応していないため注意が必要です。
| <a href=”画像のパス” download=”保存するファイル名”>画像を保存</a> |
accesskey属性
accesskey属性は、ショートカットキーを指定します。マウスが使えない環境下でページ遷移ができるようになります。
| <a href=”https://~~~~” accesskey=”j”>jで遷移</a> |
まとめ
<A>タグは、単純なページ遷移をするだけなら使用する属性は少ないですが、SEO対策や多言語サイトへの遷移をする際には、比較的奥が深いタグだと思います。target属性で、元のページを残したいときなどはblankを指定するなど、必要な場に応じて少しずつ理解を深めていったらいいのかと思います。
次回は、タグの分類③リンクの他のタグについて解説していきます。
お疲れさまでした。
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
