メインコンテンツへスキップ

メタデータコンテンツ

1.メタデータ関連の要素

HTML文書の
付加的な情報を表す
メタデータコンテンツを
まとめました。

HTMLには、付加的な情報を表す要素があります。それらをメタデータコンテンツと言います。メタデータコンテンツ(Metadata content.)は、類似した特性を持つ要素をグループ化したカテゴリ(Category)の１つです。

メタデータに関わる要素は、以下の各要素です。

  • メタデータコンテンツを含む為の要素
    • head要素 : メタデータを含む(囲む, まとめる)
  • メタデータコンテンツ

2.HTML文書のメタデータ

メタデータは、
ページに関する
情報の事です。

メタデータ は、あるデータが付随して持つそのデータ自身についての付加的なデータの事です。HTML文書で言うと、「文書の内容を記したデータ」についての付加的なデータの事です。主な付加的情報は、文書に関する機械可読な情報です。文書の題名(title要素)など直接的には文書の表示などには関係ありませんが、ブラウザなどに渡す情報なので間接的に見た目にも関わります。(スタイルシートのリンクなどで、スタイルシートが有効になり描画が変わります。)

「残りの 内容 ( コンテンツ ) の 表示 ( プレゼンテーション ) または 動作 ( ビヘイビア ) を 設定 ( セットアップ ) する」、または「 文書 ( ドキュメント ) と他の 文書 ( ドキュメント ) との 関係 ( リレーションシップ ) を 設定 ( セットアップ ) する」、または「他の『 帯域外 ( アウトオブバンド ) 』 情報 ( インフォメーション ) を 伝達 ( コンベイ ) する」コンテンツの 分類 ( カテゴリ ) を、 メタデータコンテンツ ( Metadata content ) といいます。無理して日本語で造語すると、 付加的 ( メタ ) な 情報 ( データ ) である 内容 ( コンテンツ ) となるかと思います。

要素
メタ
フロー
フレー
埋込
区分化
見出し
起源
対話型
メタ
メタデータコンテンツ
スク
スクリプトをサポートする要素
フロー
フローコンテンツ
区分化
セクショニングコンテンツ
起源
セクショニングルート(廃止)
見出し
ヘディングコンテンツ
フレー
フレージングコンテンツ
埋込
エンベデッドコンテンツ
対話型
インタラクティブコンテンツ
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
meta 空要素 〇 ※ ※ － － － － － －
title エスケープ 〇 － － － － － － － －
base 空要素 〇 － － － － － － － －
link 空要素 〇 ※ ※ － － － － － －
style 生テキスト要素 〇 － － － － － － － －
script 生テキスト要素 〇 〇 〇 － － － － － 〇
noscript 通常要素 〇 〇 〇 － － － － － －
template 雛型要素 〇 〇 〇 － － － － － 〇

3.メタデータの要素の配置

メタデータは、
主に head要素の
コンテンツとして
配置できます。

メタデータコンテンツをコンテンツの一部として配置できる要素は、head要素です。noscript要素はhead要素の子である場合に、link要素, style要素, meta要素を配置できます。

メタデータコンテンツに分類される要素で、他のカテゴリにも分類されるものもあります。その場合はそのカテゴリとして配置できる要素が存在します。

詳細は、各要素の説明のページで確認して下さい。

document
html
head
body
メタ
noscript
link
style
meta
link
meta
script
noscript
template

「メタ」は、メタデータコンテンツです。

link要素, meta要素は、条件付きでフレージングコンテンツでもあります。

script要素, noscript要素, template要素は、フレージングコンテンツでもあります。

4.スクリプトをサポートする要素

スクリプトをサポートする要素 は、
スクリプトをサポートする為の
要素の
カテゴリです。

それ自体は何も表さない (つまり、レンダリングされない) 要素ですが、スクリプトをサポートする為に使用される要素があります。それらをスクリプトをサポートする要素と言います。スクリプトをサポートする要素(Script-supporting elements.)は、類似した特性を持つ要素をグループ化したカテゴリ(Category)の１つです。

スクリプトをサポートする要素に分類される要素は、以下の各要素です。

上記のスクリプトをサポートする要素に分類される要素は、いずれもメタデータコンテンツ, フレージングコンテンツ, フローコンテンツでもあります。

スクリプトをサポートする要素をコンテンツの一部として配置できる要素は、以下の各要素です。

5.メタデータの雛型

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. ここに文章を書く
  9. </body>
  10. </html

charset属性のあるmeta要素で文字エンコーディングを宣言して、title要素で文書の題名を定義すれば良いと思います。 無難な雛型です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. <base href="http://risyu.in.coocan.jp/Html/" target="_self">
  7. <meta name="viewport" content="width=device-width,initial-scale=1">
  8. <script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  9. <script src="./risyu.js"></script>
  10. <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css"
    integrity="sha384-jTFzRHnGayPcZHkUx5hTuWbygQevlGFimHdpRHicjyJXGyyjcioudSScb7/YN0PE" crossorigin="anonymous">
  11. <link rel="stylesheet" href="./risyu.css">
  12. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  13. </head>
  14. <body>
  15. ここに文章を書く
  16. </body>
  17. </html

７行目は、筆者(わたし)としてはビューポートのサイズを制御するおまじないです。 まだ理解できていません。 ８行目は jquery 10行目は normalize.css (CSSリセット) の例示です。

  1. <!DOCTYPE html>
  2. <html lang="ja"><head><meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <meta name="viewport" content="width=device-width,initial-scale=1">
  5. <script src="./risyu.js"></script>
  6. <link rel="stylesheet" href="./risyu.css">
  7. </head>
  8. <body>
  9. ここに文章を書く
  10. </body>
  11. </html

１行目は、文書型宣言だけです。１行目を文書型宣言と認識するユーザーエージェントがあったので、おまじないで１行目は文書型宣言だけです。
２行目は、html要素の開始タグとhead要素の開始タグとmeta要素の開始タグです。html要素の開始タグには、lang属性で要素の言語を設定します。meta要素の開始タグには、charset属性で文字エンコーディングを設定します。head要素の開始タグは、特に属性の指定はないですが記述の判り易さの為に、タグの省略はしません。
３行目は、title要素です。文書の題名は個々に変わるので、別の行にしています。またここまでは、早めにユーザーエージェントに提示したい情報です。
４行目は、ビューポートのサイズを制御する為にmeta要素を記述します。
５行目は、スクリプトを記述する為にscript要素を記述します。
６行目は、スタイルシートの読み込みを記述する為にlink要素を記述します。スクリプトやスタイルシートの記述順は、内容次第です。出来ればHTML文書での記述順は影響しない様にスクリプトやスタイルシートを記述しましょう。
手書きで書き足す, 書き換える事を意識した雛型です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. <base href="http://risyu.in.coocan.jp/Html/" target="_self">
  7. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  8. <style>
  9. body { color: #000000; }
  10. </style>
  11. <script>
  12. document.addEventListener("DOMContentLoaded", function() {}
  13. if ("content" in document.createElement( "template" ) ) {
  14. var leHtmlTemplate = document.getElementById( "itpJs0101" );
  15. var leHtmlClone = document.importNode leHtmlTemplate.content, true);
  16. document.getElementById( "idvJs0101" ).appendChild( leHtmlClone );
  17. }
  18. }
  19. </script>
  20. <template id="itpJs0101">
  21. <div>ひながた</div>
  22. </template>
  23. </head>
  24. <body>
  25. ここに文章を書く
  26. <div id="idvJs0101">
  27. <noscript>
  28. スクリプトが無効です。
  29. </noscript>
  30. </div>
  31. </body>
  32. </html

この例は、メタデータコンテンツの記述例として詰め込んだものです。詳細は、個々の要素のページをご覧ください。

6.Pugのサンプル

Pugでの
サンプルです。

著者(わたし)のPugを使う理由が、スタイルシートを使うにあたってのクラス属性の管理の為だったので このメタデータに関する処では関係なかったのですが メタデータの json ファイルによる管理という点で使えるかもという事で記述してみました。

  1. {
  2. "common" : {
  3. "doctype" : "HTML5",
  4. "charset" : "UTF-8",
  5. "lang" : "ja",
  6. "script" : ["./script.js"],
  7. "stylesheet" : ["./stylesheet.css"],
  8. "favicon" : "./favicon.ico"
  9. }
  10. }
  1. block tpvariable
  2. block tpmeta
  3. case common.doctype
  4. when 'HTML4.01 Transitional'
  5. doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
  6. when 'HTML4.01 Frameset'
  7. doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
  8. when 'HTML4.01 Strict'
  9. doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
  10. when 'HTML3.2'
  11. doctype HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"
  12. when 'none'
  13. - break
  14. default
  15. doctype html
  16. html(lang=common.lang)
  17. head
  18. if common.doctype == 'HTML4.01 Transitional' || common.doctype == 'HTML4.01 Frameset' || common.doctype == 'HTML4.01 Strict'
  19. meta(http-equiv="content-type" content="text/html; charset="+common.charset)
  20. else
  21. meta(charset=common.charset)
  22. title #{page.title}
  23. meta(name="viewport" content="width=device-width,initial-scale=1")
  24. meta(name="description" content=page.description)
  25. meta(name="author" content=page.author)
  26. meta(name="build" content=page.build)
  27. meta(name="date" content=page.date)
  28. if common.script.length > 0
  29. each _lsScript in common.script
  30. script(src=_lsScript)
  31. if page.googlefonts
  32. link(rel="dns-prefetch" href="https://fonts.googleapis.com")
  33. link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
  34. link(rel="stylesheet")&attributes({href : "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Dancing+Script&display=swap"})
  35. if common.stylesheet.length > 0
  36. each _lsStylesheet in common.stylesheet
  37. link(rel="stylesheet" href=_lsStylesheet)
  38. if common.favicon
  39. link(rel="icon" href=common.favicon type="image/vnd.microsoft.icon")
  40. block tpstyle
  41. block tpscript
  42. if common.doctype == 'HTML4.01 Frameset'
  43. block tpframeset
  44. else
  45. block tpbody
  1. extends ./_template
  2. block prepend tpvariable
  3. -
  4. const page = {
  5. title : 'タイトル',
  6. description : '説明',
  7. author : '著者名',
  8. build : '2023-12-24',
  9. date : '2023-12-31',
  10. googlefonts : true,
  11. };
  12. block prepend tpbody
  13. body
  14. | さんぷる
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>タイトル</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1">
  7. <meta name="description" content="説明">
  8. <meta name="author" content="著者名">
  9. <meta name="build" content="2023-12-24">
  10. <meta name="date" content="2023-12-31">
  11. <script src="./script.js"></script>
  12. <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  13. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Dancing+Script&display=swap">
  15. <link rel="stylesheet" href="./stylesheet.css">
  16. <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
  17. </head>
  18. <body>さんぷる</body>
  19. </html>

とりあえずのサンプルというか雛型です。 見た目のサンプルという事で、自分の命名規則なども外しています。

7.付記