aタグのhref属性のすべて



aタグのhref属性に指定できるリンク先は絶対パスや相対パス、ページ内リンクなど様々ありますよね。

サイトの内部リンクのみスクレイピングするプログラムを作っていた時に、aタグのhref属性に入るリンク先の種類を把握する必要があり色々調べましたので、すべてとは言えないかもしれませんが、aタグのhref属性に指定できるリンク先の種類をメモとして残しておきます。




①絶対パス

httpsやhttpから始まる、URLをすべて記述したものです。

<a href="https://hoge.com/foo">絶対パス</a>





②相対パス

『./』や『/』やファイル名で始まる相対パスが一番種類が多いかもしれません。
現在のページがhttps://hoge.com/path1/path2/path3の時の遷移先をそれぞれコメントで示しています。

<!-- https://hoge.com/path1/path2/path3 -->

<a href="./foo">相対パス1</a>       <!-- https://hoge.com/path1/path2/foo -->
<a href="../bar">相対パス2</a>      <!-- https://hoge.com/path1/bar -->
<a href="../../fuga">相対パス3</a>  <!-- https://hoge.com/fuga -->
<a href="piyo.html">相対パス4</a>   <!-- https://hoge.com/path1/path2/piyo.html -->
<a href="foo">相対パス5</a>         <!-- https://hoge.com/path1/path2/foo -->
<a href="/hogera">相対パス6</a>     <!-- https://hoge.com/hogera -->





③メールリンク・電話リンク

『mailto:』や『tel:』で始まり、メーラーや電話発信画面が開きます。

<a href="mailto:info@hoge.com">メールリンク</a>     <!-- メーラーが開く -->
<a href="tel:000-1234-5678">000-1234-5678</a>      <!-- 電話発信画面が開く -->





connaiconnai

④フラグメント

『#』で始まる、または『URL+#文字列』の形があります。
ページ内アンカー、ページ外アンカーに使用されます。

<a href="#top">フラグメントのみ</a>                         <!-- ページ内アンカー -->
<a href="https://hoge.com#top">URLパス+フラグメント</a>    <!-- 主にページ外アンカー -->





⑤空・href属性なし

色んなサイトを見ていたら、下記のようにhref属性が空のものや、そもそもhref属性がないものもありました。
href空は自身のページに遷移、href属性なしの場合はどこにも遷移しないようです。

<a href="">href空</a>  <!-- 自身のページに飛ぶ -->
<a>href属性なし</a>     <!-- どこにも遷移しない -->





⑥javascript

hrefにはjavascriptも記述できるみたいです。href属性に『javascript:関数』と書けば関数を実行できるようです。
また、hrefに『javascript:voide(0)』と記述すると、どこにも遷移しないリンクができます。

<a href="javascript:alert('hrefでjs実行できるってよ')">javascript</a>   <!-- javascript実行 -->
<a href="javascript:voide(0)">javascript:voide(0)</a>                   <!-- 遷移しないリンク -->






⑦画像リンク

形式は絶対パスですが、hrefには画像リンクまでのパスが入っている事もあるようです。
クリックすると遷移して指定の画像が表示されます。

<a href="https://hoge.com/img/image01.png">画像リンク</a>    <!-- 遷移して指定の画像が表示される -->





⑧プロトコル省略

プロトコル(httpsやhttp)が省略されているパターンもあるようです。
絶対パスと同じように指定のURLに遷移します。

<a href="//hoge.com/foo">プロトコル省略</a>







以上、自分が把握しているaタグのhref属性に入るリンク先の種類の全てです。
参考になれば幸いです!

また、他にもありましたら、ご教示いただけると嬉しいです。

コメント

タイトルとURLをコピーしました