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

meta要素

1.仕様

META要素は、
他のメタ関連要素で
表すことができない
任意のメタデータを
表します。

meta

一般的なメタ情報 (generic metainformation)

種類
空要素

任意のコンテンツを持つことができない要素です。

カテゴリ
  • メタデータコンテンツ
  • フローコンテンツ(条件付き)
  • フレージングコンテンツ(条件付き)

itemprop属性が存在する場合は、フローコンテンツ, フレージングコンテンツ。

使用できるコンテキスト
  • head要素に 0個以上
  • head要素の子であるnoscript要素に 0個以上
  • メタデータコンテンツを受け入れる要素
  • フレージングコンテンツを受け入れる要素

head要素に 0個以上を そのコンテンツとして、使用できます。
head要素の子であるnoscript要素に 0個以上を そのコンテンツとして、使用できます。
メタデータコンテンツを受け入れる要素のコンテンツとして、使用できます。
フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

メタデータコンテンツを受け入れる要素は、head要素 です。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

charset 属性が存在する場合、または要素の http-equiv 属性が Encoding 宣言状態にある場合は、head 要素内。

http-equiv 属性が存在するが、Encoding 宣言状態にない場合は、head 要素内。

http-equiv 属性が存在するが Encoding 宣言状態にない場合は、head 要素の子である noscript 要素内。

name 属性が存在する場合は、メタデータのコンテンツが期待される場所。

itemprop 属性が存在する場合は、メタデータ コンテンツが期待される場所。

itemprop 属性が存在する場合は、フレージングコンテンツが期待される場所。

コンテンツモデル
何もない

要素のコンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。

タグの省略

終了タグはありません。

コンテンツ属性
グローバル属性 他
name属性
メタデータ名
http-equiv属性
プラグマディレクティブ
content属性
要素の値
charset属性
文字エンコーディング
media属性
対応メディア

scheme属性がありましたが、廃止されました。フィールドごとに 1 つのスキームのみを使用するか、スキーム宣言を値の一部にしてください。

DOM インターフェイス
HTMLMetaElement
  1. [Exposed=Window]
  2. interface HTMLMetaElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString name;
  6. [CEReactions] attribute DOMString httpEquiv;
  7. [CEReactions] attribute DOMString content;
  8. [CEReactions] attribute DOMString media;
  9.  
  10. // also has obsolete members
  11. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング
ボックスを生成しない
非表示の要素
  1. meta {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫はボックスやテキストシーケンスを生成しません。 などになります。

説明
meta要素は、他のメタ関連要素で表す事が出来ない任意のメタデータを表します。

meta要素は、name属性を持つドキュメントレベルのメタデータ、http-equiv属性を持つプラグマディレクティブ、およびcharset属性を使用して HTML文書が文字列形式にシリアル化されたときのファイルの文字エンコーディング宣言、を表す事が出来ます。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>meta要素の例 - (Example of meta element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>meta要素の例</h1>
  9. <p>この例の meta要素は、文書で使用される文字エンコーディングを utf-8 と指定しています。</p>
  10. </body>
  11. </html>

このサンプルへのリンクです。
(./exmeta.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "meta": {
  3. "check": "2024-09-01",
  4. "group": "Metadata",
  5. "element": "- X EMPTY -- generic metainformation. (Void elements.) [Metadata|FlowLimited|PhrasingLimited] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "http-equiv": "NAME #IMPLIED -- HTTP response header name --",
  9. "name": "NAME #IMPLIED -- metainformation name --",
  10. "content": "CDATA #REQUIRED -- associated information --",
  11. "charset": "CDATA #IMPLIED -- Character encoding declaration --",
  12. "media": "%MediaDesc; #IMPLIED -- Applicable media --",
  13. },
  14. "comment": "一般的なメタ情報 (generic metainformation)",
  15. "point": "他のメタ関連要素で表す事が出来ない任意のメタデータを表します。",
  16. "description": "name属性を持つドキュメントレベルのメタデータ、http-equiv属性を持つプラグマディレクティブ、およびcharset属性を使用して HTML文書が文字列形式にシリアル化されたときのファイルの文字エンコーディング宣言、を表す事が出来ます。",
  17. "kind": "Void",
  18. "categories": [
  19. "Metadata",
  20. "FlowLimited",
  21. "PhrasingLimited",
  22. ],
  23. "categoriessupplement": "itemprop属性が存在する場合は、フローコンテンツ, フレージングコンテンツ。",
  24. "used": [
  25. "HEAD (META)*",
  26. "HEAD NOSCRIPT (META)*",
  27. "parent (%Metadata)*",
  28. "parent (%Phrasing)*",
  29. ],
  30. "usedsupplement": [
  31. "charset 属性が存在する場合、または要素の http-equiv 属性が Encoding 宣言状態にある場合は、head 要素内。",
  32. "http-equiv 属性が存在するが、Encoding 宣言状態にない場合は、head 要素内。",
  33. "http-equiv 属性が存在するが Encoding 宣言状態にない場合は、head 要素の子である noscript 要素内。",
  34. "name 属性が存在する場合は、メタデータのコンテンツが期待される場所。",
  35. "itemprop 属性が存在する場合は、メタデータ コンテンツが期待される場所。",
  36. "itemprop 属性が存在する場合は、フレージングコンテンツが期待される場所。",
  37. ],
  38. "contentmodel": "%Nothing",
  39. "tag": [
  40. "-",
  41. "X",
  42. ],
  43. "attributes": {
  44. "name": "メタデータ名",
  45. "http-equiv": "プラグマディレクティブ",
  46. "content": "要素の値",
  47. "charset": "文字エンコーディング",
  48. "media": "対応メディア",
  49. },
  50. "attributessupplement": [
  51. "scheme属性がありましたが、廃止されました。フィールドごとに 1 つのスキームのみを使用するか、スキーム宣言を値の一部にしてください。",
  52. ],
  53. "dominterface": "HTMLMetaElement",
  54. "rendering": "Hidden",
  55. "reference": [
  56. {
  57. "title": "HTML Living Standard. 4.2.5 The meta element.",
  58. "href": "https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element",
  59. "heading": "HTML Living Standard. 4.2.5 The meta element",
  60. "sub": "Last Updated 27 August 2024",
  61. },
  62. {
  63. "title": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements.",
  64. "href": "https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements",
  65. "heading": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements",
  66. "sub": "Last Updated 27 August 2024",
  67. },
  68. {
  69. "title": "HTML 5.2 W3C Recommendation. 4.2.5 The meta element. W3C Recommendation, 14 December 2017.",
  70. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/document-metadata.html#the-meta-element",
  71. "heading": "HTML 5.2 W3C 勧告. 4.2.5 The meta element",
  72. "sub": "W3C勧告、2017年12月14日",
  73. },
  74. {
  75. "title": "HTML 5.2 W3C Recommendation. 10.3.1. Hidden elements.",
  76. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#hidden-elements",
  77. "heading": "HTML 5.2 W3C 勧告. 10.3.1. Hidden elements",
  78. "sub": "W3C勧告、2017年12月14日",
  79. },
  80. {
  81. "title": "HTML 5.1 W3C Recommendation. 4.2.5 The meta element. W3C Recommendation, 1 November 2016.",
  82. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/document-metadata.html#the-meta-element",
  83. "heading": "HTML 5.1 W3C 勧告. 4.2.5 The meta element",
  84. "sub": "W3C勧告、2016年11月1日",
  85. },
  86. {
  87. "title": "HTML 5.1 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 1 November 2016.",
  88. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#hidden-elements",
  89. "heading": "HTML 5.1 W3C 勧告. 10.3.1. Hidden elements",
  90. "sub": "W3C勧告、2016年11月1日",
  91. },
  92. {
  93. "title": "HTML 5 W3C Recommendation. 4.2.5 The meta element. W3C Recommendation, 28 October 2014.",
  94. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#the-meta-element",
  95. "heading": "HTML 5 W3C 勧告. 4.2.5 The meta element",
  96. "sub": "W3C勧告、2014年10月28日",
  97. },
  98. {
  99. "title": "HTML 5 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 28 October 2014.",
  100. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#hidden-elements",
  101. "heading": "HTML 5 W3C 勧告. 10.3.1. Hidden elements",
  102. "sub": "W3C勧告、2014年10月28日",
  103. },
  104. {
  105. "title": "HTML 4.01 Specification W3C Recommendation. 7.4.4.2 The META element. W3C Recommendation 24 December 1999.",
  106. "href": "https://www.w3.org/TR/html401/struct/global.html#h-7.4.4.2",
  107. "heading": "HTML 4.01 Specification W3C 勧告. 7.4.4.2 The META element",
  108. "sub": "W3C勧告1999年12月24日",
  109. },
  110. {
  111. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  112. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#meta",
  113. "heading": "HTML 3.2 Reference Specification META",
  114. "sub": "W3C勧告1997年1月14日",
  115. },
  116. {
  117. "title": " Hypertext Markup Language - 2.0. November 1995.",
  118. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  119. "heading": "Hypertext Markup Language - 2.0",
  120. "sub": "November 1995",
  121. },
  122. {
  123. "title": "MDN Web Docs. HTML <meta>: The metadata element.",
  124. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta",
  125. "heading": "<meta>: メタデータ要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  126. },
  127. ],
  128. "version": {
  129. "first": "HTML2",
  130. "latest": "HTML Living Standard",
  131. },
  132. }
  133. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用できるコンテキスト

meta要素は、
head要素に
使用できます。

meta要素が使用できるコンテキスト(Context・文脈)は、head要素やhead要素内にある noscript要素のコンテンツとしてです。

name属性, itemprop属性が存在する場合は、メタデータコンテンツを受け入れる要素にも、使用できます。

itemprop属性が存在する場合は、フレージングコンテンツを受け入れる要素にも、使用できます。

文字エンコード宣言を含む要素は、ドキュメントの最初の 1024バイト内で完全にシリアル化する必要があります。この事から文字エンコード宣言を含む要素は、head要素の最初の子要素として配置する事をお勧めします。

メタデータコンテンツをコンテンツの一部として使用できる要素は、以下の各要素です。

フレージングコンテンツをコンテンツの一部として使用できる要素は、以下の各要素です。

document
html
head
body
meta
noscript
p
meta
meta

charset属性が存在する場合、または要素のhttp-equiv属性がエンコーディング宣言状態にある場合は、head要素に使用できます。ただし他にcharset属性が存在するmeta要素が存在したり、http-equiv属性が存在してエンコーディング宣言状態にあるmeta要素が存在したりしていてはいけません。文字エンコーディングの宣言は最初の１つのみ有効です。
http-equiv属性が存在するが、エンコーディング宣言状態にない場合は、head要素にも, head要素内にあるnoscript要素の内部にも使用できます。
name属性が存在する場合は、メタデータコンテンツを受け入れる要素に使用できます。
itemprop属性が存在する場合は、メタデータコンテンツを受け入れる要素にも, フレージングコンテンツを受け入れる要素にも(フローコンテンツを受け入れる要素でも)使用できます。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. </head>

charset属性が存在するので、head要素にのみ使用できます。charset属性を指定しているmeta要素は、文字エンコーディングの宣言なので、head要素の最初の子要素として１つだけ配置する事が望ましいです。

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. </head>

http-equiv属性が存在してエンコーディング宣言状態にあるので、charset属性が存在するmeta要素が存在しないhead要素にのみ使用できます。文字エンコーディングの宣言はcharset属性で行うのが望ましいです。charset属性に対応していないブラウザ等の対応など特定の場合を除いて、使わない様にしましょう。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <meta http-equiv="x-ua-compatible" content="IE=edge">
  5. <noscript>
  6. <meta http-equiv="Refresh" content="300">
  7. </noscript>
  8. </head>

http-equiv属性が存在してエンコーディング宣言状態にはないので、head要素とhead要素内にあるnoscript要素に使用できます。
この例示は、配置のみを提示しています。意味(実用)は意識していません。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <meta name="viewport" content="width=device-width,initial-scale=1">
  5. </head>

name属性が存在するので、メタデータコンテンツを受け入れる要素に使用できます。メタデータコンテンツを使用できるhead要素とhead要素内にあるnoscript要素に使用できます。

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. </head>
  5. <body>
  6. <div itemscope>
  7. <meta itemprop="test" content="123">
  8. </div>
  9. </body>

itemprop属性が存在するので、メタデータコンテンツを受け入れる要素にもフレージングコンテンツを受け入れる要素にも、使用できます。メタデータコンテンツを使用できるhead要素とhead要素内にあるnoscript要素に使用できます。フレージングコンテンツを使用できるdiv要素等に使用できます。(フレージングコンテンツである要素はフローコンテンツでもあるので、フローコンテンツを受け入れる要素にも使用できます。)
(itemprop属性を使用する為に、itemscope属性も祖先の要素に記述しています。)

3.コンテンツモデル

meta要素 は、
配置可能なコンテンツは
ありません。

meta要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、「何もない」 (要素にはテキストノード(要素間の空白以外) と要素ノードが含まれていてはなりません。) です。

meta要素は、子(内容・コンテンツ・Content)を持つことができない空要素です。

meta要素は、属性(属性値)によって任意のメタデータを表します。(属性値はテキストと文字参照が混在していますが、テキストにあいまいなアンパサンドを含めることはできないという追加の制限があります。)

4.コンテンツ属性

meta要素は、
グローバル属性と、
charset,
http-equiv,
name,
content,
media を
設定できます。

meta要素に指定することができる属性は、グローバル属性とcharset属性, http-equiv属性, name属性, content属性, media属性を設定できます。
各属性の有無, 内容により、meta要素の使用できるコンテキストが異なります。言い換えると、meta要素の使用箇所により、設定できる属性が異なりますという事です。

name属性, http-equiv属性, charset属性, itemprop属性のうち 1 つだけを指定する必要があります。

name属性, http-equiv属性, itemprop属性のいずれかを指定する場合は、content属性も指定する必要があります。 それ以外の場合は省略する必要があります。

scheme属性がありましたが、HTML5 で廃止されました。フィールドごとにスキームを 1 つだけ使用するか、スキーム宣言を値の一部にする事が提案されています。

charset属性

  1. <meta charset="utf-8">

charset属性 は、文書で使用される文字エンコーディング(character encoding.)を指定します。

charset属性を指定しているmeta要素は、文字エンコーディングの宣言なのでhead要素の最初の子要素として１つだけ配置する事が望ましいです。２つめ以降はエラーとなり無効の様です。
charset属性を指定しているmeta要素は、head要素にだけ配置ができます。
charset属性を指定しているmeta要素に、他の属性は指定すべきではありません。

属性値の"UTF-8"の例示は推奨でもありますが、その文書の文字エンコーディングと一致である必要もあります。文書の都合で他の文字エンコーディングである必要がある場合は、別途にお調べ下さい。

http-equiv属性

  1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  2. <meta http-equiv="Content-Style-Type" content="text/css">
  3. <meta http-equiv="Content-Script-Type" content="text/javascript">

http-equiv属性 は、HTTPヘッダーの名前を定義して、content属性が持つ値と関連づけます。
meta要素でhttp-equiv属性が指定されている場合、その要素はプラグマ指示子(プラグマディレクティブ・pragma directive.)です。

"Content-Type"は文書の MIME type を定義するもので、後に文字エンコーディングの定義が続きます。
"Content-Style-Type"はデフォルトのスタイルシート言語を定義するものです。
"Content-Script-Type"はデフォルトのスクリプト言語を定義するものです。
文字エンコーディングの定義にはcharset属性の使用が推奨されます。デフォルトのスタイルシート言語は CSS で、デフォルトのスクリプト言語は JavaScript となります。

"Content-Type"は後に文字エンコーディングの定義が続くので、head要素にだけ配置ができます。
http-equiv属性が存在するが、エンコーディング宣言状態にない場合は、head要素にも, head要素内にあるnoscript要素の内部にも配置できます。

上記の３点以外にも HTML5 で有効な属性値はあります。

http-equiv属性を指定しているmeta要素に、他のname属性, charset属性, itemprop属性は指定すべきではありません。

name属性

  1. <meta name="viewport" content="width=device-width,initial-scale=1">

name属性 は、文書レベルのメタデータの名前を定義して、content属性が持つ値と関連づけます。

name属性を指定しているmeta要素は、メタデータコンテンツを受け入れる要素に配置ができます。メタデータコンテンツを配置できるhead要素とhead要素内にあるnoscript要素に配置できます。

name属性を指定しているmeta要素に、他のhttp-equiv属性, charset属性, itemprop属性は指定すべきではありません。

この例示では"viewport"について例示しています。これは、ページのサイズとスケーリングの制御方法についてブラウザに指示を与えます。

content属性

  1. <meta name="viewport" content="width=device-width,initial-scale=1">

content属性 は、値を指定します。http-equiv属性やname属性などにより定義された名前と関連づけられます。

media属性

  1. <meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">

media属性 は、対応メディアを指定します。

この例示は、HTML Living Standard.にあった記述です。筆者(私)は理解しきれていないので、そのままというか切り抜きの様に転記しました。 詳細は仕様をお読みください。この辺は必要に応じて学ばないと、難しいかと思います。

itemprop属性

  1. <div itemscope>
  2. <meta itemprop="test" content="123">
  3. </div>

itemprop属性 は、追加のプロパティの名前を定義して、content属性が持つ値と関連づけるグローバル属性です。

itemprop属性を指定しているmeta要素は、メタデータコンテンツを受け入れる要素, フレージングコンテンツを受け入れる要素に配置ができます。

5.DOM インターフェイス

meta要素 を
直接表す
プロパティは
ありません。

meta要素を JavaScript などで操作するには、documentのquerySelectorAll()メソッドを用いて要素セレクタでmetaと指定して、meta要素のリストを取得する方法があります。この時に取得できる値の形式はHTMLMetaElement インターフェイスのリストです。属性セレクタと組み合わせる方法もあります。

他には、name属性があればdocumentのgetElementsByName()メソッドを用いるとか、id属性があればdocumentのgetElementById()メソッドを用いるとか、状況, 目的によりいろいろあります。

このページの説明は、
"〇〇"です。

  1. <p>このページの説明は、
  2. "<code id="icdJs501">〇〇</code>"です。</p>
  3. <script>
  4. document.addEventListener("DOMContentLoaded", function() {
  5. var vaMeta = document.querySelectorAll("meta");
  6. for (var i = 0; i < vaMeta.length; i++){
  7. if (vaMeta[i].getAttribute("name") == "description")
  8. document.getElementById("icdJs501").textContent = vaMeta[i].getAttribute("content");
  9. });
  10. </script>

meta要素の一覧から、name属性の値がdescriptionである要素のcontent属性の値を取得する例です。例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。

6.レンダリング

  1. meta {
  2. display: none;
  3. }

meta要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は none であり、この要素とその子孫はボックスやテキストシーケンスを生成しません。

メタデータを記述する為の要素なので、ボックスを生成する様な指定は行わないのが良いでしょう。

  1. <div class="cdvPseudo601" itemscope>
  2. <meta itemprop="pmeTest" content="123">
  3. </div>
  1. <style>
  2. .cdvPseudo601 meta,
  3. .cdvPseudo601 meta::after {
  4. display: block;
  5. }
  6. .cdvPseudo601 meta::after {
  7. content: attr(itemprop) "," attr(content);
  8. }
  9. </style>

メタデータを記述する空要素を表示する例のつもりです。表示する予定であれば、メタデータとしてではなく表示用でもあるデータとして別の要素で記述しておくのが良いかと思います。例として記述してみても、なんか変かなと思います。まぁ技術的な可能性としての知識として見てください。

7.気を付ける点

文字エンコーディング宣言

文字エンコーディング宣言を含む要素は、ドキュメントの最初の1024バイト内で完全にシリアル化する必要があります。それを考慮して、head要素の最初の子要素として配置する事が望ましいです。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1">
  7. 以下、つづく

まず文書型宣言を記述して、それに続いてhtml要素開始タグを記述する事でhtml要素を配置します。html要素開始タグに続いて(html要素の内容の最初として)head要素開始タグを記述する事でhead要素を配置します。head要素開始タグに続いて(head要素の内容の最初として)meta要素開始タグを記述する事でmeta要素を配置します。この最初のmeta要素に文字エンコーディング宣言を含むようにします。

処理順序

HTMLは、タグ等の解釈, 処理を読み込み順に行います。メタデータを記述しても、まだ読み込んでない部分はその時点では無いものとして解釈, 処理を行うので、大事な事は先に記述します。

一部の要素(その属性等)で、処理順序を制御する指定もありますが、それもその記述が読まれてその処理によって制御が有効となるのであって、やはり記述順には意味があります。

8.付記