関連する他のファイルを示す
関連する他のファイルを示すときはlink要素を使う
/*関連する他のファイルを示す記述*/
<link rel="関連ファイルの種類" href="URL">
<link rel="icon" href="URL" sizes="サイズ" type="MIMEタイプ">
関連する他のファイルを示すとき、link要素を使います。link要素を使うと、この文書と関連している別の文書やファイルの所在を示すことができます。
たとえば、前のページや次のページ、目次のページ、外国語バージョンのページ、サイトのアイコン、スタイルシートを記述したファイルなどのURLを示すために使われます。なお、スタイルシートを読み込む方法についてはCSSの知識も必要です。
rel属性に指定できる値については、以下の「関連ファイルの種類を表すキーワード」を参考にして下さい。sizes属性はアイコンのサイズを指定するために専用属性で、「32×32」や「512×512」のように「幅×高さ」の書式でピクセル数を指定します。
関連ファイルの種類を表すキーワード
キーワード | 関連ファイルの種類 |
---|---|
prev | 連続している文書における「前の文書」 |
next | 連続している文書における「次の文書」 |
alternate | 現在の文書の代わりになる文書(例:翻訳版) |
author | 現在の文書や記事の執筆者に関する情報 |
licence | メインコンテンツの著作権ライセンスに関する情報 |
help | 状況に応じたヘルプ |
search | 現在の文書とその関連ページを検索可能なリソース |
icon | 現在の文書のアイコンとして使用する画像ファイル |
stylesheet | 読み込んで適用するスタイルシート |
MIMEタイプ
PCで文書を作成したとき、文書の名前の後ろに「.doc」などの拡張子が付きます。データの形式を区別するのが拡張子ですが、ウェブの世界では拡張子のほかに、「MIMEタイプ」というものが使われています。
MIMEタイプとは「タイプ名/サブタイプ名」という形式の文字列でファイルを指定するものです。このMIMEタイプは、ウェブのサーバーとブラウザの間で使われており、たとえばMIMEタイプには以下のようなものがあります。
ファイル形式 | 拡張子 | MIMEタイプ |
---|---|---|
テキスト | .txt | text/plain |
HTML文書 | .htmまたは.html | text/html |
CSS | .css | text/css |
Word文書 | .doc | application/msword |
PDF文書 | application/pdf | |
JPEG画像 | .jpgまたは.jpeg | image/jpeg |
png画像 | .png | image/png |
link要素を使った例です。6~9行目で使っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>link要素を使った例</title>
<link rel="previous" href="example1.html">
<link rel="next" href="example3.html">
<link rel="icon" href="logofavicon.png" sizes="16x16" type="image/png">
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>