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

07/16/2018

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タイプ
テキスト .txt text/plain
HTML文書 .htmまたは.html text/html
CSS .css text/css
Word文書 .doc application/msword
PDF文書 .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>

Posted by kiri