HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素

Database concept: magnifying optical glass with Database With Cloud icon on digital background

HTML5 【 カテゴリ 】 ~ 7つのカテゴリでも紹介しましたが、HTML5の特徴の1つである7つのカテゴリの中に「メタデータ・コンテンツ」があります。ブラウザの表示と直接関係がないため、なかなか理解を深める機会がないメタデータ・コンテンツについて、少し詳しく見ていきたいと思います。

目次

1.メタデータ・コンテンツとは
2.メタデータ・コンテンツの一覧
3.base要素とは
4.base要素のtarget属性

1.メタデータ・コンテンツとは

メタデータ・コンテンツ とは、HTML文書の情報を指定する要素群です。
<title> <base> <link> <style> <meta> <script> <noscript> があります。
ほとんどのメタデータ・コンテンツは<head>~</head>に書き、ブラウザでは表示されません。
しかし、メタデータ・コンテンツをきちんと書かないと、外部CSSのリンク切れで想定通り表示できなくなったり、Javascriptが作動しなくなるなど、様々な不具合の原因になってしまいます。

▲目次へ戻る

2.メタデータ・コンテンツの一覧

要素 概要
title ●HTML文書のタイトルを示す
●SEO的には、<h1>よりも上位の重要性を持つ
●ブラウザのブックマークやヒストリーにも表示される
●1つのHTMLファイルに1つだけ記述する
base ●そのHTMLファイルの相対URLのベースとなる絶対URLを指定する
link ●外部ファイル(CSSファイルなど)を読み込ませる
style ●CSSをHTMLファイルに直接書く
script ●外部スクリプト(Javascriptなど)を読み込ませる
noscript ●ブラウザが<script>をOFFにしているとき、代替コンテンツを表示する
meta ●上記の要素で指定できないものを担当する

▲目次へ戻る

3.base要素とは

title要素は馴染みがあると思いますので(馴染みのない方は初心者のためのHTML入門1 ~ HTMLの基本をおさえて実際に書いてみよう 2.2 タイトルをご参照下さい)、メタデータコンテンツのtitle要素以外の要素を1つずつ見て行きたいと思います。
まずはbase要素です。

base要素は、そのHTMLファイルのベースになる絶対URLをブラウザに指定する要素です。(そのHTML自身の絶対URLではなく、ベースになる絶対URLです。)
HTML内で 相対URLを使う場合の起点を定める重要な要素です。

また、base要素にtarget属性を使ってターゲットを指定(ウィンドウ、タブ、フレームなどを指定)すれば、そのHTML内のリンクはすべて指定先で表示されます。

要素 base
属性 href、target
注意点 ●<base>は必ず<head>内に1つだけ書きます(複数書いても最初の1個目しか読み取られません)。
●終了タグは無く、属性はhref属性かtarget属性のみで、少なくとも1つは属性を書きます。

実際には次のように書きます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”Shift_JIS”>
<title>タイトル</title>
<link rel=”stylesheet” href=”column.css” type=”text/css” />
<base href=”http://www.test.com/index.html”>
<link rel=”stylesheet” href=”default.css” type=”text/css” />
</head>
<body>
<a href=”category/profile.html”>プロフィール</a>
</body>
</html>

<base href=”http://www.test.com/index.html”>の部分が<base>の書き方です。
ベースとなるページ(通常、トップページ)の絶対URLが「http://www.test.com/index.html」の場合に、上記の書き方になります。

上記ファイルのURLが、仮に「http://www.test.com/column/index.html」(トップページがある階層の「column」ディレクトリの中の、index.htmlという名前のファイル)だとします。
そうすると、<body>内のリンク「a href=”category/profile.html”」の絶対URLは、上記ファイルからのパスではなく、<base>のURLからのパスになるので、「http://www.test.com/category/profile.html」になります。

また、<head>内に <link>要素を使って、CSSの外部ファイルを読み込んでいます(「column.css」と「default.css」です)。
「column.css」は<base>の前なので<base>の影響を受けません。
このHTML自身からのパスになり、「http://www.test.com/column/column.css」を指しています。
「default.css」は<base>の後に書いているので<base>の影響を受けます。
このCSSの絶対URLは「http://www.test.com/default.css」です。

このように、<base>の位置で関連ファイルの絶対URLが変わってくるため、特別な事情がない限り、<base>は<head>内の他のリンクが始まる前に書いておくのが良いです。

▲目次へ戻る

4.base要素のtarget属性

base要素でtarget属性を指定すると、そのHTMLファイル内のリンクは、指定されたターゲットに表示されます。
HTMLファイル内のリンクに改めてtarget属性を指定をし直すと、base要素のtarget 属性は上書きされて、そのリンクで指定されたターゲットに表示されます。

そもそも、target属性は、リンクを表示するブラウザのウィンドウやタブやフレーム(全部合わせて「ブラウジング・コンテキスト」と言います)を指定するための属性です。例えばa要素で使う時は、次のように書きます。

<a href=”category/profile.html” target=”_blank”>リンク</a>

値に「_blank」というキーワードを使っています。これは、別ウィンドウ(タブ、フレーム)を開いてそこに表示するという内容です。キーワードは他に「_self」「_parent」「_top」があります。

値が「_self」「_parent」「_top」なら、今表示されている場所にリンクファイルも表示されます。
「_blank」なら、新しいウィンドウ(またはタブ)を開いてそこに表示します。ウィンドウかタブかは、ユーザのブラウザの設定によります。
target属性の値にはこの他に「任意の名前」も使えます。インラインフレームなどに任意の名前をつけておいて、その中にリンクを開きます。

target属性の値 概要
_self
( target属性の keyword)
デフォルト値
今、自分自身が表示されているウィンドウ(またはタブ)に、リンクファイルも表示する
_blank
( target属性の keyword)
別ウィンドウ(またはタブ)を開いて、そこにリンクファイルを表示する
_parent
( target属性の keyword)
親ウィンドウに表示する
自分がフレームの中に表示されている場合、リンクファイルをフレームの1つ外(1つ上)の親ウィンドウに表示する
_top
( target属性の keyword)
自分がどこにいても、フレームを全部解除したいちばん上の階層にリンクファイルを表示する
任意の名前
(browsing context name)
例えばインラインフレームに name属性で付けた名前を targetで指定すると、そのインラインフレームにリンクファイルを表示する
名前の冒頭に「_(アンダースコア)」はしようできない

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です