Zenn
🕊️

HTMLの知識を最近の情報に更新したメモ

2024/06/14に公開
HTML
HTML 5
memo
tech


JavascriptはES2022対応の本で一応知識アップデートしてましたが、HTMLは古の中途半端な知識しかないことに気が付きました。DOMを省いた雑な知識アップデート内容ですが備忘として残しておきます。引用内容は記事投稿時点の内容のため、リンク先が変更となっている可能性があります。
[HTML Living Standard — Last Updated 13 June 2024]

HTMLそのものについて

仕様と主体組織

  • 現在の標準仕様名は"HTML Living Standard"
    • HTML5は廃止されたが、内容はだーいたい同じ
      • non-normativeとはいえ公式がHTML5と考えて良い風に記載されている
    • 仕様の更新頻度が早くなった
  • 標準化団体は"WHATWG"
    • 主要関連組織はApple,Mozilla,Opera,Google,Microsoft
    • 2019年からW3Cではなくなった

個人の見解

  • 公式の目次順を見るに今はDOM主体の設計と思われる
    • 論理が実体に先行するのは当たり前と言えば当たり前
    • "the basics"とは書いているが以下記述もある

      In particular, familiarity with the basics of DOM is necessary for a complete understanding of some of the more technical parts of this specification.
      (1.4 Audience)

HTMLとDOM

概要

DOMとは

以下記述からHTMLのような構造化文書のメモリ内表現の認識で問題ないように思われる。

This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.
The in-memory representation is known as "DOM HTML", or "the DOM" for short.
(1.8 HTML vs XML syntax)

HTMLとは

以下記述からメモリ内表現伝送用の構文言語という認識で問題ないように思われる。

There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.
The first such concrete syntax is the HTML syntax.
(1.8 HTML vs XML syntax)

関連性

以下記述からHTMLとDOMは100%同じ内容を表現可能というわけではない認識で問題ないように思われる。

The DOM, the HTML syntax, and the XML syntax cannot all represent the same content.
(1.8 HTML vs XML syntax)

個人の見解

  • HTMLファイルはDOMの一部を静的表現したもの的な理解
    • ざっくり HTML(静的) -> DOM(動的) -> Rendering(出力)
  • ただし、DOMとHTMLは相互変換が保障されているものではない
    • 普通に使う分には可換という感覚で良い気がする

構造比較

構造

HTMLもDOMも木構造でありNode(節点)とEdge(辺)を持つ。ただ、Edgeに特定の名称はないように見受けられる。

DOMの要素

  • DOMのNodeのことをNode(ノード)と呼ぶ
    • ノードはオブジェクトで表現される
    • 以下のnodeTypeがある (非推奨は省略)
      • Element
      • Attr
      • Text
      • CDATASection
      • ProcessingInstruction
      • Comment
      • Document
      • DocumentType
      • DocumentFragment

HTMLの要素

  • DOMの部分木に相当するものをElement(要素)と呼ぶ
  • 以下は要素の一部
    • Tag (タグ)
    • Attribute (属性)
    • 内容 (子要素)

HTMLとDOMのイメージ図

実際は要素間のスペースもテキストノードになる等あるため、以下は理解用のイメージ図。
img_html_dom

HTML要素間の包含関係

理解優先のため、以下から要素のことも"タグ"と記述。

前提知識

  • コンテンツモデル (Content model)
    • タグが内容として含むことができるタグの定義

      A normative description of what content must be included as children and descendants of the element.
      (3.2.4 Element definitions)

  • コンテンツカテゴリー (Categories)
    • タグを似た特性毎にグルーピングしたカテゴリー
    • コンテンツモデルで使用される

      A list of categories to which the element belongs. These are used when defining the content models for each element.
      (3.2.4 Element definitions)

    • 過去に以下分類があったが、表示特性のためCSSに移動しHTMLには存在しない
      • Block-level content
      • Inline-level content

概要

  • タグは0個以上のコンテンツカテゴリーに所属する
    • コンテンツカテゴリーに所属しないタグもある
  • タグが持てる子要素はコンテンツカテゴリー又はタグ名で指定されている
    • 間接的,直接的にタグ内に記述可能なタグが定義されている
    • 特定条件の場合のみ許容するような条件付指定の場合もある
    • 持てる子要素が存在しない場合もある
      • このようなタグのことをVoid elements(空要素)と呼ぶ

img_content_model
理解用イメージ図

主要コンテンツカテゴリー

主要コンテンツカテゴリー間の関係イメージ図

Metadata content (メタデータコンテンツ)

主にheadタグ内に含めるようなタグのカテゴリーと思われる。

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
(3.2.5.2.1 Metadata content)

Flow content (フローコンテンツ)

主にbodyタグ内に含めるようなタグのカテゴリーと思われる。

Most elements that are used in the body of documents and applications are categorized as flow content.
(3.2.5.2.2 Flow content)

Sectioning content (区分コンテンツ)

文書中の大き目の文章構造,文章間関連性を表現するタグのカテゴリーと思われる。

Sectioning content is content that defines the scope of header and footer elements.
(3.2.5.2.3 Sectioning content)

Heading content (見出しコンテンツ)

文章タイトルや目次を表現するタグのカテゴリーと思われる。

Heading content defines the heading of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).
(3.2.5.2.4 Heading content)

Phrasing content (記述コンテンツ)

文章内部を構成する多様な要素を表現するタグのカテゴリーと思われる。昔のインラインレベルコンテンツに近しい印象を受ける。

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
(3.2.5.2.5 Phrasing content)

Embedded content (埋め込みコンテンツ)

外部のリソースを挿入するタグのカテゴリーと思われる。プログラムでいう内外ライブラリのインポート的なタグ群の印象。

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
(3.2.5.2.6 Embedded content)

Interactive content (対話型コンテンツ)

ユーザーが操作可能なタグのカテゴリーと思われる。昔でいうフォーム要素のようなものに限らず<a>や<details>も含まれる。

Interactive content is content that is specifically intended for user interaction.
(3.2.5.2.7 Interactive content)

その他カテゴリー等

  • Palpable content (知覚可能コンテンツ)
    • ユーザーが画面描画や音声発信等の知覚可能なタグのカテゴリーと思われる

      As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content and that does not have the hidden attribute specified.
      (3.2.5.2.8 Palpable content)

  • Form-associated elements (フォーム関連要素)
    • いわゆるフォームに関連したタグのカテゴリーと思われる

      A number of the elements are form-associated elements, which means they can have a form owner.
      (4.10.2 Categories)

  • Script-supporting elements (スクリプト対応要素)
    • スクリプト関連のタグのカテゴリーと思われる

      Script-supporting elements are those that do not represent anything themselves (i.e. they are not rendered), but are used to support scripts, e.g. to provide functionality for the user.
      (3.2.5.2.9 Script-supporting elements)

  • Transparent content models (透過的コンテンツモデル)
    • 包含関係の特性を表すが、いくつかのタグのみこの特性を持つためカテゴリーのような扱いを受けると思われる

      Some elements are described as transparent; they have "transparent" in the description of their content model.
      (3.2.5.3 Transparent content models)

    • この特性を持つタグは子要素として持つことができるタグが動的に変化する
      • 具体的には親要素と同じ子要素を持つことができるようになる
      • ただし特定のタグは不可等の条件が追加される場合がある

HTMLの構成と要素

構成

大雑把には以下の構成をとる。

<!DOCTYPE html>
<html>
  <head>
    <!-- invisible meta data -->
  </head>
  <body>
    <!-- visible contents -->
  </body>
</html>
  • <!DOCTYPE html>: 必須; ブラウザが使用するモードを決定する情報 (文書型定義)
  • <html>: 必須; ルート要素
  • <head>: 任意; メタデータ用コンテナ (非表示情報)
  • <body>: 任意; コンテンツ用コンテナ (表示情報)

Documents must consist of the following parts, in the given order:

  1. Optionally, a single U+FEFF BYTE ORDER MARK (BOM) character.
  2. Any number of comments and ASCII whitespace.
  3. A DOCTYPE.
  4. Any number of comments and ASCII whitespace.
  5. The document element, in the form of an html element.
  6. Any number of comments and ASCII whitespace.
    (13.1 Writing HTML documents)

要素

雰囲気だけ知っているような状態でも把握していそうな内容は割愛。

  • 属性には以下の2種類が存在する
    • 全てのタグで使用可能なグローバル属性
    • 特定のタグでのみ使用可能な属性
  • 属性値の無い属性を論理属性(Boolean attributes)と呼び以下記述は等価
    • disabled
    • disabled="disabled"
  • 属性値の記述は二重引用符でも単一引用符でもどちらでも良い
  • 要素の記述はcase-insensitive
  • タグの省略可否はタグ毎に定義されている
    • 終了タグだけでなく開始タグも省略可能な場合がある
  • 空要素の記述時に末尾の/は不要
    • 一応仕様上は/があっても問題ないことになっている

      Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/), which on foreign elements marks the start tag as self-closing. On void elements, it does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind.
      (13.1.2.1 Start tags)

    • <br />のような記述はXHTML(XML)時代の名残
      • XMLは非推奨となっている

        Using the XML syntax is not recommended,
        (14 The XML syntax)

    • 属性値を引用符で囲っていない場合、/は属性値の一部となる
    • そうでない場合、実際は無視されているだけのためファイル容量の無駄
      • 読みやすさとのトレードオフ

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)

以下情報は正確性に欠けるため参考程度の情報となる。

  • 視聴覚障碍等による情報アクセシビリティの観点から定義された技術仕様
    • 日本においては法的要件として対応が必要となる場合も想定される
    • 影響を受けてHTML5策定時にHTMLタグがかなり増えたらしい
  • WAI-ARIAはDOMには影響を与えない
    • CSSの要素選択で利用可能
  • 大雑把に言うとWAI-ARIAではタグの役割とそれら役割の追加情報区分が定義された
    • タグの役割をARIAロール,追加情報をARIA属性(プロパティ又はステート)と呼ぶ
      • プロパティは不変な追加情報
      • ステートは可変な追加情報
  • タグにはデフォルトのARIAロールが設定されている
    • MDN Web Docs には"暗黙のARIAロール"として各タグページに記載されている
  • どのARIAロールにどのプロパティ,ステートが必要かは全て定義されている
  • HTMLだけで表現可能な内容をARIA属性で無理やり表現しない
    • どうしても必要な場合のみARIA属性を使用する

タグ一覧

よく纏まっているHTML要素リファレンスを参照。ただ、コンテンツモデルやタグ省略等を確認するためには画面遷移が必要なので、それらを含めた一覧を自分用にそのうち作りたい。

所感

HTML5より昔の知識しかなかったので色々変化しており勉強になりました。何となく知っていた空要素の/については経緯含めそうなんだ感がすごかったです。あと公式の以下文言を見て、プロとしてやっていく場合はそうなるよなぁとは思いましたが、変化が激しい世界なだけに他のドキュメント含め網羅し続けるには明確な知識更新戦略を持っておかなければならないと思いました。

This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.
(1.9.1 How to read this specification)

参考文献

Discussion