html linkラベル

HTMLのlinkタグについて

linkタグの定義と使用説明

HTMLの<link>タグは、外部リソースへのリンクを提供するために使用されます。一般的に、CSSファイルやアイコン、RSSフィードなどをHTMLドキュメントに指定するために使われます。このタグは、通常、<head>セクションの中で使用されます。

ブラウザのサポート状況

ほとんどの現代的なウェブブラウザは<link>タグをサポートしています。これは、統一されたウェブ標準として世界中で広く使用されているためです。

ブラウザ サポート状況
Google Chrome 完全サポート
Mozilla Firefox 完全サポート
Safari 完全サポート
Microsoft Edge 完全サポート
Opera 完全サポート

linkタグの属性

<link>タグには、いくつかの重要な属性があります。

  • href: リンク先のURLを指定します。
  • rel: リンク先と現在の文書の関係を指定します(例: stylesheet)。
  • type: リンク先のリソースの種類を指定します(例: text/css)。
  • media: リンク先のリソースが適用されるメディアタイプを指定します(例: screen)。

linkタグのイベント

通常、<link>タグにはイベントがありません。しかし、CSSファイルの読み込みが完了したことをJavaScriptで検出する場合などに、特定の方法で処理を追加することは可能です。

コード例

以下に、CSSファイルをリンクするための基本的な<link>タグの使用例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>
<body>
    <h1>こんにちは、世界!</h1>
</body>
</html>

QA

Q1: <link>タグはどこに配置するべきですか?

A1: <link>タグは通常、<head>セクション内に配置されます。

Q2: <link>タグのrel属性の例を教えてください。

A2: rel属性の一例としてstylesheetがあります。これは外部CSSファイルをリンクする時に使用されます。

Q3: 複数のCSSファイルをリンクすることは可能ですか?

A3: はい、複数の<link>タグを使って、複数のCSSファイルをリンクすることができます。