sectionの使い分けルール - 汎用セクション要素：HTML5リファレンス
hiroyon
FUERU
aタグの使い方とルール – アンカー要素：HTML5リファレンス
hiroyon
記事内に商品プロモーションを含む場合があります
aタグとはanchor(アンカー：錨)の略で、ハイパーリンクを意味します。一般的には略して「リンク」と呼ばれます。
このリンクにより、同じサイト内の別ページへのリンクや、別のウェブサイトへ移動する事が出来ます。勿論リンク先の指定はウェブサイトだけでなく、ファイルや画像に設定する事も出来ます。
この記事ではaタグで別タブを開くなど、aタグの使い方とルールを紹介します。
aタグで指定出来る属性
aタグには沢山の属性がありますが、よく使う物を紹介しています。
href
ハイパーリンクが指す先のURL です。リンクは HTTPベースのURLだけではありません。ブラウザーが対応するあらゆるプロトコルを使用することが出来ます。
■色々なリンクの説明
<body>
<section>
<a href="#sample">フラグメントへのリンク指定【#名前】</a>
<a href="https://example.com">絶対パスでリンク指定</a>
<a href="../index.htm">相対パスでリンク指定</a>
<a href="tel:000-0000-0000">電話番号として認識される</a>
<a href="mailto:○○○@gmail.com">メールアドレスとして認識される</a>
</section>
<section>
<p id="sample">フラグメントのリンク着地場所</p>
</section>
</body>例えば、ページ内の特定の場所へ移動するリンクを張ったり、スマホでは電話番号を打たなくてもクリックすれば電話をかける事が出来ます。
target属性
リンクをクリックした際、リンク先をどの様に表示させるのかの設定です。
| 属性 | 説明 | 値 | 説明 |
|---|---|---|---|
| target | リンク先ページの表示方法。 | _blank | 新規のウィンドウに表示。 |
| _self | 現在のフレーム（ウィンドウ）に表示。 | ||
| _parent | 親フレームに表示。 | ||
| _top | フレーム分割を解除してウィンドウ全体に表示。 |
同一ページ内のリンクを「ページ内リンク」、他のサイトへのリンクを「外部リンク」と言ったりします。
今見ているページから移動せずに新しいページを表示させたり、新たに別タブを開いてリンク先を表示させる等の方法があります。
rel属性
aタグでよく使うrel属性をピックアップしました。
rel属性は現在の文書とハイパーリンク先との関係性を指定するのに使用します。
| リンク種別 | 説明 |
|---|---|
| nofollow | そのリンクとサイトを関連付けたくない場合、またはリンク先のページをサイトからクロールさせないようにする場合。 |
| sponsored | リンク先が広告や有料リンクの場合。 |
| ugc | コメントやフォーラム投稿など、ユーザー作成コンテンツ（UGC）のリンク。 |
| noopener | これは信頼できないリンクを開く際に指定する。 |
| noreferrer | 別のページへ移動する際にリンク元ページのアドレスなどの値を送信しない。 |
| next | 現在のページが次のリソースへ移動するリンクであることを示す。 |
| prev | 現在のページが前のリソースへ移動するリンクであることを示す。 |
hreflang属性
リンク先文書の記述言語を表します。例えば日本語のページから英語のページにリンクをする場合など、リンク先の言語を指定します。
| リンク種別 | 説明 |
|---|---|
| hreflang | ja、en、zh等 |
type属性
リンク先 URL のメディアタイプの形式を表します。
| リンク種別 | 説明 |
|---|---|
| type | text/html、image/png、video/mp4等。 |
プロフィールの詳細へ
テキストが入ります。