フロントエンジニアによるカンニングペーパー。aタグ。
スポンサーリンク
あなたはaタグを使いこなせていますか？
正直なところ、私はaタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『aタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
aタグとは
aタグは、ハイパーリンクを指定します。
指定した場所同士をつなぐことで、
関連する情報同士を結び付け、情報間の移動手段を提供する重要なタグです。
Webページ内のテキストや画像などを、
<a>～</a>で囲むことで、ハイパーリンクの適用範囲を指定することもできます。
ただし<a>～</a>の中に、他のリンクやフォームボタンなどの、
相互に作用する（インタラクティブな）内容を含めることはできません。
aタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
download
リンク先URLへの移動ではなく、
リンクされたファイルを、ダウンロードするようブラウザに示します。
download属性に値を指定することで、
ダウンロードする際のファイル名を指定することもできます。
例）
<a href="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sugulog/20230326/20230326213643.png" download="thumbnail.png">
本記事サムネイルをダンロード
</a>
href
絶対パスや相対パスを指定し、リンク先URLを指定します。
また、href 属性が存在する場合、
<a> 要素にフォーカスがある状態で Enter キーを押すと起動します。
例）
<a href="https://sugulog.hatenadiary.jp/archive">
ブログ記事一覧に移動
</a>
電話番号、メールアドレスを指定することもできます。
例）
<!-- 電話番号 --> <a href="tel:+1(800)000-0000">
電話で問い合わせ
</a>
<!-- メールアドレス --> <a href="mailto:sample@sample.org">
メールで問い合わせ
</a>
hreflang
現在表示しているページと、リンク先のページで言語が異なる時に、
リンク先のページが、どの国の言語向けに作られているかを指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" hreflang="en">
英語向けページに移動
</a>
media
リンク先の文書や読み込む外部リソースが、
PCやテレビ等の、どのメディア（デバイス）に適用するのかを指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" media="print">
プリンタ印刷向けページに移動
</a>
ping
href属性が指定された、リンクをクリックした際に、
値に指定したURLに、POSTメソッドのリクエスト（PING）を送信します。
リンクが何回クリックされたのか等の、
サイト分析（トラッキング）に利用されることが多いです。
例）
<a href="https://sugulog.hatenadiary.jp/archive" ping="sample.php">
PINGを送信
</a>
referrerpolicy
リンク先に移動する際に、
アクセス元のURL情報（リファラー）を、送信するかのポリシーを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<a href="https://sugulog.hatenadiary.jp/archive" referrerpolicy="origin">
参照元のオリジン情報のみ送信
</a>
rel
リンク先URLとの関係性を指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" rel="author">
リンク先URLは、現コンテンツ著者に関する追加情報を提供
</a>
target
リンク先をどのように開くのかを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<a href="https://sugulog.hatenadiary.jp/archive" target="_blank">
別ウィンドウで表示
</a>
type
リンク先の、ファイルの種類を表す情報（MIMEタイプ）を指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" type=""text/html"">
リンク先はHTMLファイル
</a>
以上の属性以外にも、グローバル属性を指定することもできます。
アンカーリンク
WEBページを閲覧している時に、
クリックするとページ内の指定の場所へ移動できるリンクのことです。
以下のアンカーリンクの例は、
このブログで実際に利用している 参考文献・記事 のコードです。
例）
<!-- リンク側：href属性に「#リンク名」を指定する --> <a href="#参考文献・記事">
参考文献・記事
</a> <!-- 遷移側：遷移要素のid属性に対し、「リンク側で指定したリンク名」を指定する --> <p id="参考文献・記事">
参考文献・記事
</p>
また、href属性に "#top" や "#" を指定することで、
遷移側のid属性なしで、現在のページの先頭にリンクすることもできます。
アクセシビリティ
aタグにおいて、推奨されているアクセシビリティを紹介します。
擬似的なボタンとして使用しない
不必要なhref属性を指定することは、予期しない動作を引き起こすことがあります。
また、支援技術（読み上げソフト等）に対して、誤った意味を伝えることもあります。
代わりにbuttonタグを使用しましょう。
リンクの内容は、リンクの行き先を示す
文脈から外れたとしても、リンクの行き先を示すようにしましょう。
例）
<!-- NG：リンク先を示していない --> <p>
このブログの参考文献・記事については、
<a href="#参考文献・記事">こちら</a>
をご確認ください。
</p> <!-- OK：リンク先を示している --> <p>
このブログの
<a href="#参考文献・記事">参考文献・記事</a>
について、ご確認ください。
</p>
リンクを起動したときに、何が起こるかを示す
リンクを新しいタブやウィンドウで開く、ダウンロードとして使用する場合は、
リンクを起動したときに、何が起こるかを示すようにしましょう。
読み上げソフト等で操作を行っている人や、
認知に問題がある人は、予期せぬ挙動に混乱する可能性があります。
例）
<a target="_blank" href="https://sugulog.hatenadiary.jp/archive"> すぐるのブログ記事一覧（新しいウィンドウで開きます） </a>
アイコンを使用する場合は、alt属性も指定する
リンクの動作を示すためのアイコンを使用する場合は、alt属性を使用しましょう。
例）
<a href="sample-report.ppt"> サンプルレポート（PowerPoint） <img alt="(PowerPointファイル)" src="ppt-sample-icon.png" /> </a>
44 × 44（CSSピクセル）以上の大きさを確保する
簡単に起動できるように、十分な大きさの領域を提供する必要があります。
運動制御に問題がある人や、
タッチパネルを使用している人など、さまざまな人に役立ちます。
ただし、以下の条件を満たす場合は例外とされます。
- 段落（散文コンテンツのテキストのみ）や文章の中のテキストリンク
-
サイズが小さい場合は、タップ領域と余白を含めて44pxでも構わない
リンクが互いに近接している場合は、間隔を置く
リンクとリンクが視覚的に近接している場合は、
リンクとリンクの間に、それらを隔てる間隔を置きましょう。
運動制御に問題がある人も含め、誤操作を防ぐことができます。
まとめ
今回は『aタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
