htmlタグにおけるlinkタグとaタグは全く別物!rel,href要素の使い方まとめ

HTMLa, href, html.タグ, link, rel, 使い方, 要素

スポンサーリンク

HTML5における重要なタグが「linkタグ」です。

これは、linkタグを記述する文書ファイル(≒htmlファイル)に関係する別の文書ファイルを指定して、呼び出す(定義する)ものになっています。

似たhtml要素に「aタグ」が存在しますが、こちらはlinkタグが<head>~</head>内に記述するのに対して、<body>~</body>内に記述して外部リンクを記述します。

そのため、両者を混同することが最初よくあったので、まとめておきます。

スポンサーリンク

<head>~</head>内で関連する文書の定義を記述する<link>タグの使い方と頻出な属性とは

全ての属性やその中身を覚える必要は全くありません。

以下、SEO対策をそれなりに行っている当サイトで使用している、<link>タグ一覧です。

※長いリンク指定は省略しています。

rel」と「href」属性が最重要

まず、href属性は指定する文書のURLを指定する属性です。

そしてrel属性は、href属性の指定先に置かれている文書ファイルとの関係を宣言しているものになります。

例えば当サイトの例(上記例)では、rel=”stylesheet”と指定してCSSファイルを呼び出していることを示しています。

# type要素は文書ファイルの形式を、media属性はどこに呼び出すファイルを出力するかを定義します。

ウェブサイトに必須のファビコン・アップルタッチアイコンを指定するrel属性の1つが「icon」「apple-touch-icon-precomposed

上記のように、rel属性にicon or apple-touch-icon-precomposedと指定することで、サイトのファビコン(アイコン)やスマホのホーム画面用のアップルタッチアイコンの画像ファイルを指定することが出来ます。

rel=”subresource“でcssファイルの遅延呼び出しを行っている

最後に、こちらはほとんどのサイトで行う必要は無いと思いますが、Googleがページの表示速度を検索エンジンの順位の要素に組み込んでいるため、当サイトでも高速化の施策は行っています。

rel属性にsubresourceと指定することにより、cssファイルを遅延して呼び出しています。

※当サイトで遅延呼び出しを行っているcssファイルは、アニメーションに関するcssです。

他にも様々な属性がありますが、正直全部覚える必要は無く必要に応じて調べればいいです。

スポンサーリンク

HTMLa, href, html.タグ, link, rel, 使い方, 要素

Posted by 管理人