きっかけ
ここのところ、画面の実装をしていてaタグではまることが多くて辛いです。disableってつけて見た目もdisableっぽくなってるのになぜかクリックするとリンク先へ飛んでいけてしまうという事件やdownloadタグがブラウザによって挙動が変わるという事件を経て、きちんと調べようと誓いました。
調査について
こちらを参考にしました。参考というかこちらのページをまとめました。
使用可能な属性
グローバル属性
グローバル属性とは全てのHTML要素で共通の属性です。例えばhiddenとかidとか。個人的にはでしょうねって感想です。
download属性
指定されたURLへ移動するのではなく、ダウンロードするようブラウザへ示す属性です。ファイルとかダウンロードさせたいときに便利じゃん!って飛びついたんですがこいつがなかなか曲者です。ブラウザで挙動が違います。まずInternet Explorerは未対応です。これだからIEはダメ。あと、edgeでもダウンロードができないというバグが報告されているようです。クロスブラウザ対応が必要な場合はこのタグ使わない方がいいかもしれません。
href
ハイパーリンクのリンク対象をURLまたはURLフラグメントで表します。aタグはリンクさせたいときに使うんだよ、って研修で習った気がします。
hreflang,ping,referrerpolicy
初めまして、不勉強で知りませんでした。ただ、使う機会はあまり多くない気がします。referrerpolicyは実験段階だから製品内では使うなとのことです。
rel
対象オブジェクトとリンクオブジェクトとの関係を示す属性です。特にコメントはないです。
target
リンク先を表示する場所を示す属性です。
_selfは遷移元のページに表示します。デフォルトです。
_blankは新しいブラウジングコンテキストに表示します。
_parentは親コンテキストに表示します
_topはトップレベルのコンテキストに表示します。
type
リンク先のURLのMIMEタイプの形式を表すメディアタイプを指定します。純粋に助言的なもので組み込まれている機能はないそうなので、気にしなくていいと思います。
感想
感想というよりはあれなんですが、aタグにはdisable属性がないんですよ。衝撃的でしたね。ぶっちゃけdisableがないと知ったのがこの記事を書こうと思った一番の動機です。aタグに活性・非活性つけたければJavaScriptを使いましょうってことなんでしょうね。