HTML では、 linkタグは自己終了要素であり、通常はドキュメントのheadセクションに配置されます。これは、スタイル シート、アイコンなどの外部リソースとの関連付けを確立するために使用されます。 linkタグには複数の属性がありますが、最もよく使用されるのはrelとhrefです。
rel属性は、現在のドキュメントとリンクされたリソースの間の関係を定義します。一般的なrel属性値は次のとおりです。
stylesheet : 外部 CSS スタイルシートへのリンクを表します。 icon : ファビコンなど、Web サイトにリンクされているアイコンを表します。 href属性は、リンクされたリソースの URL を指定するために使用されます。
典型的なlinkタグの例は次のとおりです。
<!DOCTYPE html> <html> <頭> <meta charset="UTF-8"> <title>私のウェブサイト</title> <!-- 外部 CSS スタイル シートへのリンク --> <リンク rel="スタイルシート" href="styles.css"> <!-- Web サイトのアイコンへのリンク --> <link rel="icon" href="favicon.ico"> </head> <本文> <h1>リンク!</h1> <p>これはリンクの紹介です。 </p> </body> </html>
この例では、2 つのlinkタグを使用します。最初のlinkタグは、HTML ドキュメントを、ページのスタイルを定義するために使用される外部 CSS スタイル シートstyles.cssに関連付けます。 2 番目のlinkタグは、HTML ドキュメントを Web サイトfavicon.icoに関連付けます。これは、ユーザーがブラウザーで Web サイトを開いたときに表示されます。
もちろん、 linkタグには他の属性や用途もあります。一般的な属性と使用例をいくつか示します。
type : この属性は、リンクされたリソースの MIME タイプを指定するために使用されます。たとえば、CSS スタイルシートにリンクする場合、そのタイプをtext/cssとして指定できます。ほとんどの場合、ブラウザーはリソースの種類を自動的に識別できるため、 type属性は必要ありません。例：
<link rel="stylesheet" href="styles.css" type="text/css">
media : この属性を使用すると、スタイル シートが適用されるメディア タイプを指定できます。たとえば、ユーザーがページを印刷するときに使用する印刷固有のスタイル シートを作成できます。例：
<link rel="stylesheet" href="print.css" media="print">
sizes : linkタグを使用して複数のサイズのアイコンにリンクする場合、 sizes属性を使用してアイコンのサイズを指定できます。これは、デバイスに応じてアイコンが異なるサイズで表示される場合に便利です。例：
<link rel="icon" href="icon-48x48.png" size="48x48"> <link rel="icon" href="icon-96x96.png" size="96x96">
crossorigin : クロスオリジン リソースにリンクする場合、 crossorigin属性を使用してリソースの CORS (Cross-Origin Resource Sharing) 設定を指定できます。例：
<link rel="stylesheet" href="https://link.com/styles.css"crossorigin="anonymous">
integrity : この属性は、外部リソースの整合性を保証するために使用され、 crossorigin属性と一緒に使用できます。リソースにコンテンツベースのハッシュ (SHA-256 など) を与えることで、リソースが改ざんされていないことを保証できます。例：
<link rel="stylesheet" href="https://link.com/styles.css"crossorigin="anonymous" integrity="sha256-base64-encoded-hash">
preload : rel="preload"使用すると、フォント、画像、スクリプトなどの重要なリソースを事前にロードできます。これにより、ページ読み込みパフォーマンスが最適化されます。例：
<link rel="preload" href="font.woff2" as="font" type="font/woff2"crossorigin>
これらは、 linkタグの一般的な属性と使用法です。
前述したものに加えて、 relさらに多くの属性値があります。
alternate : rel="alternate"を使用して、別の言語または別のデバイス用のページなど、ドキュメントの代替バージョンを提供します。例：
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="画面のみと (最大幅: 640px)" href="https://link.com/mobile/a">
dns-prefetch : rel="dns-prefetch"によってドメイン名を事前解決して、DNS ルックアップ時間を短縮し、リソースの読み込みを高速化できます。例：
<link rel="dns-prefetch" href="//link.com">
preconnect : dns-prefetchと同様に、 rel="preconnect"サードパーティのリソースへの TCP 接続を事前に確立でき、接続の確立に必要な時間を短縮できます。例：
<link rel="preconnect" href="https://link.com">
prefetch : rel="prefetch"を使用して、後続のページで使用するリソースをプリフェッチしてキャッシュします。これは、ページで使用される可能性のあるリソースをプリロードする場合に便利です。例：
<link rel="プリフェッチ" href="pre-page.html">
canonical : rel="canonical"を使用すると、検索エンジンにページの正規 URL を提供でき、重複コンテンツの問題を回避できます。例：
<link rel="canonical" href="https://link.com/a/post">
license : rel="license"を使用してドキュメントのライセンス URL を指定します。例：
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : rel="manifest"を使用して、Web アプリケーションのマニフェスト ファイル (通常は JSON 形式) を HTML ドキュメントにリンクします。マニフェスト ファイルには、名前、説明、アイコンなどの Web アプリケーションのメタデータが含まれています。例：
<link rel="manifest" href="manifest.json">
ブラウザーによって、これらのプロパティと機能のサポートの程度が異なる場合があることに注意してください。新しい機能を使用する場合は、互換性と機能性を確保するために関連ドキュメントを参照することをお勧めします。
HTML でのリンク タグ属性の具体的な使用法に関するこの記事はこれで終わりです。HTML リンク タグ属性の詳細については、downcodes.com で以前の記事を検索するか、引き続き以下の関連記事を参照してください。将来のダウンコード.com！