【HTML Living Standard】link要素の使い方
link要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
linkオブジェクトは、現在のHTMLドキュメントと外部リソースとの関連性を定義するオブジェクトです。これは主に、ウェブページのデザインを制御するスタイルシート(CSS)ファイルを読み込むために使用されます。例えば、<link rel="stylesheet" href="style.css">のように記述することで、外部のCSSファイルを現在のHTMLドキュメントに適用し、ウェブページの見た目を統一的に管理できます。
この要素は通常、HTMLドキュメントの<head>要素内に配置され、ブラウザがページをレンダリングする前に必要な外部リソースを事前に読み込む役割を果たします。スタイルシート以外にも、ウェブサイトのタブやブックマークに表示されるファビコン(サイトアイコン)を指定するためにも利用されます(例: <link rel="icon" href="favicon.ico">)。
link要素の重要な属性には、関連性の種類を指定するrel属性と、外部リソースのURLを指定するhref属性があります。他にも、リソースのMIMEタイプを指定するtype属性や、特定のメディア(画面サイズなど)にのみ適用するかどうかを制御するmedia属性など、用途に応じた様々な属性が存在します。
また、ウェブパフォーマンスの最適化にも貢献し、リソースのプリロード(例: <link rel="preload">)やプリフェッチ(例: <link rel="prefetch">)といった高度な機能を通じて、ユーザーエクスペリエンスの向上にも役立てることができます。このように、linkオブジェクトは、ウェブページの見た目、機能、そしてパフォーマンスを外部ファイルと連携させるための基盤となる、非常に重要なHTML要素です。
構文(syntax)
1<link rel="stylesheet" href="style.css">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません