トップ > スキル : Web > HTML5

Web

各要素のリファレンス1

ルート関連要素

html要素(ルート要素)

カテゴリ なし
コンテンツモデル head要素が最初で、body要素を次に入れる。
利用可能な場所 ドキュメントのルート要素として利用
開始タグ html要素の最初がコメントでなければ省略可能
終了タグ html要素の直後がコメントでなければ省略可能
要素固有のコンテンツ属性 Manifest
デフォルトスタイル html{
    display:block;
}

html要素はHTMLドキュメントのルートを表し、すべてのHTMLデータはhtml要素の中に入れる必要があります。通常、html要素にグローバル属性のlangコンテンツ属性を指定して、そのドキュメントの言語を表します。

この要素にはmanifestコンテンツ属性が規定されています。この属性には、ドキュメントのアプリケーション・キャッシュ・マニフェストのアドレス(オフライン・コンテンツのキャッシュ制御に使う)を指定します。

■利用例
  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <title>タイトル</title>
  </head>
  <body>
  <h1>ページの見出し</h1>
  </body>
  </html>
    

メタデータ関連要素

head要素(ドキュメントのメタデータ)

カテゴリ なし
コンテンツモデル Iframe要素のsrcdocコンテンツ属性に指定されたドキュメントで使う場合は、0個以上のメタデータ・コンテンツに属する要素。 そうでなければ、1個以上のメタデータ・コンテンツで、そのうち1つはtitle要素でなければならない。
利用可能な場所 htmlの中の最初の要素
開始タグ head要素の中が要素で始まるのであれば省略可能
終了タグ head要素の直後がスペース文字やコメントでなければ省略可能
要素固有のコンテンツ属性 なし
デフォルトスタイル head{
    display:none;
}

head要素は、ドキュメントのメタデータを格納します。この要素の中にはtitle要素が必須となり、その他にはmeta要素、base要素、link要素、script要素を入れることができます。

■利用例
  <!DOCTYPE html>
  <html lang="ja">
      <head>
  	<meta charset="urf-8" />
	<base href="http://www.Sample.com" />
	<title>タイトル</title>
	<link rel="stylesheet" href="base.css" type="text/css" />
	<script src="roll.js" type="text/javascript"></script>
	<meta name="Description" content="サイトの説明" />
      </head>
  <body>
  ・・・
    

title要素(ドキュメントのタイトル)

カテゴリ メタデータ・コンテンツ
コンテンツモデル テキスト
利用可能な場所 head要素の中。但し、2つ以上入れることはできない。
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル title{
    display:none;
}

title要素は、ドキュメントのタイトルを表し、ドキュメントに1つしか指定できません。通常、ブラウザのウィドウのタイトルバーに内容が表示されます。タブ・ブラウザの場合は、各タブのタイトルとして表示もされます。

title要素の中にはテキストしか入れることができません。また、この内容は、ブックマークや検索エンジンの検索結果などでも使われます。

base要素(基準URL)

カテゴリ メタデータ・コンテンツ
コンテンツモデル
利用可能な場所 head要素の中。但し、2つ以上入れることはできない。
開始タグ 必須
終了タグ 禁止
要素固有のコンテンツ属性 href(ドキュメントの基準となるURLを指定)
target(ハイパーリンク先のブラウジング・コンテンツの名前やキーワードを指定)
デフォルトスタイル base{
    display:none;
}

base要素は、該当のドキュメントの基準となるURLを表し、head要素の中に入れます。ブラウザは、base要素を読み込むと、それ以降に現れる相対URLのハイパーリンクに作用します。base要素を使う場合は、hrefコンテンツ属性またはtargetコンテンツ属性の少なくとも一方を入れなければなりません。

◆ hrefコンテンツ属性

base要素のhrefコンテンツ属性に指定されたURLは、そのドキュメントのハイパーリンクの基準URLとなります。もし、ドキュメント内に相対パスのURLが存在すれば、base要素のhrefコンテンツ属性に指定されたURLを基準としたURLに置き換えられてブラウザに解釈されます。

■利用例
  <!DOCTYPE html>
  <html lang="ja">
     <head>
	<meta charset="urf-8" />
	<title>タイトル</title>
	<link rel="stylesheet" href="base1.css" type="text/css" />
	<base href="http://sample.com/index.html" />
	<link rel="stylesheet" href="base2.css" type="text/css" />
     </head>
  <body>
  ・・・
  	<a href="page2.html">ページ2へ</a>
	<a href="http://www.domdom.html/b/index.html">DOMDOMサイト</a>
    

利用例で説明します。このWebページのURLが「http://sample.com/dir/index.html」であるとします。
上から最初のlink要素で指定された"base1.css"は、base要素より前に記述されているので、base要素の基準の影響は受けません。よって、このURLは「http://sample.com/dir/base1.css」とブラウザは解釈します。
次のlink要素で指定されている"base2.css"は、base要素の後に記述されているので、base要素の基準URLに作用します。よって、このURLは「http://sample.com/base2.css」と解釈されます。
body要素内の1つ目のハイパーリンクとなる"page2.html"は、base要素の影響を受けるのでURLは「http://sample.com/page2.html」と解釈されますが、2つ目のハイパーリンクは「http://」からリンク指定されているので、このリンクはbase要素の影響は受けません。


◆ targetコンテンツ属性

base要素にtargetコンテンツ属性がセットされていれば、そのドキュメントのハイパーリンクをたどると、指定のブラウジング・コンテキストにリンク先のページが表示されることになります。targetコンテンツ属性に指定できる値は以下の通りです。

説明
_self 現在のブラウジング・コンテキストを表します。初期設定
_parent 現在のブラウジング・コンテキストに親があれば、その親のブラウジング・コンテキストがリンク先となります。
_top トップレベルのブラウジング・コンテキストがリンク先となります。
_blank 新たなブラウジング・コンテキストが用意され、そのコンテキストがリンク先となります。
独自の名前 もし指定の値のブラウジング・コンテキスト名となるコンテキストがあれば、そのブラウジング・コンテキストがリンク先の表示先となります。名前は1文字以上で、アンダースコアで始まる名前は付けられません。

link要素(ドキュメントの関連性)

カテゴリ メタデータ・コンテンツ
コンテンツモデル
利用可能な場所 メタデータ・コンテンツが期待される場所
開始タグ 必須
終了タグ 禁止
要素固有のコンテンツ属性 href(関連リソースのURLを指定)
rel(ドキュメントと関連ソースとの間の関係を表すキーワード)
media(関連リソースが対象とするメディアを表すキーワード)
hreflang(関連リソースの言語コードを指定)
type(関連リソースのMIMEタイプを指定)
sizes(アイコンのサイズを指定)
デフォルトスタイル link{
    display:none;
}

link要素は、hrefコンテンツ属性を使って、該当のドキュメントを別のリソースと関連付けます。そのリソースのタイプをrelコンテンツ属性で指定し、MIMEタイプをtypeコンテンツ属性を使って指定します。

◆ relコンテンツ属性

relコンテンツ属性には、たくさんのタイプが規定されていてます。代表的な利用例は以下の通りです。

■利用例
  <link rel="index" href="/sitemap.html" title="索引" />
  <link rel="search" href="/search.html" title="検索" />
  <link rel="help" href="/help.html" title="ヘルプ" />
  <link rel="first" href="/story1.html" title="最初" />
  <link rel="prev" href="/story3.html" title="前へ" />
  <link rel="next" href="/story5.html" title="後へ" />
  <link rel="last" href="/story8.html" title="最後" />
  <link rel="up" href="/index.html" title="親階層" />
  <link rel="author" href="/profile.html" title="作成者" />
    

link要素のrelコンテンツ属性を使って関連ドキュメントをマークアップすることで、これらに対応したブラウザでユーザビリティを向上させることができます。


◆ hreflangコンテンツ属性

hreflangコンテンツ属性は、relコンテンツ属性に"alternate"をセットした上で、言語コードを指定します。日本語のページだけではなく、英語のページも用意されているのなら、次のようにマークアップします。

■利用例
  <link rel="alternate" href="/en/index.html" hreflang="en" title="English" />
    

◆ mediaコンテンツ属性

mediaコンテンツ属性は、relコンテンツ属性にセットされた値によって意味が異なります。

■relコンテンツ属性に"alternate"がセットされた場合

href属性は、mediaコンテンツ属性に指定されたメディア向けに用意された該当のドキュメントの代替ページのリンクを表します。

  <link rel="alternate" media="print" href="item.pdf" title="印刷用" />
  <link rel="alternate" media="tv" href="item_tv.html" title="TV用" />
    
■relコンテンツ属性に"stylesheet"がセットされた場合

href属性は、mediaコンテンツ属性に指定されたメディア向けに適用すべきスタイルシートのリンクを表します。

  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    

◆ sizesコンテンツ属性

sizesコンテンツ属性は、relコンテンツ属性に"icon"がセットされている場合にのみ利用可能で、アイコンのサイズを指定します。アイコンサイズは、横幅と縦幅のピクセルを小文字のxでつなげた文字列で表します。

■利用例
  <link rel="icon" href="favicon.png" type="image/png" sizes="16x16" />
    

【各要素のリファレンス1】