目次に戻る

各要素にかかわる共通事項：HTML Living Standard各要素別メモ

０．基本

０－１．要素の構造


   | 要素名 | |属性| |←   属性値  →|                                | 要素名  |
  <blockquote title="これはblockquote">これは<b>引用</b>を表すんだよ</blockquote>
  |←    blockquote要素の開始タグ    →|←  blockquote要素の内容  →|→blockquote要素の終了タグ
  |←                               blockquote要素                            →|
  blockquote要素の内容テキスト→「これは引用を表すんだよ」

開始タグから終了タグまでが、当該要素。

開始タグは、「半角の小なり記号」＋「半角英文字の要素名」＋「半角スペース」＋「属性」＋「半角のイコール記号」＋「属性値」＋「半角の大なり記号」。「属性=属性値」は半角スペース区切りで複数ある場合もある。「属性=属性値」がない場合は、「半角スペース」を入れずに「半角の大なり記号」を続けてもよい。属性値は、通常はダブルクォーテーション記号で囲む（シングルクォーテーション記号でも可。HTML構文では、一定の条件を満たせば、これらのクォーテーション記号は省略も可）。

終了タグは、「半角の小なり記号」＋「半角のスラッシュ記号」＋「半角英文字の要素名」＋「半角の大なり記号」。

開始タグと終了タグの間が、当該要素の内容であり、テキストや子孫要素が入る。

当該要素の内容テキストは、当該要素の内容から子孫要素のタグを取り除いたもの。

ブーリアン属性については、HTML構文では、「属性=属性値」は省略した書き方ができる。

HTML構文では、Void elementは、開始タグのみで終了タグはなく、したがって、内容がない。

XML構文では、Void elementは、開始タグのみで開始タグを閉じるか、普通に終了タグありにするかの二通りの記載ができる。ただし、終了タグを記載する場合も開始タグの直後でなければならず、したがって、内容はあってはならない。

０－２．要素の親子関係

下記例を参照。

ソース

    <body>
      <h1>友人関係の大切さ</h1>
      <section>
        <h2>その１</h2>
        <p><em>友人</em>関係は大切だ。</p>
      </section>
    </body>
要素の親子関係
  1. body
    1. h1
    2. section
      1. h2
      2. p
        1. em

０－３．HTML文書の基本構成

HTML構文の場合

  <!DOCTYPE html>
  <html>
    <head>
      <title>文書のタイトル</title>
    </head>
    <body>
      文書
    </body>
  </html>
XML構文の場合

  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>文書のタイトル</title>
    </head>
    <body>
      文書
    </body>
  </html>

先頭のXML宣言は、文字エンコーディングがutf-8の場合は、省略可能。

１．雑多な覚書

１－１．XML構文とHTML構文

XML整形式で書かれたのが、XML構文。構文のルールは従前のXHTMLとほぼ同じ。HTML Living Standardでは、XML構文は推奨されない。

HTML構文は、HTML4以下のHTML仕様の構文とある程度の互換性がある。

HTML Living Standardでは、HTTPレスポンスヘッダが、application/xhtml+xml、application/xml又はtext/xmlなのがXML、text/htmlなのがHTMLとされてるが、text/htmlでXHTMLを配信するウェブサイトが多数ある現状から、HTML Living Standardが普及しても遵守しないウェブサイトが多数出てくるものと推測される。

HTML Living StandardのXML構文では、下記のとおり。

  • ブーリアン属性の属性値省略表記は不可。
  • タグの省略は不可。
  • Void elementのタグは、開始タグのみで開始タグをスラッシュで閉じるか、開始タグに終了タグをつけて閉じるかのいずれかで、閉じなければならない。
  • 属性値を囲む（ダブル）クォーテーションは省略禁止。
  • html要素、svg要素及びmath要素のxmlns属性は必須。
  • noscript要素は使ってはならない。
  • ジャバスクリプトのdocument.writeとdocument.writelnは使用禁止。
  • 「&lt;」、「&gt;」、「&amp;」、「&quot;」、「&apos;」以外の実体参照は使用禁止（なお、数値文字参照には制限はない）。
  • タグのうち要素名及び属性は小文字で（Foreign elementの一部の要素・属性については、仕様で規定されているとおりに大文字・小文字を使い分けて）記載しなければならない。
  • DOCTYPE宣言は大文字・小文字を区別して記載しなければならない。
  • XML仕様に従って、XML整形式の他のマークアップ言語を組み込んでもよい。

HTML Living StandardのHTML構文では、下記のとおり（ただし、最初の項目を除いて、Foreign elementには適用されない）。

  • html要素のxmlns属性は解釈されず、svg要素及びmath要素のxmlns属性は必須ではない。
  • XML宣言は不可。
  • Void elementのタグは、開始タグのみで開始タグをスラッシュで閉じないのが原則。ただし、開始タグのみで開始タグをスラッシュで閉じてもよい。いずれにしても終了タグはあってはならない。
  • XML仕様に従ってXML整形式の他のマークアップ言語を組み込むことはできない。ただし、Foreign elementは組み込める。
  • 上記の組込み不可の結果として、HTML Living Standardの中で「HTML構文においても許容する」（「解釈されないけど記載することは可」の場合も含む）と特に明記されてない限り、「:」（コロン）付きの要素名及び属性名の使用は許容されない。

１－２．DOCTYPE宣言

HTML Living Standardでは、HTML Living Standard対応ブラウザに対しては、DOCTYPE宣言は本来的には不要。

ただし、DOCTYPEスイッチによるレンダリングモードの切替機能があるブラウザで標準モードでレンダリングさせるために、DOCTYPE宣言を<!DOCTYPE html>と指定する。

XML構文なら常に標準モードなので不要であるが、XHTML1と解釈されて不具合が出る可能性が万が一にもないとはいえない（メジャーなHTML Living Standard対応ブラウザでは、XHTML1との区分がつかなくても不具合が生じることはないと思われるが）ので、指定しておいた方が無難。

マークアップジェネレーターに対する規定：上記のような短いDOCTYPE宣言を作成できない場合は、<!DOCTYPE html SYSTEM "about:legacy-compat">とすることも可。このDOCTYPE宣言も準拠である。

１－３．制約検証

制約検証（constraint validation）は、フォーム送信時や入力コントロールからフォーカスが離れるときなどに、入力コントロールの入力値などが、制約条件に適合しているかどうかをチェックする機能。

制約条件は、入力コントロールの要素・属性等によって定まる。

Submittable elementは、除外条件に合致しない限り、原則として、制約検証の対象。

悪意ある者にとっては制約検証を回避してフォーム送信することは容易なので、サーバー側のプログラムでもチェックは必要。

アクセシビリティ関連：制約条件は、ユーザーに対して説明されるべきである（Techniques for WCAG 2.1 : G84, G85, G89, G184, H90）。

１－４．レスポンシブイメージ

画面サイズ・解像度、デバイスの種類などによって、表示画像を自動的に変更する手法。

下記を参照。

ただ単に条件によって画像を動的に変更するということであれば、スクリプトでも可能。

１－５．代替テキスト

主に画像、動画、音声などの非テキストのコンテンツを埋め込む要素について、当該コンテンツを認識できないユーザーや当該コンテンツのデータに支障があったり対応してない形式であったりして表示できない場合などに、当該コンテンツの代替として提示されるテキスト。

１－６．代替コンテンツ

旧式のユーザーエージェントが対応してない要素であったり、主に画像、動画、音声などの非テキストのコンテンツを埋め込む要素で当該コンテンツのデータに支障があったり対応してない形式であったりして表示できない場合などに、当該要素の代替として表示されるコンテンツ。

代替テキストも代替コンテンツの一種である。

１－７．XML-compatible

XML仕様の名前生成規則に合致し、かつ、「:」（コロン）を含まないことを指す。

大文字小文字の別を問わず、先頭に「xml」を含む文字列は、XML仕様で予約されているので、許容されない。

１－８．要素間空白文字

要素間空白文字（inter-element white space）は、半角スペース文字、タブ文字、改行文字のこと。

子としてテキストを配置することを許容しない要素においては、子たる位置に配置されている要素間空白文字は、存在しないものとして扱われる。

その他の要素の内容テキストの要素間空白文字は、レンダリングに際しては、原則として、すべて半角スペース文字に変換されたうえで、連続するものは1個の半角スペース文字にまとめられ、冒頭のものは無視される。

ただし、pre要素及びtextarea要素の内容テキストの要素間空白文字はそのままレンダリングされる。

アクセシビリティ関連：要素間空白文字などをレイアウト目的で使用して、テキストの意味を壊してはならない（Techniques for WCAG 2.1 : F32）。

１－９．閲覧文脈

閲覧文脈（browsing context）は、HTML文書が閲覧者に表示される環境を指す。

主としてリンク先やフォーム送信の結果などが表示される場所がどこなのかという文脈の中で出てくる概念。

視覚系ブラウザにおいては、ブラウザにおけるウィンドウ、タブ、インラインフレームなどを指す。

１－１０．段落

仕様において明言されている事項。

  • ここでいう段落は、p要素の定義以上のものである。
  • 段落は、視覚系ブラウザにおいて隣接するブロックから空行で物理的に分離されるような外観を伴う一つ以上の文を含むテキストのブロックである。
  • 段落は、p要素によって、明示的に構成される。
  • p要素は、段落をマークアップする方法の一つにすぎない。
  • 要素間空白文字は、段落を形成しない。
  • a要素、del要素、ins要素、map要素は、段落の境界をまたぐマークアップができてしまうが、これは避けた方がよい。
  • 準拠チェッカーに対する規定：audio要素、canvas要素、object要素、video要素などにおいて重なり合う段落がある場合は、警告することができる。

私見・補足：仕様の行間や例示などから読み取れる事項。

  • 段落は、素のHTML文書を視覚系ブラウザにおいて自動折り返しなしで表示させた場合の「一行」とニアイコール（一般的な視覚系ブラウザのデフォルトスタイルでは、たいがいの要素は、画面からはみ出さないように自動折り返しするようになっているので、自動折り返しなしの「一行」を認識するのは難しい場合も多いが）。
  • br要素は、段落構造を維持したまま段落を複数行に分割する特殊な要素であり、br要素で改行されているからといって、別々の段落だと扱ってはならない。
  • wbr要素は自動折り返しに関連する要素なので、段落を形成する改行とはみなさない。
  • 段落には、要素により明示的にマークアップされているもの（明示の段落）と、そうでないもの（暗黙の段落）とがある。
  • 暗黙の段落は、いわば「余り」として弾き出されてくることで形成される。
  • 段落の境界をまたぐマークアップは、暗黙の段落を明示的にマークアップして明示の段落に変えれば、避けられる。
  • 重なり合う段落は、その内容が代替コンテンツとなる要素と明示の段落及び暗黙の段落が絡み合って生じる。
暗黙の段落の境界をまたぐ例

    <section>
    段落１段落１段落１<ins>段落１
    <p>段落２段落２段落２段落２</p>
    段落３</ins>段落３段落３段落３
    </section>

上記のマークアップは、暗黙の段落をp要素で明示すると下記のようになって、非準拠なマークアップになるので、上記マークアップ自体を避けるべきである。


    <section>
    <p>段落１段落１段落１<ins>段落１</p>
    <p>段落２段落２段落２段落２</p>
    <p>段落３</ins>段落３段落３段落３</p>
    </section>

望ましいマークアップは下記のとおり。


    <section>
    <p>段落１段落１段落１<ins>段落１</ins></p>
    <p><ins>段落２段落２段落２段落２</ins></p>
    <p><ins>段落３</ins>段落３段落３段落３</p>
    </section>
重なり合う段落の例
ソース

      <section>
        この動画は××です。
        <video src="video.mpg">
          <p><a href="video.mpg" download="">動画ファイルをダウンロード</a></p>
        </video>
        この動画の権利については○○を参照。
      </section>
段落解析結果
  • 段落１：「この動画は××です。+video要素による動画 + この動画の権利については○○を参照。」（動画それ自体は段落ではないので、このように1個の段落の構成部分ということになる）
  • 段落２：「動画ファイルをダウンロード」

段落１と段落２とが重なり合う段落となっている。

下記のようにすれば、重なり合う段落は解消される。

ソース

      <section>
        <p>この動画は××です。</p>
        <video src="video.mpg">
          <p><a href="video.mpg" download="">動画ファイルをダウンロード</a></p>
        </video>
        <p>この動画の権利については○○を参照。</p>
      </section>
段落解析結果
  • 段落１：「この動画は××です。」
  • 段落２：「動画ファイルをダウンロード」
  • 段落３：「この動画の権利については○○を参照。」

１－１１．コメント

ソース上で、「<!--」で始まって「-->」で終わる部分。

当該部分は、HTML文書としては存在しないものとして扱われ、レンダリングされない。

当該部分の中に記載できるテキストについては、いくつかの制限がある。

コメントを多重に入れ子にはできない。

基本的な用途は、閲覧者に見せる意図を有しないHTML文書作成者のメモ書きである（とはいっても、閲覧者がブラウザの機能等でソースを表示すれば見られてしまうが）。

将来追加する予定がある部分をコメントの中に記載しておいて、追加すべき時期が来たら「<!--」と「-->」を除去して表示するといった使い方もできる。

１－１２．不活性

ユーザーエージェントに対する特記事項：不活性にされた部分については、下記のとおりとする。

  • 当該部分は、ヒットテストとテキスト選択については、CSSが{pointer-events: none; user-select: none;}に指定されているかのように動作しなければならない。
  • 当該部分は、編集不能となる。
  • ページ内検索にあたっては、当該部分を無視すべきである。
  • 当該部分については、一般的には、フォーカスされることができない。
  • 当該部分のコマンドは、無効となる。
  • テキスト選択とページ内検索にかかる制約については、ユーザーに当該制約を覆すことを許容してよい。

１－１３．見出しとセクションとアウトライン

詳細は、アウトラインのルールと例を参照。

２．グローバル属性

原則として、すべての要素で指定できる属性である。

ただし、xmlns属性に関するものを除いて、Foreign elementには適用なし。

２－１．グローバル属性：XML構文関係

xml:space
  • 属性値：default、preserveのいずれか。
  • XML構文でのみ有効。
  • HTML構文では解釈されない。
xml:lang
  • 属性値：BCP47の言語コード、空も可
  • lang属性があり、かつ、xml:lang属性値とlang属性値が同じ場合のみ、HTML構文でも記述は可。ただし、（単に冗長になるだけであり）効果に（実質的な）影響はない。
  • xml:lang属性とlang属性を同時に指定した場合は、lang属性は無視される。
xmlns
  • 属性値：html要素その他HTML関連の要素はhttp://www.w3.org/1999/xhtml、math要素その他MathML関連要素はhttp://www.w3.org/1998/Math/MathML、svg要素その他SVG関連要素はhttp://www.w3.org/2000/svg
  • XML構文でのみ有効。XML構文においては、html要素、svg要素及びmath要素のxmlns属性は必須。
  • HTML構文では実質的には解釈されないが、あっても非準拠ではない（ただし、属性値は正しくなければならない）。

２－２．グローバル属性：関連仕様の属性

２－２－１．RDFaの属性

HTML+RDFa 1.1では、下記の属性を準拠としなければならないと定められてる。

  • vocab→語彙定義集へのURL。この属性を指定した要素の内部でのみ当該語彙定義集が有効。基本的な語彙定義集は、schema.orgにそろっている。
  • typeof→vocab属性で指定されている語彙定義集で定義されているいくつかの語彙集のうちのひとつを示す文字列。この属性で指定した要素の内部でのみ当該語彙集が有効。
  • property→定義されているプロパティを示す文字列。prefix属性で指定されている語彙定義集のプロパティの場合は、プレフィックス文字列＋「:」（コロン）を前に足す。
  • resource→プロパティに対応する目的語となるリソースを示すURL
  • prefix→vocab属性で指定されている語彙定義集に、別の語彙定義集をさらに追加するための指定。プレフィックス文字列＋「:」（コロン）＋URL
  • content→プロパティに対応する目的語たる値を機械可読形式で記述。
  • about→主語を示すURI。主語を別リソースから持ってくるための指定。
  • rel→リソースに対する関係を示す文字列。
  • rev→リソースから見た関係を示す文字列。
  • datatype→データの形式を示す文字列。
  • inlist→ブーリアン属性。プロパティに対応する目的語が一連のリストであることを示す。

２－２－２．RDFa Liteの属性

RDFa Lite 1.1では、vocab、typeof、property、resource、prefixの各属性を準拠としなければならないと定められてる。各属性の詳細はRDFaの属性を参照。

２－２－３．WAI-ARIAの属性

WAI-ARIAのrole属性やaria-*属性が使える。

要素によっては、role属性値に制限がある（制限に反しない限りは、半角スペース区切りで複数指定可）。ARIA in HTMLを参照（当サイトの各要素ページのWAI-ARIA部分の記載は、原則としてこれのEditor's Draftによる。ただし、Digital Publishing WAI-ARIA Module 1.0及びWAI-ARIA Graphics Module関連のものは、省いてる）。

グローバル aria-*属性→aria-*属性のうち、原則としてすべてのrole・すべての要素に対して指定可能とされているもの。

基本的に、グローバル aria-*属性はどの要素にも指定可能（ただし、「すべてのrole及びすべてのaria-*属性は指定不可」とされている要素には、指定できない）で、その他のaria-*属性は当該要素のデフォルトrole又は指定したroleがサポートするもののみ指定可能。

デフォルトroleとして規定されたものをわざわざrole属性値に指定することは推奨されない。

抽象ロールは指定してはならない。

role属性値（Digital Publishing WAI-ARIA Module 1.0及びWAI-ARIA Graphics Module関連を除く）
  • alert→重要かつ通常は時間依存の情報をもつ動的領域。
  • alertdialog→警告メッセージを含むダイアログボックス。
  • application→ユーザーアクションを要求する一つ以上のフォーカス可能な要素を含む文書構造。
  • article→ドキュメント、ウェブページ、又はウェブサイトの独立した部分を構成する文章から成るsection。
  • banner→個別のウェブページ固有ではなく、そのほとんどがウェブサイト共通のコンテンツを示す。
  • blockquote→他のソースから引用されたコンテンツのsection。
  • button→クリック又は押下された際にアクションを可能にするコントロール。
  • caption→figure、table又はgridの名前又は説明となる可視コンテンツ。
  • cell→テーブルコンテナにおけるセル。
  • checkbox→チェック状態にすることが可能なコントロール。
  • code→コンピューターコードの断片を表すsection
  • columnheader→列のヘッダ情報を含むセル。
  • combobox→テキストボックスの値を設定する、ユーザーを助けるために動的にポップアップ表示することができる、単一行テキストボックスほかを含む複合的なwidget。
  • command（抽象ロール）→アクションを実行するが入力データを受信しないwidgetのフォーム。
  • comment→当該部分には、他のコンテンツに対する反応であるコメントが含まれる。
  • complementary→主要コンテンツに対して補完で、主要コンテンツから分離されても意味のあるコンテンツを示す。
  • composite（抽象ロール）→ナビゲーション可能な子孫等を含むことができるwidget。
  • contentinfo→ドキュメントに関する情報を含むコンテンツを示す。
  • definition→用語又は概念の定義。
  • deletion→削除済み又は削除が提案されているコンテンツ。
  • dialog→ウェブアプリケーションの主要ウィンドウの子孫ウィンドウであるダイアログボックス。
  • directory→静的な目次のような、グループのメンバーへの参照のリスト。これはlistと同等であり、特に追加の利点はないので、これをrole属性値に指定するのは、推奨されない。
  • document→アクセシビリティ支援技術のユーザーが読み取りモードで閲覧することを望むかもしれないコンテンツを含む要素。
  • emphasis→1個以上の強調文字。
  • feed→スクロールするとスクロール可能な記事一覧が表示され、その両端に記事が追加又は削除されるかもしれないリスト。
  • figure→ グラフィカルなドキュメント、画像、コード断片、又はテキスト例を通常含むコンテンツのsection。
  • form→全体として、フォームを作成するために組み合わせる部品のコレクションを含む領域。
  • generic→それ自体では意味を持たない名前を有しないコンテナ。これはユーザーエージェントでの実装を想定しているものであり、著者はこれをrole属性値に指定すべきではない。
  • grid→方向矢印キーのような、グリッドで一部又はすべてのセルが二次元のナビゲーションを使用することでフォーカス可能となる、一つ以上のセルをもつ一つ以上の行のコレクションを含む複合的なwidget。
  • gridcell→グリッド又はツリーグリッド内のセル。
  • group→アクセシビリティ支援技術によって要約又は目次に含まれることを意図されないユーザーインターフェースのセット。
  • heading→ドキュメントのsectionに対する表題。
  • image→画像を構成する要素のコレクションのコンテナ。
  • img→画像を構成する要素のコレクションのコンテナ。
  • input（抽象ロール）→入力を許可する一般的なwidget。
  • insertion→追加の又は追加が提案されているコンテンツ。
  • landmark（抽象ロール）→具体的で著者指定の目的に沿う充分重要なコンテンツを含むsection。
  • link→活性化された場合、ユーザーエージェントにそのリソースに導かせる、内部又は外部のリソースへのインタラクティブな参照。
  • list→listitemたる要素を含むsection。
  • listbox→ユーザーが選択肢のリストから一つ以上の項目を選択できるようにするwidget。
  • listitem→リスト又はディレクトリにおける一つの項目。
  • log→新しい情報が意味のある順序で追加されかつ古い情報が消えることのある動的領域。
  • main→ドキュメントの主要コンテンツを示す。
  • mark→当該部分には、参照目的又はユーザーの現在の活動に関連性が高いためにマーク又はハイライト表示されるコンテンツが含まれる。
  • marquee→必須でない情報が頻繁に変更される動的領域。
  • math→数式を表すコンテンツ。
  • menu→ユーザーに選択肢のリストを提供するwidget。
  • menubar→通常は表示されたままとなりかつ水平に表示されるメニューのプレゼンテーション。
  • menuitem→menu又はmenubarに含まれる選択肢のセットにおける項目。
  • menuitemcheckbox→チェック状態となりうるmenuitem
  • menuitemradio→どれか1個のみがチェック状態となりうる要素のセットにおけるチェック状態となりうるmenuitem
  • meter→既知の範囲の中にあるスカラー量又は小数の値を表す要素。
  • navigation→ドキュメント又は関連するウェブページのためのナビゲーションとなる要素（通常はリンク）のコレクションを示す。
  • none→暗黙のネイティヴロールセマンティックスがアクセシビリティAPIに対応づけされない要素。
  • note→コンテンツがリソースの主要コンテンツに挿入的又は付随的であるsection。
  • option→リストボックスで選択可能な項目。
  • paragraph→コンテンツの段落。
  • presentation→暗黙のネイティヴロールセマンティックスがアクセシビリティAPIに対応づけされない要素。
  • progressbar→長い時間がかかるタスクの進捗状況を表示する要素。
  • radio→どれか1個のみがチェック状態となりうる要素のグループにおけるチェック状態となりうるコントロール。
  • radiogroup→radioのグループ。
  • range（抽象ロール）→ユーザーによって設定可能な値の範囲を表す入力コントロール。
  • region→具体的で著者指定の目的に沿う充分重要なコンテンツを示す。
  • roletype（抽象ロール）→他のすべてのroleが継承する基本的なrole。
  • row→テーブルコンテナにおけるセルの行。
  • rowgroup→テーブルコンテナにおける一つ以上の行要素を含む構造。
  • rowheader→グリッドで行のセルを含むヘッダ情報。
  • scrollbar→コンテンツが完全に表示画面内に表示されているかどうかに関わらず、表示画内のコンテンツのスクロールを制御するグラフィカルなオブジェクト。
  • search→全体として、検索機能を作成するために組み合わせる部品のコレクションが含まれる領域。
  • searchbox→検索条件の指定を対象としたテキストボックス。
  • section（抽象ロール）→ドキュメント又はアプリケーションでレンダリング可能な構造収納単位。
  • sectionhead（抽象ロール）→sectionのトピックを分類する又は要約するもの。
  • select（抽象ロール）→ユーザーが選択肢のセットから選択を行うことを可能にするフォームのwidget。
  • separator→コンテンツのsection又はメニュー項目のグループを分離して区別する仕切り。
  • slider→ユーザーが与えられた範囲内から値を選択する入力コントロール。
  • spinbutton→ユーザーに範囲内の選択肢の中から選択することを期待するフォーム。
  • status→コンテンツはユーザーに対する助言情報であるが、多くの場合ステータスバーとして提示される必要のない動的領域。
  • strong→重要、深刻又は緊迫なコンテンツ。
  • structure（抽象ロール）→文書構造となる要素。
  • subscript→1個以上の下付き文字。
  • suggestion→当該部分には、提案された変更内容が含まれる。提案が受け入れられたら、このroleは削除されるべきである。
  • superscript→1個以上の上付き文字。
  • switch→（checked/uncheckedではなく）on/offを表すチェックボックス。
  • tab→ユーザーに対して表示されるtabpanelを選択するためのメカニズムを提供するグループ化ラベル。
  • table→行及び列で整列されたデータを含むsection。
  • tablist→tabpanelたる要素への参照であるtabたる要素のリスト。
  • tabpanel→各tabがtablistに含まれる、tabに関連付けられたリソースに対するコンテナ。
  • term→対応する定義をもつ単語又はフレーズ。
  • textbox→入力値として自由形式のテキストを許可する入力コントロール。
  • time→特定の時点を表す要素。
  • timer→開始時点からの経過時間を示す、又は終了時点までの残り時間を示す数値カウンタを含む動的領域。
  • toolbar→一般的に使用される小型の視覚形式で表現される機能するボタン又はコントロールのコレクション。
  • tooltip→要素の説明を表示するコンテキストポップアップ。
  • tree→ユーザーが階層的に編成されたコレクションから1つ以上のアイテムを選択できるようにするwidget。
  • treegrid→行が開閉できるgrid
  • treeitem→treeの選択項目。
  • widget（抽象ロール）→グラフィカルユーザーインターフェースのインタラクティブなコンポーネント。
  • window（抽象ロール）→ブラウザ又はアプリケーションのウィンドウ。
グローバル aria-*属性
  • aria-atomic→true、false。デフォルトはfalse。動的領域が変更された場合に、変更通知において、変更された部分のみを示すかどうかを指定。
  • aria-busy→true、false。デフォルトはfalse。trueである間は当該要素にかかる変更を無視して待機してもよく、この場合はfalseになったときに変更分をまとめて処理して提示してもよい。
  • aria-controls→指定した値のid属性値をもつ要素を制御するコントロールであることを示す。半角スペース区切りで複数指定可。
  • aria-current→page（現在のウェブページ）、step（現在のステップ）、location（現在の位置）、date（現在の日付）、time（現在の時刻）、true（現在の項目）、false（現在の項目を表さない）。デフォルトはfalse。コンテナ又は関連要素のセット内の現在の項目を表す要素であることを示す。
  • aria-describedby→当該要素について説明している要素のid属性値。半角スペース区切りで複数指定可。
  • aria-description→当該要素についての説明文。
  • aria-details→当該要素についての追加的説明部分となる要素のid属性値。半角スペース区切りで複数指定可。
  • aria-dropeffect→copy（オブジェクトを複製）、move（オブジェクトを移動）、link（オブジェクトへの参照を生成）、execute（ドラッグターゲットがサポートする機能を実行）、popup（他の機能を実行するためのポップアップメニューを表示）、none（実行機能なし）。半角スペース区切りで複数指定可。デフォルトはnone。ドラッグされたオブジェクトがドロップターゲットに投下される際にどんな機能が実行できるかを示す。
  • aria-flowto→ユーザーの裁量で当該要素を読み飛ばして進むことができる対象要素の選択肢を示すid属性値。半角スペース区切りで複数指定可。
  • aria-grabbed→true（ドラッグされている）、false（ドラッグ可能だが現在されてない）、undefined（ドラッグできない）。デフォルトはundefined。ドラッグアンドドロップ操作における当該要素の状態を示す。
  • aria-hidden→true、false、undefined（ユーザーエージェントで判定）。デフォルトはundefined。当該要素がアクセシビリティAPIに対して非公開かどうか（その結果として非表示かどうか）を示す。
  • aria-keyshortcuts→著者が当該要素にフォーカスをアクティブにする又は与えることを実装しているショートカットキーを示す文字列。
  • aria-live→off（フォーカスされない限り提示しない）、polite（読み上げの状況やユーザーの操作状況をみて適時のタイミングで提示する）、assertive（最優先ですぐに提示されるべき）。デフォルトはoff。動的領域が更新された場合の提示のタイミングを指定。
  • aria-owns→当該要素の子となる要素のid属性値。半角スペース区切りで複数指定可。要素の入れ子関係によらずに当該要素に係る親子関係を示すことができる。
  • aria-relevant→additions（アクセシビリティツリーに追加）、removals（アクセシビリティツリーから削除）、text（テキストコンテンツや代替テキストはアクセシビリティツリーの任意の子孫に追加）、all（左記のすべて）。動的領域に変更があった場合の取り扱いを指定。
  • aria-roledescription→要素のroleに関する人間可読な説明文。
  • aria-brailleroledescription→要素のroleに関する人間可読な簡潔な説明文（点字に変換したときに簡潔なものとなることを目的とする）。aria-roledescriptionがある場合のみ指定可。
  • aria-label→当該要素をラベル付けするテキスト。
  • aria-braillelabel→当該要素をラベル付けするテキストで、点字に変換することを意図したもの。
  • aria-labelledby→当該要素のラベルとなるべき要素のid属性値。半角スペース区切りで複数指定可。

roleにgenericが指定されている場合（デフォルト状態でそれに該当する場合も含む）は、下記の属性は指定不可。

  • aria-roledescription
  • aria-brailleroledescription
その他のaria-*属性
  • aria-activedescendant→子孫要素のid属性値。フォーカスがあたっているときに、現在アクティブな子孫要素を識別する。
  • aria-autocomplete→inline（直接自動入力してよい）、list（サジェストリストを示す要素を表示してよい）、both（サジェストリストを示す要素を表示してよく、そのうち一つを自動選択・自動入力してよい）、none（自動補完機能なし）。デフォルトはnone。テキストを入力する際の自動補完の方法を指定。
  • aria-checked→true（チェック状態となっている）、false（チェック状態となりうるが現在はなっていない）、mixed（混合モード）、undefined（チェック状態となりえない）。デフォルトはundefined。チェックボックス・ラジオボックス等のチェック状態を示す。
  • aria-colcount→テーブル、グリッド、ツリーグリッドにおける合計列数を指定する整数。
  • aria-colindex→テーブル、グリッド、ツリーグリッドにおける列の合計数に対して、当該要素の列インデックス・列位置を指定する整数。
  • aria-colindextext→aria-colindexの人間可読な代替テキスト。
  • aria-colspan→テーブル、グリッド、ツリーグリッドにおいて、セルがまたがる列数を指定する整数。
  • aria-disabled→true、false。デフォルトはfalse。当該要素が無効であるかどうか（それゆえに操作・編集が不能であるかどうか）を指定する。
  • aria-errormessage→当該要素のaria-invalidによるエラーに対してメッセージを提供する要素のid属性値。
  • aria-expanded→true（開）、false（閉）、undefined（開閉不能）。デフォルトはundefined。当該要素の開閉状態を示す。
  • aria-haspopup→menu、listbox、tree、grid、dialog、true（menuと同じ）、false（ポップアップなし）。デフォルトはfalse。当該要素がトリガーとなって生じるポップアップの種類を指定。
  • aria-invalid→grammar（文法違反）、spelling（綴り間違い）、true（制約検証エラー）、false（誤りなし）。デフォルトはfalse。アプリケーションによって期待されるフォーマットに適合しない入力値の種類等を示す。
  • aria-level→構造内における当該要素の階層を指定する整数。
  • aria-modal→true、false。デフォルトはfalse。表示されている要素がモーダルかどうかを指定する。
  • aria-multiline→true、false。デフォルトはfalse。テキストボックスが複数行入力コントロールかどうかを指定する。
  • aria-multiselectable→true、false。デフォルトはfalse。選択項目が複数選択可能かどうかを指定する。
  • aria-orientation→vertical（垂直）、horizontal（水平）、undefined（未定義）。デフォルトはundefined。当該要素の向きを指定する。
  • aria-placeholder→入力コントロールが値を持たない場合にユーザーを支援することを意図する短いヒントとなるテキスト。
  • aria-posinset→リスト項目又はツリー項目における要素の数又は位置を指定する整数。
  • aria-pressed→true（押されてる）、false（押すことができるが現在押されてない）、mixed（混合モード）、undefined（押すことができない）。デフォルトはundefined。トグルボタンの状態を示す。
  • aria-readonly→true、false。デフォルトはfalse。入力コントロールが編集不能であるかどうかを指定する（なお、編集不能ではあっても、無効ではない）。
  • aria-required→true、false。デフォルトはfalse。入力コントロールへの入力が必須であるかどうかを指定する。
  • aria-rowcount→テーブル、グリッド、ツリーグリッドにおける合計行数を指定する整数。
  • aria-rowindex→テーブル、グリッド、ツリーグリッドにおける行の合計数に対して、当該要素の行インデックス・行位置を指定する整数。
  • aria-rowindextext→aria-rowindexの人間可読な代替テキスト。
  • aria-rowspan→テーブル、グリッド、ツリーグリッドにおいて、セルがまたがる行数を指定する整数。
  • aria-selected→true（選択されている）、false（選択可能だが現在選択されてない）、undefined（選択不能）。デフォルトはundefined。選択項目たる当該要素が選択されているかどうかを示す。
  • aria-setsize→リスト項目又はツリー項目における項目数を指定する整数。
  • aria-sort→ascending（昇順ソート）、descending（降順ソート）、other（その他のソート）、none（ソートできない）。デフォルトはnone。テーブル又はグリッドにおけるソートを指定する。
  • aria-valuemax→範囲を規定するwidget類における最大値を指定する数字。
  • aria-valuemin→範囲を規定するwidget類における最小値を指定する数字。
  • aria-valuenow→範囲を規定するwidget類における現在値を指定する数字。
  • aria-valuetext→範囲を規定するwidget類における人間可読な代替テキスト。

名前付け：aria-label、aria-labelledbyは、アクセス可能な名前をつけるのに用いられる。

名前付け禁止：下記のroleが指定されている場合（デフォルト状態で下記のroleに該当する場合も含む）は、aria-label等による名前付けは禁止される。＊この場合は、aria-braillelabelの指定も禁止される。

  • caption
  • code
  • definition
  • deletion
  • emphasis
  • generic
  • insertion
  • mark
  • paragraph
  • strong
  • subscript
  • suggestion
  • superscript
  • term
  • time
  • presentation
  • none

２－２－４．Pointer Eventsの属性

Pointer Eventsでは、イベントハンドラ属性として下記の属性を追加。

  • onpointerover→ポインタが当該要素をホバーしたとき。
  • onpointerenter→ポインタが当該要素内（子孫要素を含む）に入ってきたとき。
  • onpointerdown→ポインタのボタンが作動状態になったとき。
  • onpointermove→他のポインタイベントを発生させずに、ポインタの状態が変化したとき。
  • onpointerup→ポインタのボタンが非作動状態になったとき。
  • onpointercancel→ポインタがキャンセルに値する状態となったとき。
  • onpointerout→ポインタが当該要素のホバーから外れたとき。
  • onpointerleave→ポインタが当該要素内（子孫要素を含む）から外れたとき。
  • ongotpointercapture→ポインタが当該要素に捕捉されたとき。
  • onlostpointercapture→ポインタが当該要素の捕捉から解放されたとき。

２－２－５．Touch Events - Level 2の属性

Touch Events - Level 2では、イベントハンドラ属性として下記の属性を追加。

  • ontouchstart→タッチ面に1以上のタッチ点が配置されたとき。
  • ontouchend→タッチ面から1以上のタッチ点が取り除かれたとき。
  • ontouchmove→タッチ面で1以上のタッチ点が移動したとき。
  • ontouchcancel→１以上のタッチ点が実装固有の方法で中断されたとき。

２－２－６．UI Eventsの属性

UI Eventsでは、イベントハンドラ属性として下記の属性を追加。

  • onfocusin→当該要素がフォーカスを得るとき。
  • onfocusout→当該要素がフォーカスを失うとき。
  • oncompositionstart→入力コントロール等において、IMEなどのテキスト変換システムが新しい変換セッションを開始したとき。
  • oncompositionupdate→入力コントロール等において、IMEなどのテキスト変換システムで制御中の変換セッションに新たな文字入力がなされたとき。
  • oncompositionend→入力コントロール等において、IMEなどのテキスト変換システムが変換セッションを終了又はキャンセルしたとき。

２－３．グローバル属性：イベントハンドラ属性

  • 属性値：妥当なジャバスクリプトのコードテキスト。
  • 意味・用法：イベントハンドラを設定する。
  • アクセシビリティ関連：マウス等による操作のみならず、キーボードによる操作も考慮したイベントハンドラを設定すべきである（Techniques for WCAG 2.1 : SCR2, SCR20, SCR35, F54）。
  • 私見・補足：当該要素に当該イベントが発生した場合に動作するジャバスクリプトを記述する。要素によっては絶対に発生しえないイベントもあるので、指定するときは注意すること。
  • 該当する属性は、下記のとおり。
    • onauxclick→ホイールボタンがクリックされたとき。
    • onbeforeinput→フォームコントロールに入力・変更がなされようとするとき。
    • onbeforematch→属性値がuntil-foundのhidden属性が指定されている要素が、レンダリングされようとするとき。
    • onbeforetoggle→ポップオーバー（popover属性を参照）の表示・非表示の状態が切り替わろうとするとき。
    • onblur→要素がフォーカスを失ったとき。
    • oncancel→dialog要素の処理で、キャンセルされたとき。
    • oncanplay→メディアが再生可能になったとき。
    • oncanplaythrough→現状の速度で読み込みを続ければ途切れることなくメディアを再生できるようになったとき。
    • onchange→入力コントロール等の入力等が変更されたとき。
    • onclick→クリックされたとき。
    • onclose→閉じられたとき。
    • oncontextmenu→ユーザーがコンテキストメニューを要求したとき。
    • oncontextlost→対応するCanvasRenderingContext2D又はOffscreenCanvasRenderingContext2D が失われたとき。
    • oncontextrestored→対応するCanvasRenderingContext2D又はOffscreenCanvasRenderingContext2D が回復したとき。
    • oncopy→クリップボードにコピーしたとき。
    • oncuechange→text track cueが変わったとき。
    • oncut→クリップボードにコピーしたうえで、対象を削除したとき。
    • ondblclick→ダブルクリックされたとき。
    • ondrag→要素がドラッグ操作されているとき。
    • ondragend→要素がドラッグ操作を終了されたとき。
    • ondragenter→要素上にドラッグされてきたとき。
    • ondragleave→ドラッグされたきたものが要素上を離れたとき。
    • ondragover→要素上にドラッグされているとき。
    • ondragstart→要素がドラッグ操作を開始されたとき。
    • ondrop→ドラッグされた要素がドロップされたとき。
    • ondurationchange→メディアの再生時間が変更されたとき（メタデータの取得時に発生）。
    • onemptied→メディアのバッファーを無にしたとき。
    • onended→メディアの再生が終わったとき。
    • onerror→接続・読み込み・実行などにエラーが発生したとき。
    • onfocus→要素がフォーカスを得るとき。
    • onformdata→form要素でフォーム送信するデータセットを構成しているとき。
    • oninput→フォームコントロールに入力・変更があったとき。
    • oninvalid→フォームの制約検証でエラー判定されたとき。
    • onkeydown→キーが押されたとき。
    • onkeypress→キーが押され開放されたとき。
    • onkeyup→キーが開放されたとき。
    • onload→要素が読込まれたとき。
    • onloadeddata→メディアリソースが再生可能状態となったとき。
    • onloadedmetadata→メディアリソースと字幕データが準備完了となったとき。
    • onloadstart→メディアリソースの読み込みを開始したとき。
    • onmousedown→マウスボタンが押されたとき。
    • onmouseenter→マウスポインタが入り込んだとき。
    • onmouseleave→マウスポインタが出て行ったとき。
    • onmousemove→要素上でマウスポインタが移動したとき。
    • onmouseout→マウスポインタが要素から外れたとき（移動先が子孫要素であっても該当する）。
    • onmouseover→マウスポインタが要素上に移動したとき（移動前が子孫要素であっても該当する）。
    • onmouseup→マウスボタンが開放されたとき。
    • onpaste→クリップボードから貼り付けたとき。
    • onpause→メディアの再生が一時停止されたとき。
    • onplay→メディアの再生が再開されたとき。
    • onplaying→遅延・停止状態だったメディアが再生再開可能状態となったとき。
    • onprogress→メディアリソースを断続的に読み込んでいるとき。
    • onratechange→メディアの再生速度が変更されたとき。
    • onreset→フォームがリセットされるとき。
    • onresize→サイズを変更したとき。
    • onscroll→要素がスクロールされるとき。
    • onscrollend→要素のスクロールが完了されたとき。
    • onsecuritypolicyviolation→Content Security Policy違反が発生したとき。
    • onseeked→メディアの指定された開始位置に移動したとき。
    • onseeking→メディアの指定された開始位置に移動中のとき。
    • onselect→入力コントロールにおいて、入力テキストに対する選択状態が調整されたとき。
    • onslotchange→slot要素の割当てノードが変更されたとき。
    • onstalled→メディアリソースの読み込みができなかったとき。
    • onsubmit→フォーム送信されるとき。
    • onsuspend→メディアリソースの読み込みを中断したとき。
    • ontimeupdate→メディアの再生位置が変わったとき（断続的に発生）。
    • ontoggle→details要素の開閉が切り替わったとき、又は、ポップオーバー（popover属性を参照）の表示・非表示が切り替わったとき。
    • onvolumechange→メディアの再生音量が変わったとき。
    • onwaiting→メディアの次のコマのダウンロード待ちのとき。
    • onwheel→要素上でホイールが回転したとき。

２－４．グローバル属性：data-*属性

  • 属性名の形式:data-*で、「*」の部分は、名前空間を持たない一文字以上の文字列でなければならず、「data-」の部分も含めて、XML-compatibleでなければならず、かつ、大文字の英文字を含んではならない。
  • 属性値：形式を問わない。
  • 意味・用法：独自のデータを格納する。この属性は、当該属性を使用するウェブサイトから独立したソフトウェアによる使用を意図しない。スクリプト等のライブラリの作成者は、HTML文書作成者が特定のdata-*属性を指定することを前提としたライブラリを作成することができる。この場合、属性名の衝突を避けるため、属性名にライブラリの名前を含むことが推奨される。
  • ユーザーエージェントに対する特記事項：当該属性及び属性値について（HTML文書作成者がスタイルシートやスクリプトなどで実装した機能以外の）いかなる機能も派生させてはならない。
  • 私見・補足：HTML文書作成者がスタイルシートやスクリプトやサーバーサイドプログラムなどで使用する独自のデータを格納しておくために使う。data-*属性を指定することを前提としたライブラリとしては、jQuery Mobileが典型例。

２－５．グローバル属性：その他

accesskey
  • 属性値：一文字。半角スペース区切りで複数指定可。
  • 意味・用法：要素を作動又はフォーカスするキーボードショートカットを設定するためのガイドとして、ユーザーエージェントによって使用される。
  • 私見・補足：フォーカス可能領域を持たない要素においては、無意味。属性値で指定されてるキーを押したら、該当の要素にアクセスできる。多くの実装では、特定のキーと一緒に押さないと機能しない→とほほのＷＷＷ入門 ＞ HTMLリファレンス ＞ accesskey=keyを参照。
  • 表示確認
    ソース
    
        <button accesskey="A">A</button>
    表示結果
autocapitalize
  • 属性値：下記のとおり。未指定又は空で、かつ、Autocapitalize-inheriting elementの場合は、所属フォームの状態を継承する。その他の未指定の場合のデフォルトは、ユーザーエージェントによる。非妥当値のデフォルトは、sentences
    • sentences→文頭を大文字化。
    • words→単語頭を大文字化。
    • characters→すべて大文字化。
    • none→自動では大文字化しない。
    • on→sentencesと同じ。
    • off→noneと同じ。
  • 意味・用法：入力や編集におけるアルファベット文字の自動大文字化の指定。
  • ユーザーエージェントに対する特記事項：通常のキーボードでの入力では動作しない（主として、仮想キーボードや音声での入力などの場合を想定しているため）。type属性値がurl、email、passwordのinput要素では、この属性の指定の有無及び属性値にかかわらず、自動大文字化は一切しない。特定の状況下では、この属性を無視してもよい。
  • 私見・補足：入力や編集が可能な要素でしか効果はない。日本語では用はない。
  • 表示確認
    ソース
    
      <label>autocapitalize例<textarea autocapitalize="sentences">he is a pen.</textarea></label>
    表示結果
autofocus
  • ブーリアン属性
  • 意味・用法：ウェブページ読み込み後に自動的にフォーカスするときに指定。同一dialog要素内で1個しか指定できない。同一のpopover属性付要素内で1個しか指定できない。同一HTML文書内（ただし、dialog要素内及びpopover属性付要素内を除く）で1個しか指定できない。
  • 私見・補足：フォーカス可能領域を持たない要素においては、無意味。実質的には、フォーム関連の要素でしか意味はなさそうではある。フォーム以外で使うなら、考えられるのは、縦長のページで特定の位置まで強制的にスクロールさせるような用法だろうか。
class
  • 属性値：半角スペース区切りの文字列。
  • 意味・用法：クラスを割り当てる。見た目を意味する文言ではなく、コンテンツの性質を表す文言を指定することが推奨される。
  • 私見・補足：一般的には、スクリプトやスタイルシートで使用する。当該要素の意味・役割・性質などを表す文言を指定することが推奨される。class属性値には意味がある値を指定するという考え方を推し進めて、class属性値でRDFaやMicrodataのようなことを可能にしようとするのが、microformatsである。
id
  • 属性値：「半角スペース文字、タブ文字、改行文字」以外の一文字以上の文字列。要素ツリーの中で一意でなければならない。
  • 意味・用法：その要素の一意識別子となる。属性値は単なる文字列であって、そこから特定の意味は導かれるべきではない。
  • 私見・補足：一般的にはスクリプトやスタイルシートで使用したり、リンク先の指定で使用したりする。一意識別子なので、同じHTML文書内で同じid属性値をもつ要素が複数あってはならない。
contenteditable
  • 属性値：true、plaintext-only（テキストのみ編集可）、falseのいずれか、空も可。空の場合は、trueと同等。未指定あるいは非妥当値の場合は、直近の祖先要素の状態を継承する。
  • 意味・用法：当該要素が編集可能かどうかを指定する。
  • WAI-ARIA：
    • この属性値にtrueが指定されている場合は、aria-readonly属性を指定すべきではない。
    • この属性値にtrueが指定されている場合は、aria-readonly属性値にtrueを指定してはならない。
  • 私見・補足：編集後の状態を保存したりするには、別途スクリプトによる操作が必要である。plaintext-onlyは、当該編集可能範囲にコピペしたときに、コピー元のスタイルまでコピーすることを防ぐ効果がある。
  • 表示確認
    ソース
    
        <div>編集不可能</div>
        <div contenteditable="true" style="height:1em">編集可能</div>
        <div>編集不可能</div>
    表示結果
    編集不可能
    編集可能
    編集不可能
dir
  • 属性値：ltr（左から右）、rtl（右から左）、autoのいずれか。
  • 意味・用法：当該要素の内容テキスト等の書字方向を指定する。
  • 下記の方向可能属性の属性値（おおむね、何らかの形でユーザーに提示される可能性があるものが該当するようだ）も、この属性による制御を受ける。
  • 私見・補足：unicodeのアルゴリズムでltr、rtlとなる言語については、デフォルトスタイルの:dir(ltr)疑似クラス、:dir(rtl)疑似クラスに該当して、dir属性値による指定はほとんど無視されるようだ（表示結果を参照）。そのような言語でdir属性値による指定を強制したい場合は、bdo要素と併用しなければならない。
  • 視覚系ブラウザのデフォルトとして期待されるCSSは、下記のとおり。 
    
    [dir]:dir(ltr) {direction: ltr;}
    [dir]:dir(rtl) {direction: rtl;}

    [dir=ltr i],
    [dir=rtl i],
    [dir=auto i] {
      unicode-bidi: isolate;
    }
  • 表示確認
    ソース
    
        <span dir="rtl">I am a pen.</span>
    表示結果
    I am a pen.
draggable
  • 属性値：true、falseのいずれか。未指定あるいは非妥当値のデフォルトは、各要素ごとにユーザーエージェントによる。
  • 意味・用法：当該要素がドラッグ可能かどうかを指定する。
  • アクセシビリティ関連：この属性が指定された要素には、非視覚系ブラウザ（又はアクセシビリティ支援技術）向けの説明のために、title属性も指定すべきである。
  • 私見・補足：ドラッグされた対象の扱い、ドラッグされた対象がドロップされる対象の扱いなどは、関連するイベントを通じてスクリプトで処理する。
  • 表示確認
    ソース
    
        ドラッグ可能な画像→<img src="./sample/draggable-img.gif" alt="ドラッグ可能な画像" draggable="true" title="ドラッグできる画像" id="dragimg" />
    表示結果
    ドラッグ可能な画像→ドラッグ可能な画像
hidden
  • 属性値：下記のとおり。空も可。空の場合は、hiddenと同等。非妥当値の場合のデフォルトは、hidden。
    • hidden→指定されている要素は、現在においては関連性がないこと、もはや存在してないものと扱うべきこと、又は、ユーザーによって直接アクセスされるのではなく他の部分（スクリプト等）から再利用されうる部分であることを意味する。当該要素及びその子孫をリンク等によって参照等してはならない。また、表示されうるものを一時的に隠すためにこの属性を使用してはいけない（それは存在しているものとして扱うべきであるから）。ただし、この属性が指定されている要素の子孫等は、スクリプトを用いて動作させることなどはできる（再利用されうる部分）。
    • until-found→当該要素はレンダリングされないが、その内部のテキスト等はページ内検索やページ内リンクなどによるアクセスの対象になる。ページ内検索やページ内リンクなどでアクセスされる場合は、この属性が削除されて、レンダリングされる。
  • 意味・用法：上記のとおり。
  • ユーザーエージェントに対する特記事項：当該属性が指定された要素をレンダリングしてはならない。
  • WAI-ARIA：この属性が指定されている場合は、aria-hidden属性を指定すべきではない。
  • 私見・補足：hiddenの場合は、ユーザーにとっては表示されること自体が無意味であるような部分に用いる、といったところだろうか。until-foundの場合は、ある種の遅延ロード機能。
  • 視覚系ブラウザのデフォルトとして期待されるCSSは、下記のとおり。 
    
    [hidden]:not([hidden=until-found i]):not(embed) {display: none;}
    [hidden=until-found i]:not(embed) {content-visibility: hidden;}
  • 表示確認
    ソース
    
        <div>見えるよ。</div>
        <div hidden="hidden">閲覧者には見えないはずだよ。</div>
    表示結果
    見えるよ。
inert
  • ブーリアン属性
  • 意味・用法：当該要素及びその子孫要素を不活性にする。
  • 私見・補足：選択したり操作したりといったことができなくなる。この状態は、原則として、スクリプトを用いないと解除できない。
  • 表示確認
    ソース
    
        <div inert="inert">不活性だからクリックできないリンク→<a href="0mokuji.html">目次に戻る</a></div>
    表示結果
    不活性だからクリックできないリンク→目次に戻る
inputmode
  • 属性値：下記のとおり。未指定あるいは非妥当値のデフォルトはユーザーエージェントによる。
    • none→仮想キーボードを表示すべきではない。
    • text→ユーザーの「地域」又は「使用言語」に応じた文字の入力が可能な仮想キーボードを表示すべきである。
    • tel→電話番号の入力が可能な仮想キーボードを表示すべきである。これには、「0」から「9」の数字、「#」、「*」のキーを含むべきである（ユーザーの「地域」又は「使用言語」に応じて、想定できるキーをさらに追加してもよい）。
    • url→ユーザーの「地域」又は「使用言語」に応じた文字の入力が可能な仮想キーボードを表示すべきである。これには、「/」や「.」などのURLの入力の補助となるキーを伴うべきである。
    • email→ユーザーの「地域」又は「使用言語」に応じた文字の入力が可能な仮想キーボードを表示すべきである。これには、「@」や「.」などのメールアドレスの入力の補助となるキーを伴うべきである。
    • numeric→数字の入力が可能な仮想キーボードを表示すべきである。
    • decimal→小数の入力が可能な仮想キーボードを表示すべきである。これには、ユーザーの「地域」又は「使用言語」に応じた数字、小数点文字などのキーを含むべきである。
    • search→検索のために最適化された仮想キーボードを表示すべきである。
  • 意味・用法：入力や編集において、最も有用な手段の種類を指定する。想定は、仮想キーボードの表示。
  • ユーザーエージェントに対する特記事項：当該属性をサポートすることができる（逆にいうと、サポートを義務付けられない）。
  • 私見・補足：入力や編集が可能な要素でしか効果はない。
  • 表示確認
    ソース
    
      <label>inputmode例<textarea inputmode="text">he is a pen.</textarea></label>
    表示結果
enterkeyhint
  • 属性値：下記のとおり。未指定あるいは非妥当値のデフォルトはユーザーエージェントによる。
    • enter→「改行」の旨を表示すべきである。
    • done→IMEにおける「確定」の旨を表示すべきである。
    • go→「移動」の旨を表示すべきである。
    • next→前の入力欄への移動である「次へ」の旨を表示すべきである。
    • previous→次の入力欄への移動である「前へ」の旨を表示すべきである。
    • search→「検索」の旨を表示すべきである。
    • send→「送信」の旨を表示すべきである。
  • 意味・用法：入力や編集において表示される仮想キーボードにおけるEnterキーに表示するラベルやアイコンの種類を指定する。
  • ユーザーエージェントに対する特記事項：当該属性をサポートすることができる（逆にいうと、サポートを義務付けられない）。
  • 私見・補足：入力や編集が可能な要素でしか効果はない。
  • 表示確認
    ソース
    
      <label>enterkeyhint例<textarea inputmode="text" enterkeyhint="done">he is a pen.</textarea></label>
    表示結果
is
  • 属性値：既存要素の機能等を拡張して作成したカスタム化組込要素の要素名の文字列。
  • 意味・用法：当該要素をカスタム化組込要素として識別する。属性値をスクリプト等で変更しても何も起こらない。
  • 私見・補足：拡張の元となった既存要素にこの属性を指定して、作成したカスタム化組込要素が持つ機能等を取り込む。
  • 表示確認
    ソース
    
      <script>
        class AlertButton extends HTMLButtonElement{
          constructor(){
            super();
            this.addEventListener("click", () => {
              var xx = this.textContent;
              alert(xx);
            });
          }
        }
        customElements.define("x-alertbutton", AlertButton, {extends: "button"});
      </script>
      <button is="x-alertbutton">このテキストがアラートされるよ</button>
    表示結果
lang
  • 属性値：BCP47の言語コード、空も可。未指定の場合は、直近の祖先要素の指定を継承する。
  • 意味・用法：当該要素の内容テキストの主要言語を指定する。空の場合は、主要言語が不明であることを意味する。
  • アクセシビリティ関連：html要素にlang属性を指定してHTML文書の主要言語を明確化すべきである（Techniques for WCAG 2.1 : H57）。主要言語と異なる言語の部分がある場合は、当該部分の要素にlang属性を指定して当該言語を明らかにすべきである（Techniques for WCAG 2.1 : H58）。
  • 私見・補足：これはあくまで自然言語を指定する属性である。機械言語であるプログラミングコードなどに指定できるlang属性値はないはず。XML構文では、このlang属性は解釈されない可能性がありそうな気もするので、指定するにしても同時にxml:lang属性も指定しておいた方がよいかもしれない（属性値は同一にしておく）。
nonce
  • 属性値：Content Security Policyの暗号ノンスとなる文字列。
  • 意味・用法：Content Security Policyが使用する暗号ノンスを表す。
  • 私見・補足：暗号ノンスは一回限りの使い捨てであるため、属性値はサーバーサイドプログラムなどによってつど動的に生成して指定することが想定されている。
popover
  • 属性値：下記のとおり。空も可。空の場合は、autoと同等。非妥当値のデフォルトはmanual。
    • auto→自動状態。当該ポップオーバーが開いたとき、他のポップオーバーは閉じられる。簡易非表示（エスケープキーの押下や、当該ポップオーバーの外側領域のクリックによって、当該ポップオーバーが閉じられる機能）あり。
    • manual→手動状態。当該ポップオーバーの開閉が、他のポップオーバーを閉じることはない。簡易非表示なし。
  • 意味・用法：この属性を指定した要素は、原則として初期状態が非表示状態のポップオーバーとなる。表示状態になるまではレンダリングされない。表示状態になった場合は、ポップオーバーとして他の要素より前面に表示される。
  • 私見・補足：汎用のポップオーバーを作成するためのもの。見た目や動きは定められているが、意味や役割は不明瞭である。意味的にdialog要素に該当するものについては、この属性ではなく、dialog要素を使用すべきだろう。popovertarget属性及びpopovertargetaction属性が指定されたbutton要素又はinput要素で、表示・非表示の動作を制御することができる。
  • 視覚系ブラウザのデフォルトとして期待されるCSSは、下記のとおり。 
    
    [popover] {
      position: fixed;
      inset: 0;
      width: fit-content;
      height: fit-content;
      margin: auto;
      border: solid;
      padding: 0.25em;
      overflow: auto;
      color: CanvasText;
      background-color: Canvas;
    }
    :popover-open::backdrop {
      position: fixed;
      inset: 0;
      pointer-events: none !important;
      background-color: transparent;
    }
    [popover]:not(:popover-open):not(dialog[open]) {
      display:none;
    }
    dialog:popover-open {
      display:block;
    }
  • 表示確認
    ソース
    
        <button type="button" popovertarget="pop" popovertargetaction="toggle">ポップオーバーを表示・非表示</button>
        <div popover="auto" id="pop">ポップオーバー</div>
    表示結果
    ポップオーバー
slot
  • 属性値：slot要素のname属性値。
  • 意味・用法：slotを割り当てるために使用される。
  • 私見・補足：DOMのshadow treeの仕組みで、name属性をもつslot要素が、当該name属性値と同じ値をもつslot属性が指定された要素に置き換わって、レンダリングされる。
spellcheck
  • 属性値：true、falseのいずれか。空も可。空の場合は、trueと同等。未指定あるいは非妥当値の場合のデフォルトは、各要素ごとにユーザーエージェントによる。
  • 意味・用法：当該要素の編集可能な内容テキストや入力値などの綴りや文法をチェックするかどうかを指定する。
  • ユーザーエージェントに対する特記事項：綴りや文法のチェック機能をサポートすることができる（逆にいうと、サポートを義務付けられない）。下記のもののみチェック可能だとみなさなければならない。つまり、当該要素のspellcheck属性値の状態が（指定、デフォルト又は祖先要素からの継承で）trueであったとしても、下記のものがないなら、何もチェックはされない。
    • type属性値がtext、search、url、又はemailであり、入力が可能な状態のinput要素の入力値
    • 入力が可能な状態のtextarea要素の入力値
    • contenteditable属性によって編集が可能になっている要素の内容テキスト
    • contenteditable属性によって編集が可能になっている要素の編集可能な属性値のテキスト
  • 私見・補足：ついでに正しい綴りをサジェストしてくれればいいのだが、そこまで高性能な実装をしているユーザーエージェントは少ないようである。
  • 表示確認
    ソース
    
        <label>spellcheck例1<textarea lang="ja" spellcheck="true">He gos Amerca</textarea></label>
        <label>spellcheck例2<textarea lang="en-US" spellcheck="true">He gos Amerca</textarea></label>
    表示結果

    当該要素のlang属性の状態が日本語等である場合には機能しないブラウザもあるようである。

style
  • 属性値：CSS Style Attributesで定義されている値（妥当なCSSのコードテキスト）。
  • 意味・用法：当該要素に適用するスタイルシートを指定する。この属性を使用して、コンテンツの表示・非表示を切り替えたり、HTML文書に含まれていないという意味を伝えようとしたりすることは、非準拠である。
  • 私見・補足：当該要素が現在においては関連性がないことやもはや存在してないものと扱うべきことを伝えたいのであれば、hidden属性を使用する。
tabindex
  • 属性値：下記のとおり。
    • 0→クリックフォーカス可能。連続的フォーカスナビゲーションで到達可能。順序はDOMアンカー順による。
    • 負の整数→クリックフォーカス可能。連続的フォーカスナビゲーションで到達不能。
    • 0より大きい整数→クリックフォーカス可能。連続的フォーカスナビゲーションで到達可能。数値はその順序を示す（0又は未指定のものより優先で、同値同士のものは、DOMアンカー順による）。
  • 非妥当値の場合のデフォルトは、下記の場合は0で、その他の場合は-1
  • 意味・用法：当該要素がクリックフォーカス可能であると想定されていることを表し、連続的フォーカスナビゲーションを使用して到達可能であると想定されるかどうかを指定し、及び連続的フォーカスナビゲーションにおける当該要素の順序を示唆する。
  • ユーザーエージェントに対する特記事項：未指定の場合において、クリックフォーカス可能であるか否か、連続的フォーカスナビゲーションを使用して到達可能であるか否か、及びその順序のデフォルトは、各要素ごとにプラットフォーム（オペレーティングシステムとかブラウザとか）のルールによるが、下記の要素については、クリックフォーカス可能であり、かつ、連続的フォーカスナビゲーションで到達可能とすることが示唆される。
  • アクセシビリティ関連：ユーザーを混乱させないために、連続的フォーカスナビゲーションの順序と、ユーザーがそれらの（主として入力コントロールとなる）要素を操作すべき順序と、レンダリングされたそれらの要素の見た目の順序は、一致させるべきである（Techniques for WCAG 2.1 : G59, F44）。
  • 私見・補足：フォーカス可能領域を持たない要素においては、無意味。一般的には、連続的フォーカスナビゲーションにおいてはタブキーでフォーカスする。
  • 表示確認
    ソース
    
        <button tabindex="2">2</button>
        <button tabindex="1">1</button>
    表示結果
title
  • 属性値：任意のテキスト。未指定の場合は、原則として、直近の祖先要素の指定を継承する。
  • 意味・用法：当該要素の補足情報を表す。
  • 下記の場合は、単なる補足情報ではなく特殊な意味及び取り扱いをもつ。
    • link要素でrel属性値がstylesheetのものに指定する場合は、代替スタイルシートのセットを定義することとなる。未指定の場合も、祖先要素の指定を継承しない。
    • 上記以外のlink要素に指定する場合は、リンクのタイトルを与える。未指定の場合も、祖先要素の指定を継承しない。
    • style要素に指定する場合は、代替スタイルシートのセットを定義することとなる。未指定の場合も、祖先要素の指定を継承しない。
    • dfn要素に指定された場合は、その属性値が定義語となる。未指定の場合も、祖先要素の指定を継承しない。
    • abbr要素に指定する場合は、当該要素の内容テキストの非省略表記を属性値としなければならない。
    • pattern属性付きinput要素に指定する場合は、当該pattern属性が指定する検証パターンを説明する記述を属性値としなければならない。
  • ユーザーエージェントに対する特記事項：要素が補足情報をもっている場合は、その旨をユーザーに通知すべきである。
  • アクセシビリティ関連：現状では多くのユーザーエージェントがアクセシビリティを有する方法でこの属性による補足情報を提示してないので、現在においては補足情報をこの属性だけに依存することは推奨されない。
  • 私見・補足：すべてのユーザーが容易にtitle属性値にアクセスできるわけでもないので、必ず読んでほしいような重要情報は別にテキストを起こすべきだろう。
  • 表示確認
    ソース
    
        <span title="補足説明だよ">視覚系ブラウザの多くの実装では、マウスを乗せるとツールチップで補足説明が出るようだ。</span>
    表示結果
    視覚系ブラウザの多くの実装では、マウスを乗せるとツールチップで補足説明が出るようだ。
translate
  • 属性値：yes、noのいずれか、空も可。空の場合は、yesと同等。未指定あるいは非妥当値の場合は、直近の祖先要素の指定を継承する（祖先要素に指定がない場合は、yesと同等）。
  • 意味・用法：当該要素の内容テキスト等を翻訳させるか否かを指定する。
  • 下記の翻訳可能属性の属性値（おおむね、何らかの形でユーザーに提示される可能性があるものが該当するようだ）も、この属性による制御を受ける。
    • th要素のabbr属性値。
    • area要素、img要素及びinput要素のalt属性値。
    • name属性が指定されているmeta要素のcontent属性値（name属性値の定義等により、それが翻訳可能だと知られているものに限る）。
    • a要素及びarea要素のdownload属性値。
    • optgroup要素、option要素及びtrack要素のlabel属性値。
    • input要素及びtextarea要素のplaceholder属性値。
    • type属性値にbutton又はresetが指定されているinput要素のvalue属性値。
    • iframe要素のsrcdoc属性値（実際に翻訳対象となるのは、インラインフレーム内のHTML文書として展開されたときに、当該HTML文書内の各要素の内容テキスト及び翻訳可能属性値となる部分）。
    • lang属性値。
    • style属性値（実際に翻訳対象となるのは、CSSのcontentプロパティの値など、主に任意のテキストを指定する部分）。
    • title属性値。
    • 関連仕様で翻訳可能だと規定されている属性の属性値。
  • 私見・補足：主として、ウェブページが機械翻訳される場合を想定。翻訳させたくない固有名詞や特殊な単語などにnoを指定するのが主な用法になると思われる。lang属性値がどんなふうに翻訳されるのかは、よく分からない。
writingsuggestions
  • 属性値：下記のとおり。空も可。空の場合は、trueと同等。未指定の場合は、直近の祖先要素の指定を継承する（祖先要素もすべて未指定なら、true）。非妥当値の場合のデフォルトは、true
    • true→ユーザーエージェントは、サジェスト機能を提供すべきである。
    • false→ユーザーエージェントは、サジェスト機能を提供すべきではない。
  • 意味・用法：フォームコントロール等における入力値のサジェスト機能の提供の適否を、ユーザーエージェントに対して示唆する。下記の要素でのみ機能する。
    • type属性値がtext、search、tel、url、又はemailであり、入力が可能な状態のinput要素
    • 入力が可能な状態のtextarea要素
    • contenteditable属性によって編集が可能になっている要素
  • 私見・補足：datalist要素でサジェスト候補を指定するものではなく、ユーザーエージェントが独自に保持しているデータ等を元にしたサジェスト機能のことを指しているものと思われる。
Microdataの属性

Microdataは、HTML文書中（head要素中に限らず）にメタデータを埋め込むための仕様。HTML Living Standardの中で規定されている。

Microdataでは、下記の属性が使える。

  • itemscope→原則として、当該属性を指定された要素の自身及び子孫要素で、アイテム群を構成する。
  • itemtype→アイテムの型を定める語彙定義集を指定するURL。基本的な語彙定義集は、schema.orgにそろっている。
  • itemprop→アイテムの定義されているプロパティ名を示す文字列。
  • itemid→アイテムのグローバル識別子を示すURL
  • itemref→他の要素のid属性値を指定することによって、itemscope属性指定要素の子孫外の当該要素も、アイテム群構成の対象とすることができる。
  • itemscope属性が指定されてない要素に、itemtype属性、itemid属性、itemref属性は指定できない。
  • itemtype属性が指定されてない要素に、itemid属性は指定できない。

なお、各アイテムの値は、itemprop属性が指定されている要素に応じて、下記のものである（該当するものがない場合は、値は空となる）。

３．内容モデルと分類

３－１．内容モデル

内容モデル（content model）は、当該要素の内容に関する規定であり、原則として当該要素の子要素として許されるものは何かに関する規定である。

許される子要素を個別に列挙するより、カテゴリーでまとめて示す場合が多い（許される子要素が狭く限定されている要素は、当該子要素を列挙するしかやりようがないが）。

３－２．カテゴリー

前提

一つの要素は、複数のカテゴリーに属することが多い。

また、ある属性の有無によって、属するカテゴリーが決まる場合もある。

どのカテゴリーにも属さない要素もある。

Metadata content
Sectioning content
  • 意味・用法：header要素やfooter要素が支配する範囲を定義する要素。
  • 私見・補足：実質的には見出しが支配する範囲を設定する要素でもある。また、その適切な入れ子関係によりHTML文書を階層的に構造化する要素でもある。Heading contentで見出しをつけることができないような範囲をSectioning contentでくくるのは、適切な構造化とは思われない。Heading contentによる見出し付けは当たり前であって、しない方が例外だと思っておくぐらいでちょうどいい。
  • 所属する要素は下記のとおり。
Heading content
Flow content
Phrasing content
Embedded content
Interactive content
Form-associated element
Listed element
Submittable element
Resettable element
Labelable element
Autocapitalize-inheriting element
Palpable content
Script-supporting content
  • 意味・用法：それ自体では何も表さない（それゆえに、レンダリングもされない）が、スクリプトをサポートする要素。
  • 私見・補足：スクリプトを組み込む要素、及び、スクリプトで用いられるテンプレートやデータを用意する要素。
  • 所属する要素は下記のとおり。
Media element
  • 意味・用法：HTMLMediaElementオブジェクト（本仕様においては、audio要素及びvideo要素）は、単にMedia elementとして知られている。
  • 私見・補足：HTML Living Standardでは、厳密にはカテゴリーとして規定されてはいないが、上記のように言及されており、個別の要素の内容モデル等の説明でこの言葉が出てくることもある。
  • 所属する要素は下記のとおり。

３－３．Transparent content model

３－４．Table model

  • 意味・用法：テーブルに関連する要素及びその属性は、Table modelを構成する。詳細は下記のとおり。
    • 0≦x<xwidth、0≦y<yheightの(x,y)座標で構成される二次元グリッド上のスロットに、（td要素やth要素で表される）セルが並ぶ。
    • colspan属性やrowspan属性をもつセルは、複数のスロットをまたぐ1セルとなる。
    • 2個のセルが1個のスロットを共有した場合は、エラーである。
    • 行は、tr要素で表される。
    • 列は、col要素で表されるが、それがない場合は暗黙の列となる。
    • すべての行が、必ず行グループ（thead要素、tfoot要素、tbody要素で表される）に属するとは限らない。
    • すべての列が、必ず列グループ（colgroup要素で表される）に属するとは限らない。
    • 行グループは、互いに重なり合うことはない。
    • 列グループは、互いに重なり合うことはない。
    • 1個のセルは行グループ間をまたぐことができない。
    • 1個のセルは列グループ間をまたぐことができる。
    • 各行のセルが占有するスロット数が各行間で一致しない場合は、そのうちの最大値がxwidthとなる。
    • 各列のセルが占有するスロット数が各列間で一致しない場合は、そのうちの最大値がyheightとなる。
    • caption要素は、テーブルのキャプションとなる。
  • 私見・補足：具体的なレンダリングは、各要素の「視覚系ブラウザのデフォルトとして期待されるCSS」に基づき、CSS table modelによる。
  • 構成する要素は下記のとおり。

３－５．Void element

  • 意味・用法：（HTML構文では終了タグがないため、原理的に）内容をもつことができない要素。タグの取り扱いは、下記のとおり。
    • XML構文では、開始タグを<tag />（後方互換性のために「/」の前に半角スペースを入れる）で閉じるか、終了タグを入れて<tag></tag>で閉じる。ただし、後者は、後方互換性の観点からは避けた方がよい。
    • HTML構文では、開始タグ<tag>単独で終了タグはなしが原則だが、HTML Living Standardでは開始タグを<tag />（後方互換性のために「/」の前に半角スペースを入れる）で閉じることも可。
  • 私見・補足：HTML Living Standardより前のHTML仕様では、Empty elementとされていたが、日本語訳は従前と変わらず「空要素」が用いられることが多いようだ。なお、余談であるが、Void elementでない要素（Foreign elementを除く）の内容がたまたま空だったとしても、HTML構文では、終了タグを省略して開始タグを<tag />で閉じてはいけない（XML構文では不可ではないものの、後方互換性の観点からは、避けた方がよい）。
  • 該当する要素は下記のとおり。

３－６．Foreign element

  • 意味・用法：SVGの名前空間に属する要素、及び、MathMLの名前空間に属する要素。これらについては、それぞれ、SVG仕様、MathML仕様によって定義される。
  • 私見・補足：それぞれの仕様によって定義されるので、HTML Living Standardに特に明記がない限りは、HTML Living Standardのルールが及ぶことがありうるのは、<svg>タグ、<math>タグまでで、その内容には及ばない。<svg>タグ自身、<math>タグ自身にも、HTML Living Standardのルールはほとんど通じない。xmlns属性に関するものを除いて、HTML Living Standardのグローバル属性及びその関連ルールは、Foreign elementには適用なし。
  • 該当する要素は下記のとおり。

４．文字エンコーディング

HTML Living Standardでは、HTML文書の文字エンコーディングを指定する場合は、utf-8でなければならない。

マークアップジェネレーターに対する規定：新規作成HTML文書の文字エンコーディングのデフォルトをutf-8としなければならない。

私見・補足：HTML文書の文字エンコーディングを指定する場合以外において、日本語で想定できるのは、utf-8、euc-jp、shift_jis、iso-2022-jpぐらいだろう。

次節以下では、HTML文書の文字エンコーディングの指定方法について記述する。

４－２．HTTPヘッダによる文字エンコーディング指定

htaccessファイルに所定の設定をすればよい。サーバの設定ファイルを直接修正できるなら、そっちで設定することも可能。

この方法が基本だが、htaccessファイルを設定できないレンタルサーバーでは不可能だし、ローカルファイルを直接ブラウザで読み込んだ場合はHTTPヘッダ送信はされないので不可能。

htaccessファイル設定パターン１

      AddType "text/html; charset=utf-8" .html

指定内容→拡張子がhtmlのファイルのMIME typeはtext/htmlで、文字エンコーディングはutf-8

htaccessファイル設定パターン２

      AddType "application/xhtml+xml; charset=utf-8" .xhtml

指定内容→拡張子がxhtmlのファイルのMIME typeはapplication/xhtml+xmlで、文字エンコーディングはutf-8

４－３．meta要素による文字エンコーディング指定

meta要素の所定の属性を用いる二つの指定方法があるが、二つの方式を同一HTML文書内に同時に指定することは不可。

この指定はHTML文書の先頭から1024バイト内でしなければならない（head要素の最初の子要素とすれば、間違いはなかろう）。

meta要素のcharset属性による指定

      <head>
        <meta charset="utf-8">
      </head>

XML構文では、この方法による指定は禁止はされないが、効果はない。

meta要素のhttp-equiv属性による指定

      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
      </head>

これは、HTML4等からの移行を考慮した互換方式。

XML構文では、この方法による指定は禁止である。

４－４．XML宣言による文字エンコーディング指定

XML構文では、XML宣言によって指定する。

ただし、文字エンコーディングがutf-8の場合は、省略可能。

XML宣言による指定方法

      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE html>
      <html>

４－５．BOMによる文字エンコーディング指定

utf-8を含むunicode系の文字エンコーディングなら、ファイルの先頭にBOMといわれる不可視のコードを含めることで、指定できる。

５．スタイルシート

５－１．規定のスタイルシート言語

HTML Living Standardでは、スタイルシート言語として、text/cssしか使用できない。

link要素のrel属性値にstylesheetを指定し、href属性値にスタイルシートファイルのURLを指定する（「スタイルシート指定例１」を参照）。

title属性を指定し、rel属性値にさらにalternateを指定することで、代替スタイルシートのセットを指定できる（「スタイルシート指定例１」を参照）。

スタイルシート指定例１

    <head>
      <link rel="stylesheet" href="kihon.css">
      <link rel="stylesheet" href="default.css" title="代替セット">
      <link rel="alternate stylesheet" href="alternate.css" title="代替セット">
    </head>
  • title属性を指定してないkihon.cssは常に適用される。
  • title属性値に同じ値を指定したdefault.cssとalternate.cssは、代替スタイルシートのセットとなる。
  • 代替セットのうち、rel属性値にalternateを指定してないdefault.cssは、初期状態で適用される。
  • 代替セットのうち、rel属性値にalternateを指定したalternate.cssは、初期状態では適用されない。
  • ユーザーがブラウザの機能等でalternate.cssの適用を選択したときは、alternate.cssが適用され、default.cssは不適用となる。

５－３．style要素によるスタイルシートの埋め込み

style要素の内容に、スタイルシートのコードテキストを記載する（「スタイルシート指定例２」「スタイルシート指定例３」「スタイルシート指定例４」を参照）。

HTML構文では、旧式のユーザーエージェントでコードテキストが表示されてしまわないように、内容をコメントの中に入れるという方法を用いることがある（「スタイルシート指定例３」を参照）。しかし、XML構文では、コメントの中に入れると本当にコメントとして解釈され、スタイルシートとして認識されなくなってしまう。

そこで、XML構文では、スタイルシートのコードテキストをCDATAセクションとする（「スタイルシート指定例４」を参照）。

しかし、CDATAセクションは旧式ブラウザではうまく解釈されずに不具合が出る場合がある。

また、HTML Living Standardでは、「HTML構文においては、Foreign elementの内部においてのみ、CDATAセクションが使用できる」という趣旨の記述も見られるので、HTML構文とXML構文のいずれでも準拠を目指すなら、これも使えない。

このようにいろいろと面倒なので、link要素による外部スタイルシートの読み込み方式の方が楽。

link要素と同様に、title属性指定によって代替スタイルシートのセットを構成することが可能。

スタイルシート指定例２

    <head>
      <style>
        datalist {display: none}
      </style>
    </head>
スタイルシート指定例３

    <head>
      <style>
      <!--
        datalist {display: none}
      -->
      </style>
    </head>
スタイルシート指定例４

    <head>
      <style>
      <![CDATA[
        datalist {display: none}
      ]]>
      </style>
    </head>

５－４．style属性によるスタイル指定

style属性値に、スタイルシートのコードテキストを記載する（「スタイルシート指定例５」を参照）。

この方法は、HTML Living Standardのニュアンス的にはあまり推奨されてない感じ。特に、コンテンツの表示・非表示の切り替えのためや、ウェブページを構成する部分には含まれないという意味を伝えるために、これを使用することは非準拠とされている。

スタイルシート指定例５

    <span style="color:red">xxx</span>

５－５．HTML Living Standardの新要素に対するスタイル

HTML Living Standardの新要素は、未対応ブラウザにとっては未知の要素なので、デフォルトスタイルがないということになる。

よって、適切なスタイルをあてておかないと、未対応ブラウザでの表示が不恰好になることがある。

特に、{display: block;}が適切と思われる要素や表示されたら不恰好な要素に留意すること。

６．準拠チェッカー

準拠チェッカー（conformance checker）は、マークアップが仕様に準拠しているか否かをチェックするソフトウェア又はウェブサービスである。

HTML文書作成者向けの仕様に準拠してないものはエラーとして判定するのが基本であるが、ごく一部の例外として「エラーとはせずに警告にとどめる」ことが許容されている場合がある。ただし、許容されているだけであって、警告にとどめずにエラーと判定する準拠チェッカーがあっても、それはHTML Living Standard違反の準拠チェッカーというわけではない。また、それらを警告にとどめる場合であっても、HTML文書全体で警告事項も含めて全く何のエラーもない場合と、HTML文書全体で警告事項以外のエラーはないが警告事項はある場合とを、区別するように義務付けている。

さらに、img要素のalt属性の欠如判定では、一定の場合には明らかなエラーをスルーすることもありとされている。ただし、これについてもエラーと判定する準拠チェッカーがあっても、それはHTML Living Standard違反の準拠チェッカーというわけではない。

HTML Living Standard対応の準拠チェッカーは、以下のとおり。

７－１．雑多な列記

これらの仕様による属性については、グローバル属性：関連仕様の属性も参照。

７－２．WAI-ARIA

ウェブアプリケーション等のアクセシビリティを確保するための仕様。role属性やaria-*属性を規定している。

仕様は、下記を参照。

当サイトの各要素ページのWAI-ARIA部分の記載は、原則としてARIA in HTMLのEditor's Draftによる（ただし、Digital Publishing WAI-ARIA Module 1.1関連のものは、省いてる）。

この仕様による属性については、WAI-ARIAの属性も参照。

７－３．RDFa

HTML文書中（head要素中に限らず）にメタデータを埋め込むための仕様。

もともとはXHTMLを含むXML文書用の仕様だったが、HTML構文でも使用できるような仕様として策定されたのが、HTML+RDFaである。さらに、それを簡略化したRDFa Liteも策定された。

仕様は、下記を参照。

この仕様による属性については、RDFaの属性、RDFa Liteの属性も参照。

７－４．microformats

class属性やa要素等のrel属性等を用いて、HTML文書中（head要素中に限らず）にメタデータを埋め込む試み。

class属性を用いるものは、MicrodataやRDFaのやり方に似通っている部分がある。

仕様は、下記を参照。

７－５．Accessible Name and Description: Computation and API Mappings

仕様は、下記を参照。

「アクセス可能な名前」（Accessible Name）についての規定がある。

「アクセス可能な名前」については、下記にもより具体的な要素に焦点を当てた規定がある。

７－６．Techniques for WCAG 2.1

アクセシビリティの仕様であるWeb Content Accessibility Guidelines (WCAG) 2.1の基準を満たすための達成方法のガイダンス。

仕様は、下記を参照。

８．属性及び属性値に関する雑多な参照

８－１．ブーリアン属性

当該属性があるだけでtrue状態、なければfalse状態と判定される。

当該属性を指定する場合は、その属性値は空か属性名と同じ文字列かのいずれかを指定する。

HTML構文の場合は、属性値が空の場合は「=""」部分の省略が可能なので、属性名だけでもＯＫ

例えば、ブーリアン属性たるinert属性の場合、

inert="inert"、inert=""、inertのいずれかの形式で指定すれば（最後の省略表記形式は、XML構文では不可）、true状態と判定され、

属性がなければ、false状態と判定される。

inert=""は、HTML Living Standardで初めて明記された形式だが、値が空でもtrue状態であり、false状態を意味しないので、注意すること。

８－２．BCP47の言語コード

例：ja（日本語）、en（英語）

参考：IETF言語タグ（ウィキペディア日本語版）

８－３．MIME type

主な例

  • application/xhtml+xml
  • application/xml
  • text/html
  • text/css
  • text/javascript
  • image/gif
  • image/jpeg
  • image/png
  • image/svg+xml
  • audio/mp4
  • audio/mpeg
  • audio/ogg
  • audio/webm
  • video/mpeg
  • video/mp4
  • video/ogg
  • video/webm

参考：Multipurpose Internet Mail Extensions（ウィキペディア日本語版）

参考：Media type（ウィキペディア英語版）

８－４．ウィキ方式による属性値の策定

rel属性値のその他→Microformats wiki existing-rel-values pageで提案され、かつ、拒絶されてなく、かつ、使うべきでないとされてない値。

準拠チェッカーに対する規定：rel属性値については、上記ウィキで策定されている属性値を参照してチェックしなければならない。

meta要素のname属性値のその他→MetaExtensionsで提案され、かつ、拒絶されてない値。

８－５．autocomplete属性値のその他

半角スペース区切りで、以下の文字列。ユーザーエージェントは、記録している情報又はユーザーが事前に登録している情報の中から、下記の文字列が示唆する意味・分類に合致するテキストを当該入力コントロールに自動補完すべきである。

ただし、type属性値がhiddenのinput要素の場合は送信値を変更させることはなく、送信値が下記の文字列が示す意味・分類を有することを示すのみである。

  1. 任意で、section-**（「**」の部分は、大文字小文字を区別しない半角英数字）→同じ値が指定された入力コントロールのグループは、関連する一連のものであることを示す。
  2. 上記に続いて、任意で、次のいずれか。
    • shipping→商品配送先に関するもの。
    • billing→代金請求先に関するもの。
  3. 上記に続いて、次のＡ又はＢのうち、いずれか。
    • Ａ：入力コントロールの種類による制限に反しない限り、次のいずれか。
      • name→人名。
      • honorific-prefix→前付け敬称。
      • given-name→氏名のうちの名。
      • additional-name→ミドルネーム。
      • family-name→氏名のうち氏。
      • honorific-suffix→後付け敬称。
      • nickname→愛称。
      • username→ユーザーネーム。
      • new-password→新しいパスワード。
      • current-password→現在のパスワード。
      • one-time-code→一度限りのパスワード。
      • organization-title→肩書き。
      • organization→組織名。
      • street-address→住所。日本でいえば、市区町村名のあとの部分のレベル。
      • address-line1→住所。日本でいえば、市区町村名のあとの部分を三分割した場合の上位レベル。
      • address-line2→住所。日本でいえば、市区町村名のあとの部分を三分割した場合の中位レベル。
      • address-line3→住所。日本でいえば、市区町村名のあとの部分を三分割した場合の下位レベル。
      • address-level4→行政区域。日本でいえば、住所の末尾レベル。
      • address-level3→行政区域。日本でいえば、市区町村名に続く町名・字名レベル。
      • address-level2→行政区域。日本でいえば、市区町村レベル。
      • address-level1→行政区域。日本でいえば、都道府県レベル。
      • country→国コード。
      • country-name→国名。
      • postal-code→郵便番号。
      • cc-name→カード払い者のフルネーム。
      • cc-given-name→カード払い者の氏名のうち名。
      • cc-additional-name→カード払い者のミドルネーム。
      • cc-family-name→カード払い者の氏名のうち氏。
      • cc-number→カード払い者のカード番号。
      • cc-exp→カード払い者のカード有効期限。
      • cc-exp-month→カード払い者のカード有効期限のうち月。
      • cc-exp-year→カード払い者のカード有効期限のうち年。
      • cc-csc→カード払い者のカードのセキュリティコード。
      • cc-type→カード払い者のカードの種類。
      • transaction-currency→取引通貨の種類。
      • transaction-amount→取引の金額。
      • language→言語の種類。
      • bday→誕生年月日。
      • bday-day→誕生年月日のうち日。
      • bday-month→誕生年月日のうち月。
      • bday-year→誕生年月日のうち年。
      • sex→性別。
      • url→連絡先URL
      • photo→写真・アイコン・画像その他連絡先にかかるイメージのURL
    • Ｂ：半角スペース区切りで、以下の文字列。
      1. 任意で、次のいずれか。
        • home→自宅。
        • work→職場。
        • mobile→携帯連絡手段。
        • fax→ファックス。
        • pager→ポケットベル。
      2. 上記に続いて、入力コントロールの種類による制限に反しない限り、次のいずれか。
        • tel→国際電話番号。
        • tel-country-code→国際電話番号のうち国番号。
        • tel-national→国内電話番号。
        • tel-area-code→市外局番。
        • tel-local→市内電話番号（市外局番より後ろの部分）。
        • tel-local-prefix→市内電話番号が分割される場合における前部。
        • tel-local-suffix→市内電話番号が分割される場合における後部。
        • tel-extension→内線番号。
        • email→電子メールアドレス。
        • impp→インスタントメッセージのアドレス。
  4. 上記に続いて、入力コントロールの種類がinput要素又はtextarea要素の場合に限り、任意で、次のいずれか。
    • webauthn→条件付き仲介を介して利用可能なWebAuthn公開鍵認証情報。

入力コントロールの種類による制限は、下記のとおり。

  • select要素、textarea要素、type属性値がhiddenのinput要素→全部が可。
  • type属性値がtext又はsearchのinput要素→street-addressを除く全部が可。
  • type属性値がpasswordのinput要素→current-password、new-password、one-time-codeが可。
  • type属性値がurlのinput要素→url、photo、imppが可。
  • type属性値がemailのinput要素→email、usernameが可。
  • type属性値がtelのinput要素→telが可。
  • type属性値がnumberのinput要素→cc-exp-month、cc-exp-year、transaction-amount、bday-day、bday-month、bday-yearが可。
  • type属性値がmonthのinput要素→cc-expが可。
  • type属性値がdateのinput要素→bdayが可。

私見・補足：new-passwordやone-time-codeについては、ブラウザの実際の実装では、自動補完機能を作動させないという機能を発揮させているようである。new-passwordについては、安全なパスワードを自動生成するものもあるようだ。one-time-codeについては、スマートフォンなどでは、ショートメール等で送信されてきた一度限りのパスワードを自動補完するものもあるようだ。

８－６．rel属性値の表

rel属性値の表
rel属性値(キーワード) link要素 a要素、area要素 form要素 body-ok リンクの種類 定義
external 指定不可 指定可 指定可 否 リンク注釈 参照先は、現在のウェブページと同じウェブサイトの一部ではないことを示す。
nofollow 指定不可 指定可 指定可 否 リンク注釈 現在のウェブページの著者等が、リンク先のウェブページを推奨しないことを示す。
noreferrer 指定不可 指定可 指定可 否 リンク注釈 リンクをたどる際にリファラーを送信しないことを示す。noopenerの効果も伴う。
noopener 指定不可 指定可 指定可 否 リンク注釈 リンクを開いた閲覧文脈が現在のウェブページの補助ではないことを示す（リンクを開いた閲覧文脈から、現在のウェブページを操作できないようにする）。
opener 指定不可 指定可 指定可 否 リンク注釈 リンクを開いた閲覧文脈が現在のウェブページの補助であることを示す（リンクを開いた閲覧文脈から、現在のウェブページを操作できる）。
help 指定可 指定可 指定可 否 ハイパーリンク ヘルプへのリンク。
license 指定可 指定可 指定可 否 ハイパーリンク 現在のHTML文書のコンテンツの著作権許諾情報へのリンク。
next 指定可 指定可 指定可 否 ハイパーリンク 現在のウェブページの次のウェブページ。
prev 指定可 指定可 指定可 否 ハイパーリンク 現在のウェブページの前のウェブページ。
search 指定可 指定可 指定可 否 ハイパーリンク 現在のHTML文書及び関連するウェブページを通して検索できるリソースへのリンク。
alternate 指定可 指定可 指定不可 否 ハイパーリンク 現在のHTML文書の代替表現。
author 指定可 指定可 指定不可 否 ハイパーリンク 現在のHTML文書・記事の著者へのリンク。
privacy-policy 指定可 指定可 指定不可 否 ハイパーリンク 現在のHTML文書のデータの収集及び使用方法に関する情報（プライバシーポリシーなど）へのリンク。
terms-of-service 指定可 指定可 指定不可 否 ハイパーリンク 現在のHTML文書の提供者と利用希望者との間の契約に関する情報（利用規約など）へのリンク。
bookmark 指定不可 指定可 指定不可 否 ハイパーリンク 直近の所属セクションのパーマリンク。
tag 指定不可 指定可 指定不可 否 ハイパーリンク 現在のウェブページに対するタギング。
canonical 指定可 指定不可 指定不可 否 ハイパーリンク 現在のウェブページの標準URLを指定。
expect 指定可 指定不可 指定不可 否 内部リソース この場合、href属性値には同一HTML文書内の特定の要素のid属性値をターゲットとする「#」で始まる値を指定する。それによって、ユーザーエージェントに対して、リンクによって参照されるリソースについて、当該要素が文書に接続され完全に解析されるまで当該要素のレンダリングを停止すべきことが期待されることを指定する。
icon 指定可 指定不可 指定不可 否 外部リソース 現在のウェブページに係るアイコンを読み込む。
manifest 指定可 指定不可 指定不可 否 外部リソース マニフェストの読み込み又はリンク。
stylesheet 指定可 指定不可 指定不可 是 外部リソース スタイルシートを読み込む。
pingback 指定可 指定不可 指定不可 是 外部リソース 現在のウェブページに対するピンバックを処理するサーバを指定する。
prefetch 指定可 指定不可 指定不可 是 外部リソース 次のナビゲーションで必要となるだろうリンク先を事前に読み込んでキャッシュしておくべきことを指定する。
dns-prefetch 指定可 指定不可 指定不可 是 外部リソース リソース先のDNS解決を事前にしておくべきことを指定する。
preconnect 指定可 指定不可 指定不可 是 外部リソース リソース先に予め接続しておくべきことを指定する。
preload 指定可 指定不可 指定不可 是 外部リソース 現在のナビゲーションに必要なリソース先をその利用先と優先度に応じて事前に読み込んでおくべきことを指定する。
modulepreload 指定可 指定不可 指定不可 是 外部リソース リソース先のモジュールスクリプトを事前に読み込んで、モジュールマップに格納すべきことを指定する。

下記の場合には、半角スペース区切りで、複数のキーワードをrel属性値に指定することができる。

  • ハイパーリンクを示すキーワードには、リンク注釈を示すキーワードを1個以上追加できる。
  • a要素、area要素及びform要素は、ハイパーリンクを示すキーワードがなくても当該要素それ自体がハイパーリンクであるから、リンク注釈を示すキーワードを1個以上指定できる。
  • link要素においてstylesheetとalternateを同時に指定した場合は、読み込むスタイルシートが代替スタイルシートであることを示す。
  • link要素においては、複数のハイパーリンク又は外部リソース（混在も可）を示すキーワードを指定することにより、1個のlink要素から複数のリンクを生成することもできる。

８－７．メディアクエリ

下記を参照。

８－８．length値

数値＋単位。単位については、下記を参照。