関連する他のファイルを示す

HTML

HTML入門

関連する他のファイルを示すときは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タイプ
テキスト.txttext/plain
HTML文書.htmまたは.htmltext/html
CSS.csstext/css
Word文書.docapplication/msword
PDF文書.pdfapplication/pdf
JPEG画像.jpgまたは.jpegimage/jpeg
png画像.pngimage/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>

HTML要素,ファイル

Posted by kiri