目次に戻る

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

0.基本

0-1.要素の構造


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

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

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

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

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

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

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

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

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

0-2.要素親子関係

下記例を参照。

ソース

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

0-3.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の場合は、省略可能。

HTML extensionPolyglot Markupでは、XML宣言は省略しなければならない。

1.雑多な覚書

1-1.XML構文HTML構文

XML整形式で書かれたのが、XML構文構文のルールは従前のXHTMLとほぼ同じ。

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

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

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

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

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

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

1-2.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宣言準拠である。

1-3.制約検証

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

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

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

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

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

1-4.レスポンシブイメージ

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

下記を参照。

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

1-5.見出しセクションアウトライン

準拠チェッカーの中には、アウトラインを解析して表示するオプションがついているものがある。

HTML5 Outlinerのようなアウトライン解析専用ツールや、そのような機能を有するブラウザの拡張機能もある。

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

1-6.代替テキスト

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

1-7.代替コンテンツ

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

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

1-8.XML-compatible

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

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

1-9.要素間空白文字

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

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

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

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

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

1-10.閲覧文脈

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

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

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

1-11.段落

特に断りのない限り、ここでは「段落」は「形式段落」を指すものとする。これは、文書構造的なものであり、論理的意味があるまとまりを意味しない。

仕様上は、p要素の節では「段落は通常、視覚媒体においては、空白行によって隣接するブロックから物理的に分離されるテキストブロックによって表現される」と記述されており、段落そのものを説明している節では「この節で定義されている段落という用語は、p要素の定義以上の目的で使用されます」と記述されているが、明確な定義は見受けられない。

ただ、それらの節の記述を総合し、かつ、行間も読み込めば、おおむね下記のとおりだろう(具体例は「段落の例」を参照)。

  • 段落は、普通に文章を書いてエディタ等で自動折り返しなしで表示させた場合の「一行」とニアイコール(一般的な視覚系ブラウザデフォルトスタイルでは、たいがいの要素は、画面からはみ出さないように自動折り返しするようになっているので、自動折り返しなしの「一行」を認識するのは難しい場合も多いが)。
  • ただし、ソース上では改行されていても、視覚系ブラウザレンダリングにおいては、ほとんどの場合、要素間空白文字たる改行文字は半角スペースに変換されてしまうので、当該改行はないものとみなさなければならない。
  • 逆に、ソース上では改行されてなくても、視覚系ブラウザレンダリングにおいて改行されていれば、それは改行とみなさなければならない。
  • つまり、視覚系ブラウザレンダリングにおいてデフォルトスタイルでブロックとなる(→その前後で改行される)ものが、段落の候補といえる。
  • ただし、br要素は、段落構造を維持したまま段落を複数行に分割する特殊な要素であり、br要素改行されているからといって、別々の段落だと扱ってはならない。
  • また、wbr要素は自動折り返しに関連する要素なので、改行とはみなさない。
  • そうなると、明確に段落として定義されているp要素のほかに、デフォルトスタイルdisplay:block要素(おおむね、Flow contentであって、かつ、Phrasing contentではない要素)が、段落の候補たりうる。
  • 上記の条件を満たす「一行」をマークアップする要素があれば、それが「明示の段落」ということになる。ただし、下記の例外に注意。
  • また、明示の段落に属してない部分も、いわば「余り」として「一行」を構成しうるものであり、それは「暗黙の段落」となる。
  • pre要素内容テキストにおいては、「一行」が1個の暗黙の段落となる。
  • Table modelを構成する諸要素の扱いは不明。形式的に考えるなら、tr要素が、明示の段落ということになるだろうか。
段落の例
ソース

      <section>
        前書きを<em>ぐだぐだ</em>
        <h2>見出しは段落にあらず</h2>
        この節では、<strong>重要なことは何も言ってない</strong>から、聞き流せ。
        <p>ああだ。</p><p>こうだ。</p>
        <div>いろいろと、
        あれや<em>これや</em>について、
        書いてるけどね。</div>
        実のところ、なんでもない。
        <p>あれについて、
        これについて、
        なんやかんやと書くよ。<!-- *ここにp要素の終了タグが省略されている -->
        <div>つまりは、
          <ul>
            <li>賛成が1</li>
            <li>その他が2
            <ul>
              <li>その他のうち棄権が1</li>
            </ul></li>
          </ul>
        ってことなんだよ。</div>
        <pre>  まったくもって理解しがたい
        しかし、飲み込むしかない。
        やれやれだ。</pre>
        <address>
          私へのお手紙の宛先:<br />
          東京都千代田区<br />
          百条百丁目○○ビル4階<br />
        </address>
        <strong>このstrong要素は、たまたま1個の段落の全体を覆ってるだけであり、暗黙の段落の一部分なんだよ。</strong>
      </section>
      
表示結果

以下、インラインフレームで表示

段落解析結果
  • 段落1(暗黙):「前書きをぐだぐだ」
  • 段落2(暗黙):「この節では、重要なことは何も言ってないから、聞き流せ。」
  • 段落3(明示):「ああだ。」
  • 段落4(明示):「こうだ。」
  • 段落5(暗黙):「いろいろと、 あれやこれやについて、 書いてるけどね。」
  • 段落6(暗黙):「実のところ、なんでもない。」
  • 段落7(明示):「あれについて、 これについて、 なんやかんやと書くよ。」
  • 段落8(暗黙):「つまりは、」
  • 段落9(明示):「賛成が1」
  • 段落10(暗黙):「その他が2」
  • 段落11(明示):「その他のうち棄権が1」
  • 段落12(暗黙):「ってことなんだよ。」
  • 段落13(暗黙):「 まったくもって理解しがたい。」
  • 段落14(暗黙):「 しかし、飲み込むしかない。」
  • 段落15(暗黙):「 やれやれだ。」
  • 段落16(明示):「私へのお手紙の宛先: 東京都千代田区 百条百丁目○○ビル4階」
  • 段落17(暗黙):「このstrong要素は、たまたま1個の段落の全体を覆ってるだけであり、暗黙の段落の一部分なんだよ。」

文書構造が分かりづらくならないように、暗黙の段落は避けて、明示の段落として、p要素などでマークアップしておいた方がよいだろう。


一般的に、要素暗黙の段落の境界をまたがないようにすべきである(特に、Transparent要素で注意)。一見すると、準拠マークアップに見えるが、暗黙の段落p要素で明示化すると、非準拠マークアップになる場合もある(「暗黙の段落の境界をまたぐ例」を参照)。

暗黙の段落の境界をまたぐ例

    <section>
    段落1段落1段落1<ins>段落1
    <p>段落2段落2段落2段落2</p>
    段落3</ins>段落3段落3段落3
    </section>
    

上記のマークアップは、暗黙の段落p要素で明示すると下記のようになって、非準拠マークアップになるのでダメ。


    <section>
    <p>段落1段落1段落1<ins>段落1</p>
    <p>段落2段落2段落2段落2</p>
    <p>段落3</ins>段落3段落3段落3</p>
    </section>
    

重なり合う段落」というのは、その内容代替コンテンツとなるEmbedded contentaudio要素canvas要素object要素video要素)と明示の段落及び暗黙の段落が絡み合って生じる(「重なり合う段落の例」を参照)。

準拠チェッカーに対する規定:重なり合う段落がある場合は、警告することができる。

重なり合う段落の例
ソース

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

段落1と段落2とが重なり合う段落となっている。

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


    <section>
      <p>この動画は××です。</p>
      <object data="video.flv">
        <p><a href="video.flv" download="">動画ファイルをダウンロード</a></p>
      </object>
      <p>この動画の権利については○○を参照。</p>
    </section>
    

br要素は、1個の段落を複数行に分けてしまうものであり、極めて特殊なものである。本来「一行」であってしかるべきものを複数行に分けることとなるので、実際にコンテンツの一部をなすような改行にしか用いることはできない。


論理的意味での段落(つまり、「意味段落」)に近いのは、section要素だろう。見出しが入れられるほどのものでないと、論理的意味は認められないといったところか。

1-12.コメント

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

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

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

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

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

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

2.グローバル属性

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

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

2-1.グローバル属性XML構文関係

xml:space
xml:lang
xmlns
W3C : HTML5.3

XML構文においては、xml:base属性も許容されていた。

2-2.グローバル属性:他の仕様属性

2-2-1.RDFa属性

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

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

2-2-2.RDFa Lite属性

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

2-2-3.WAI-ARIA属性

WAI-ARIArole属性aria-*属性が使える。

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

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

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

デフォルトroleとして規定されたものをわざわざrole属性値に指定することは不必要かつ非推奨(あるいは、すべきではない)。

抽象ロールは指定すべきではない。

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

2-2-4.Internationalization Tag Set属性

Internationalization Tag Setでは、its-*属性が使える。

its-*属性
  • its-loc-noteローカリゼーションノートを表す文言。
  • its-loc-note-refローカリゼーションノートの場所を参照するIRI
  • its-loc-note-typedescriptionalertデフォルトは、descriptionローカリゼーションノートのタイプを指定する。
  • its-termyesno。用語であるか否かを指定。
  • its-term-info-ref→用語に関する情報を提供するリソースを参照するIRI
  • its-term-confidence→0以上1以下の浮動小数点数ユーザーエージェントが生成している注釈付きユニットが用語であるかどうかに係る信頼度を表す。
  • its-within-textyes(当該要素親要素のフローの一部)、no(当該要素親要素テキストフローを分割し、当該要素のコンテンツは独立したテキストフローとなる)、nested(当該要素親要素のフローの一部であり、かつ、当該要素のコンテンツは独立したフローとなる)。デフォルトは、yes(ただし、iframe要素noscript要素script要素textarea要素の場合は、nested)。当該要素が言語学の立場から動作する方法について与える影響について指定する。
  • its-ta-confidence→0以上1以下の浮動小数点数テキスト分析の信頼度を表す。
  • its-ta-class-refテキスト分析対象の種類又は概念クラスを示すIRI
  • its-ta-sourceテキスト分析のコレクションソースの識別子
  • its-ta-identテキスト分析のコレクションにおける概念の識別子
  • its-ta-ident-refテキスト分析対象の識別子を示すIRI
  • its-locale-filter-listロケールフィルター拡張言語範囲を示すリスト。カンマ区切りで複数指定可。
  • its-locale-filter-typeincludeexcludeデフォルトは、includeロケールフィルターのタイプを示す。
  • its-person→個人の起源情報を示すテキスト
  • its-person-ref→個人の起源情報を示すIRI
  • its-org→組織の起源情報を示すテキスト
  • its-org-ref→組織の起源情報を示すIRI
  • its-tool→ツールの起源情報を示すテキスト
  • its-tool-ref→ツールの起源情報を示すIRI
  • its-rev-person→個人の改訂起源情報を示すテキスト
  • its-rev-person-ref→個人の改訂起源情報を示すIRI
  • its-rev-org→組織の改訂起源情報を示すテキスト
  • its-rev-org-ref→組織の改訂起源情報を示すIRI
  • its-rev-tool→ツールの改訂起源情報を示すテキスト
  • its-rev-tool-ref→ツールの改訂起源情報を示すIRI
  • its-prov-ref→外部起源情報への参照を示すIRI
  • its-provenance-records-ref→外部起源情報を表す要素への参照を示すIRI
  • its-loc-quality-issue-typeterminologymistranslationomissionuntranslatedadditionduplicationinconsistencygrammarlegalregisterlocale-specific-contentlocale-violationstylecharactersmisspellingtypographicalformattinginconsistent-entitiesnumbersmarkuppattern-problemwhitespaceinternationalizationlengthnon-conformanceuncategorizedotherローカリゼーション品質問題のタイプを指定する。
  • its-loc-quality-issue-commentローカリゼーション品質問題の説明情報を示すテキスト
  • its-loc-quality-issue-severityローカリゼーション品質問題の重大度を示す0以上100以下の有理数
  • its-loc-quality-issue-profile-refローカリゼーション品質問題のプロファイル参照情報を示すIRI
  • its-loc-quality-issue-enabledyesnoデフォルトは、yes。当該ローカリゼーション品質問題が有効かどうかを示す。
  • its-loc-quality-issues-refローカリゼーション品質問題を表す要素への参照を示すIRI
  • its-loc-quality-rating-scoreローカリゼーション品質評価のスコアを示す0以上100以下の有理数
  • its-loc-quality-rating-score-thresholdローカリゼーション品質評価の合格スコアを示す0以上100以下の有理数
  • its-loc-quality-rating-voteローカリゼーション品質評価への投票数を示す整数
  • its-loc-quality-rating-vote-thresholdローカリゼーション品質評価の合格投票数を示す整数
  • its-loc-quality-rating-profile-refローカリゼーション品質評価のスコアリングの品質評価モデルを説明する参考資料を示すIRI
  • its-mt-confidence→0以上1以下の浮動小数点数。機械翻訳エンジンから得られた翻訳の信頼度を表す。
  • its-allowed-characters→当該要素内容テキストとして許可される文字を、正規表現で指定する。翻訳した場合も当該文字以外許可されない。
  • its-storage-size→選択されたノードのテキストがストレージ内で許可される最大バイト数を指定する。
  • its-storage-encoding→選択されたテキストのバイト数を計算するために使用される文字エンコーディングを指定する。
  • its-line-break-typecrlfcrlfデフォルトは、lf。ストレージが使用する改行の形式を示す。
  • its-annotators-ref→その他の注釈情報を示す。データカテゴリー識別子translatelocalization-noteterminologydirectionalitylanguage-informationelements-within-textdomaintext-analysislocale-filterprovenanceexternal-resourcetarget-pointerid-valuepreserve-spacelocalization-quality-issuelocalization-quality-ratingmt-confidenceallowed-charactersstorage-size)に続いて、「|」、それに続いて、注釈情報を示すIRI

2-2-5.Media Source Extensions属性

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

  • onsourcecloseメディアリソースの読み込みが閉じられたとき。
  • onsourceendedメディアリソースの読み込みが終了したたとき。
  • onsourceopenメディアリソースの読み込みが始まったとき。
  • onupdateソースバッファーの追加・削除が成功裏に完成したとき。
  • onupdateendソースバッファーの追加・削除が終わったとき。
  • onupdatestartソースバッファーの追加・削除が始まったとき。
  • onaddsourcebufferソースバッファーが追加されたとき。
  • onremovesourcebufferソースバッファーが削除されたとき。

2-2-6.Pointer Events属性

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

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

2-2-7.Encrypted Media Extensions属性

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

  • onencryptedメディアが暗号化されたとき。
  • onwaitingforkeyメディアが暗号化符号を待って再生をブロックしているとき。

2-3.グローバル属性イベントハンドラ属性

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

W3C : HTML5.3:下記の属性が存在してなかった。

  • onsecuritypolicyviolation
  • oncontextmenu
  • onformdata

2-4.グローバル属性data-*属性

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

2-5.グローバル属性:その他

accesskey
  • 属性値:一文字。半角スペース区切りで複数指定可。
  • 意味・用法:要素を作動又はフォーカスするキーボードショートカットを設定するためのガイドとして、ユーザーエージェントによって使用される。
  • 私見・補足:属性値で指定されてるキーを押したら、該当の要素にアクセスできる。多くの実装では、特定のキーと一緒に押さないと機能しない→とほほのWWW入門 > HTMLリファレンス > accesskey=keyを参照。
  • W3C : HTML5.3属性値は複数指定不可で、同じHTML文書内で同じ属性値を指定する要素が複数あってはならないとされていた。
  • 表示確認
    ソース
    
            <button accesskey="A">A</button>
            
    表示結果
autocapitalize
  • 属性値:下記のとおり。デフォルトユーザーエージェントによる(ただし、非妥当値の場合は、sentences)。
    • sentences→文頭を大文字化。
    • words→単語頭を大文字化。
    • characters→すべて大文字化。
    • none→自動では大文字化しない。
    • onsentencesと同じ。
    • offnoneと同じ。
  • ユーザーエージェントに対する特記事項:通常のキーボードでの入力では動作しない(主として、仮想キーボードや音声での入力などの場合を想定しているため)。type属性値urlemailpasswordinput要素では、この属性の指定の有無及び属性値にかかわらず、自動大文字化は一切しない。特定の状況下では、この属性を無視してもよい。
  • 意味・用法:入力や編集におけるアルファベット文字の自動大文字化の指定。
  • 私見・補足:入力や編集が可能な要素でしか効果はない。日本語では用はない。
  • W3C : HTML5.3input要素textarea要素にしか指定できない属性であった。その場合でも、属性値onoffはなかった。通常のキーボードでの入力では動作しないとはされてなかった。
  • 表示確認
    ソース
    
          <label>autocapitalize例<textarea autocapitalize="sentences">he is a pen.</textarea></label>
          
    表示結果
class
  • 属性値:半角スペース区切りの文字列
  • 意味・用法:クラスを割り当てる。見た目を意味する文言ではなく、コンテンツの性質を表す文言を指定することが推奨される。
  • 私見・補足:一般的には、スクリプトスタイルシートで使用する。当該要素の意味・役割・性質などを表す文言を指定することが推奨される。class属性値には意味がある値を指定するという考え方を推し進めて、class属性値RDFaMicrodataのようなことを可能にしようとするのが、microformatsである。
id
  • 属性値:スペース文字以外の一文字以上の文字列要素ツリーの中で一意でなければならない。
  • 意味・用法:その要素一意識別子となる。属性値は単なる文字列であって、そこから特定の意味は導かれるべきではない。
  • 私見・補足:一般的にはスクリプトスタイルシートで使用したり、リンク先の指定で使用したりする。一意識別子なので、同じHTML文書内で同じid属性値をもつ要素が複数あってはならない。
contenteditable
  • 属性値truefalseのいずれか、も可。の場合は、trueと同等。未指定あるいは非妥当値の場合は、直近の祖先要素の状態を継承する。
  • WAI-ARIA:この属性が指定されている場合は、aria-readonly属性値trueは指定しない。
  • 意味・用法:当該要素が編集可能かどうかを指定する。
  • 私見・補足:編集後の状態を保存したりするには、別途スクリプトによる操作が必要である。
  • 表示確認
    ソース
    
            <div>編集不可能</div>
            <div contenteditable="true" style="height:1em">編集可能</div>
            <div>編集不可能</div>
            
    表示結果
    編集不可能
    編集可能
    編集不可能
dir
  • 属性値ltr(左から右)、rtl(右から左)、autoのいずれか。
  • 意味・用法:当該要素内容テキスト等の書字方向を指定する。
  • 下記の方向可能属性属性値(おおむね、何らかの形でユーザーに提示される可能性があるものが該当するようだ)も、この属性による制御を受ける。
  • 視覚系ブラウザデフォルトとして期待されるCSSは、下記のとおり。
    
        [dir]:dir(ltr) {direction: ltr;}
        [dir]:dir(rtl) {direction: rtl;}
    
        [dir=ltr i],
        [dir=rtl i],
        [dir=auto i] {
          unicode-bidi: isolate;
        }
        
  • 私見・補足:unicodeアルゴリズムltrrtlとなる言語については、デフォルトスタイル:dir(ltr):dir(rtl)に該当して、dir属性値による指定はほとんど無視されるようだ(表示結果を参照)。そのような言語でdir属性値による指定を強制したい場合は、bdo要素と併用しなければならない。
  • 表示確認
    ソース
    
            <span dir="rtl">I am a pen.</span>
            
    表示結果
    I am a pen.
draggable
  • 属性値truefalseのいずれか。デフォルトは、各要素ごとにユーザーエージェントによる。
  • 意味・用法:当該要素ドラッグ可能かどうかを指定する。
  • アクセシビリティ関連:この属性が指定された要素には、非視覚系ブラウザ(又はアクセシビリティ支援技術)向けの説明のために、title属性も指定すべきである。
  • 私見・補足:ドラッグされた対象の扱い、ドラッグされた対象がドロップされる対象の扱いなどは、関連するイベントを通じてスクリプトで処理する。
  • 表示確認
    ソース
    
            ドラッグ可能な画像→<img src="./sample/draggable-img.gif" alt="ドラッグ可能な画像" draggable="true" title="ドラッグできる画像" id="dragimg" />
            
    表示結果
    ドラッグ可能な画像→ドラッグ可能な画像
hidden
  • ブーリアン属性
  • ユーザーエージェントに対する特記事項:当該属性が指定された要素レンダリングしてはならない。
  • WAI-ARIA:この属性が指定されている場合は、aria-hidden属性は指定しない。
  • 意味・用法:この属性が指定されている要素は、現在においては関連性がないこと、もはや存在してないものと扱うべきこと、又は、ユーザーによって直接アクセスされるのではなく他の部分(スクリプト等)から再利用されうる部分であることを意味する。当該要素及びその子孫リンク等によって参照等してはならない。また、表示されうるものを一時的に隠すためにこの属性を使用してはいけない(それは存在しているものとして扱うべきであるから)。ただし、この属性が指定されている要素子孫等は、スクリプトを用いて動作させることなどはできる(再利用されうる部分)。
  • 視覚系ブラウザデフォルトとして期待されるCSSは、下記のとおり。
    
        [hidden] {display: none;}
        
  • 私見・補足:ユーザーにとっては表示されること自体が無意味であるような部分に用いる、といったところだろうか。
  • 表示確認
    ソース
    
            <div>見えるよ。</div>
            <div hidden="hidden">閲覧者には見えないはずだよ。</div>
            
    表示結果
    見えるよ。

    未対応ブラウザにおいては、表示されてしまう。

    IE6表示のスクリーンショット
    IE6表示:表示されてしまっている

    IE7からIE9も同様。

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→「改行」の旨を表示すべきである。
    • doneIMEにおける「確定」の旨を表示すべきである。
    • 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 extensionPolyglot Markupでは、指定するときはxml:lang属性lang属性を同時に指定し、それらの属性値を同一にしなければならない。
  • アクセシビリティ関連:html要素lang属性を指定してHTML文書の主要言語を明確化すべきである(Techniques for WCAG 2.0 : H57)。主要言語と異なる言語の部分がある場合は、当該部分の要素lang属性を指定して当該言語を明らかにすべきである(Techniques for WCAG 2.0 : H58)。
  • 私見・補足:これはあくまで自然言語を指定する属性である。機械言語であるプログラミングコードなどに指定できるlang属性値はないはず。XML構文では、このlang属性は解釈されない可能性がありそうな気もするので、指定するにしても同時にxml:lang属性も指定しておいた方がよいかもしれない(属性値は同一にしておく)。
nonce
  • 属性値Content Security Policy暗号ノンスとなる文字列
  • 意味・用法:Content Security Policyが使用する暗号ノンスを表す。
  • 私見・補足:暗号ノンスは一回限りの使い捨てであるため、属性値はサーバーサイドプログラムなどによってつど動的に生成して指定することが想定されている。
slot
  • 属性値slot要素name属性値
  • 意味・用法:slotを割り当てるために使用される。
  • 私見・補足:DOMshadow treeの仕組みで、name属性をもつslot要素が、当該name属性値と同じ値をもつslot属性が指定された要素に置き換わって、レンダリングされる。
spellcheck
  • 属性値truefalseのいずれか。も可。の場合は、trueと同等。未指定あるいは非妥当値の場合のデフォルトは、各要素ごとにユーザーエージェントによる。
  • ユーザーエージェントに対する特記事項:下記のもののみチェック可能だとみなさなければならない。つまり、当該要素spellcheck属性値の状態が(指定、デフォルト又は祖先要素からの継承で)trueであったとしても、下記のものがないなら、何もチェックはされない。
    • type属性値textsearchurlemailであり、入力が可能な状態の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デフォルトフォーカス可能ではない要素を、フォーカス可能とする。連続的フォーカスナビゲーションでも到達可能となるが、その順序は指定しない。
    • 負の整数デフォルトフォーカス可能な要素を、フォーカス可能なままで、連続的フォーカスナビゲーションでは到達不能とする。デフォルトフォーカス可能ではない要素を、フォーカス可能にするが、連続的フォーカスナビゲーションでは到達不能なままとする。
    • 0より大きい整数→当該要素連続的フォーカスナビゲーションで到達可能とし、かつ、数値はその順序を示す。なお、デフォルトフォーカス可能ではない要素については、フォーカス可能とする。
  • アクセシビリティ関連:ユーザーを混乱させないために、連続的フォーカスナビゲーションの順序と、ユーザーがそれらの(主として入力コントロールとなる)要素を操作すべき順序と、レンダリングされたそれらの要素の見た目の順序は、一致させるべきである(Techniques for WCAG 2.0 : G59, F44)。
  • 私見・補足:一般的には、連続的フォーカスナビゲーションにおいてはタブキーフォーカスする。
  • 表示確認
    ソース
    
            <button tabindex="2">2</button>
            <button tabindex="1">1</button>
            
    表示結果
title
  • 属性値:任意のテキスト。未指定の場合は、原則として、直近の祖先要素の指定を継承する。
  • ユーザーエージェントに対する特記事項:要素が補足情報をもっている場合は、その旨をユーザーに通知すべきである。
  • 意味・用法:当該要素の補足情報を表す。
  • 下記の場合は、単なる補足情報ではなく特殊な意味及び取り扱いをもつ。
    • style要素に指定する場合は、代替スタイルシートのセットを定義することとなる。未指定の場合も、祖先要素の指定を継承しない。
    • link要素rel属性値stylesheetのものに指定する場合は、代替スタイルシートのセットを定義することとなる。未指定の場合も、祖先要素の指定を継承しない。
    • 上記以外のlink要素に指定する場合は、リンクのタイトルを与える。未指定の場合も、祖先要素の指定を継承しない。
    • abbr要素に指定する場合は、当該要素内容テキストの非省略表記を属性値としなければならない。
    • pattern属性付きinput要素に指定する場合は、当該pattern属性が指定する検証パターンを説明する記述を属性値としなければならない。
    • dfn要素に指定された場合は、その属性値定義語となる。未指定の場合も、祖先要素の指定を継承しない。
  • アクセシビリティ関連:現状では多くのユーザーエージェントアクセシビリティを有する方法でこの属性による補足情報を提示してないので、現在においては補足情報をこの属性だけに依存することは推奨されない。
  • 私見・補足:すべてのユーザーが容易にtitle属性値にアクセスできるわけでもないので、必ず読んでほしいような重要情報は別にテキストを起こすべきだろう。
  • 表示確認
    ソース
    
            <span title="補足説明だよ">視覚系ブラウザの多くの実装では、マウスを乗せるとツールチップで補足説明が出るようだ。</span>
            
    表示結果
    視覚系ブラウザの多くの実装では、マウスを乗せるとツールチップで補足説明が出るようだ。
translate
  • 属性値yesnoのいずれか、も可。の場合は、yesと同等。未指定の場合は、直近の祖先要素の指定を継承する。
  • 意味・用法:当該要素内容テキスト等を翻訳させるか否かを指定する。
  • 下記の翻訳可能属性属性値(おおむね、何らかの形でユーザーに提示される可能性があるものが該当するようだ)も、この属性による制御を受ける。
    • th要素abbr属性値
    • area要素img要素及びinput要素alt属性値
    • name属性が指定されているmeta要素content属性値name属性値の定義等により、それが翻訳可能だと知られているものに限る)。
    • a要素及びarea要素download属性値
    • optgroup要素option要素及びtrack要素label属性値
    • input要素及びtextarea要素placeholder属性値
    • iframe要素srcdoc属性値(実際に翻訳対象となるのは、インラインフレーム内のHTML文書として展開されたときに、当該HTML文書内の各要素内容テキスト及び翻訳可能属性値となる部分)。
    • lang属性値
    • style属性値(実際に翻訳対象となるのは、CSScontentプロパティの値など、主に任意のテキストを指定する部分)。
    • title属性値
    • type属性値button又はresetが指定されているinput要素value属性値
    • 他の仕様で翻訳可能だと規定されている属性属性値
  • 私見・補足:主として、ウェブページが機械翻訳される場合を想定。翻訳させたくない固有名詞や特殊な単語などにnoを指定するのが主な用法になると思われる。lang属性値がどんなふうに翻訳されるのかは、よく分からない。
Microdata属性

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

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

  • itemscope→原則として、当該属性を指定された要素内に対して当該仕様が有効。
  • itemtypeitemscopeで指定した範囲に対して適用する語彙定義集を指定するURL。基本的な語彙定義集は、schema.orgにそろっている。
  • itemprop→定義されているプロパティを示す文字列
  • itemidアイテムグローバル識別子を示すURL
  • itemref→他の要素id属性値を指定することによって、itemscope属性指定要素内容外の当該要素も対象とすることができる。
  • itemscope属性が指定されてない要素に、itemtype属性itemid属性itemref属性は指定できない。
  • itemtype属性が指定されてない要素に、itemid属性は指定できない。

W3C : HTML5.3仕様本体から分離されたMicrodata仕様では、itemtype属性が指定されてない要素にも、itemid属性は指定可能とされていた。

W3C : HTML5.3仕様本体から分離されたMicrodata仕様では、下記の属性も許容されていた。

  • contentプロパティに対応する値を機械可読形式で記述。RDFaの同属性とは衝突しない(つまり、RDFaMicrodataとで、この属性を共有することができる)。

3.内容モデルと分類

3-1.内容モデル

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

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

3-2.カテゴリー

前提

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

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

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

Metadata content
Sectioning content
Sectioning root
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では、厳密にはカテゴリーとして規定されてはいないが、上記のように言及されており、個別の要素内容モデル等の説明でこの言葉が出てくることもある。
  • 所属する要素は下記のとおり。
W3C : HTML5.3Reassociateable elementが存在しており、下記のとおりであった。

3-3.Transparent content model

3-4.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による。
  • 構成する要素は下記のとおり。

3-5.Void element

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

3-6.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には適用なし。
  • 該当する要素は下記のとおり。

4.文字エンコーディング

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

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

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

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

4-2.HTTPヘッダによる文字エンコーディング指定

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

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

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

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

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

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

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

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

4-3.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構文では、この方法による指定は禁止である。

W3C : HTML5.3XML構文では、この方法による指定は、禁止はされないが、効果はないとされていた。

4-4.XML宣言による文字エンコーディング指定

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

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

IE6等では、XML宣言があるとレンダリング互換モードになって表示がおかしくなる可能性がある。

XML宣言による指定方法

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

4-5.BOMによる文字エンコーディング指定

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

Windowsのメモ帳でutf-8形式で保存すると勝手にBOMが入る。

5.スタイルシート

5-1.規定のスタイルシート言語

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

W3C : HTML5.3text/cssデフォルトスタイルシート言語と規定されており、他のスタイルシート言語も許容していた。

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

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

IE6等では、rel属性値alternate stylesheetの順番を逆さまにしてstylesheet alternateにすると、代替スタイルシートとして認識されないという不具合がある。

スタイルシート指定例1

    <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.cssalternate.cssは、代替スタイルシートのセットとなる。
  • 代替セットのうち、rel属性値alternateを指定してないdefault.cssは、初期状態で適用される。
  • 代替セットのうち、rel属性値alternateを指定したalternate.cssは、初期状態では適用されない。
  • ユーザーがブラウザの機能等でalternate.cssの適用を選択したときは、alternate.cssが適用され、default.cssは不適用となる。

5-3.style要素によるスタイルシートの埋め込み

style要素内容に、スタイルシートコードテキストを記載する(「スタイルシート指定例2」「スタイルシート指定例3」を参照)。

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

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

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

また、HTML Living Standardでは、「Foreign elementの内部においてのみ、CDATAセクションが使用できる」という記述も見られるので、そもそも非準拠の可能性もある。

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

link要素と同様に、title属性指定によって代替スタイルシートのセットを構成することが可能。ただし、HTML Living Standardから認められたものなので、未対応ブラウザがあることに留意すること。

スタイルシート指定例2

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

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

5-4.style属性によるスタイル指定

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

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

スタイルシート指定例4

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

5-5.HTML Living Standardの新要素に対するスタイル

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

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

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

5-6.IE8以下にスタイルシートを適用するための対策

IE8以下は未知の要素終了タグなしのVoid elementとして解釈するという困った仕様になっており、そのままではHTML Living Standardの新要素スタイルシートがまともに適用されない。

対策としては、スタイルシートを読み込む(記述する)前に(つまりは、head要素内のなるべく上部で)、対策用のスクリプトを読み込んでおく方法がある(「IE8以下への対策用スクリプトの読み込み例」を参照)。

ジャバスクリプトをオフにしてるユーザーには対応できないが、IE8以下を漫然と使用しているユーザーがジャバスクリプトをオフにしてる可能性は低いと推測される。ジャバスクリプトをわざわざオフにしているユーザーは知識のある中級者以上の可能性が高いので、ジャバスクリプトをオンにするなり、見栄えは整ってなくても情報だけ読んで満足するなりしてくれるだろう。

IE8以下への対策用スクリプトの読み込み例

    <script src="https://oss.maxcdn.com/html5shiv/latest/html5shiv-printshiv.js"></script>
    

6.準拠チェッカー

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

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

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

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

7-1.W3C : HTML5.3

W3CHTML5.3仕様については、下記を参照。

HTML5は、もともとWHATWGで策定していたものをW3Cに提案して、W3Cでも仕様として策定することになったものである。

両者は、多少異なる部分があったものの概ね同期がとられていたが、ある時期から同期は切られたため、相違点も増えてきていた。

WHATWGの方は、バージョン番号を削除し、HTML Living Standardと改称。

W3Cの方は、近い将来、HTML Living Standardを参照する形式に変更する予定とのこと(参考:W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます)。

7-2.HTML extension

将来的には、HTML Living Standard本体に取り込まれる可能性はある。

拡張なので、ユーザーエージェントはこれを実装しなくても、HTML Living Standard違反とはならない。ただし、HTML Living Standard内で当該拡張について言及されている場合は、この限りではない。

拡張仕様の一覧は下記を参照。

個別の拡張仕様は、下記を参照(頭に○印があるは、拡張される属性等について、HTML Living Standard本体に記載・言及があるもの。括弧書きで*が付記されているのは、このページ内でのリンク)。これらの仕様による属性については、グローバル属性:他の仕様属性も参照。

7-3.Polyglot Markup

HTML extension

XML構文HTML構文のどちらで解釈されてもきちんとレンダリングされ、かつ、同一のDOMツリーを構成するように考慮された書き方を定めた仕様

HTML4などやXHTML1などへの後方互換性IE6とかの旧式ブラウザへの後方互換性も考慮されている。

仕様は、下記を参照。

7-4.WAI-ARIA

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

仕様は、下記を参照。

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

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

7-5.RDFa

HTML extension

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

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

仕様は、下記を参照。

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

7-6.microformats

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

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

仕様は、下記を参照。

7-7.Payment Request API

仕様は、下記を参照。

7-8.Service Workers

仕様は、下記を参照。

7-9.Accessible Name and Description: Computation and API Mappings

仕様は、下記を参照。

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

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

7-10.Feature Policy

仕様は、下記を参照。

7-11.HTTP Client Hints

仕様は、下記を参照。

7-12.Techniques for WCAG 2.0

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

仕様は、下記を参照。

8.属性及び属性値に関する雑多な参照

8-1.ブーリアン属性

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

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

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

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

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

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

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

8-2.BCP47言語コード

例:ja(日本語)、en(英語)

参考:IETF言語タグ(ウィキペディア日本語版)

8-3.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(ウィキペディア英語版)

8-4.ウィキ方式による属性値の策定

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

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

準拠チェッカーに対する規定:

  • rel属性値については、上記ウィキで策定されている属性値を参照してチェックしなければならない。

W3C : HTML5.3準拠チェッカーに対する規定は、下記のとおりだった。

  • rel属性値については、上記ウィキで策定されている属性値を参照してチェックしてもよい。
  • meta要素name属性値については、上記ウィキで策定されている属性値を参照してチェックしてもよい。

8-5.autocomplete属性値のその他

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

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

  1. 任意で、section-**(「**」の部分は、大文字小文字を区別しない半角英数字)→同じ値が指定された入力コントロールのグループは、関連する一連のものであることを示す。
  2. 上記に続いて、任意で、次のいずれか。
    • shipping→商品配送先に関するもの。
    • billing→代金請求先に関するもの。
  3. 上記に続いて、次のA又はBのうち、いずれか。
    • A:入力コントロールの種類による制限に反しない限り、次のいずれか。
      • 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
    • B:半角スペース区切りで、以下の文字列
      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→インスタントメッセージのアドレス。

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

  • select要素textarea要素type属性値hiddeninput要素→全部が可。
  • type属性値text又はsearchinput要素street-addressを除く全部が可。
  • type属性値passwordinput要素current-passwordnew-passwordone-time-codeが可。
  • type属性値urlinput要素urlphotoimppが可。
  • type属性値emailinput要素emailが可。
  • type属性値telinput要素telが可。
  • type属性値numberinput要素cc-exp-monthcc-exp-yeartransaction-amountbday-daybday-monthbday-yearが可。
  • type属性値monthinput要素cc-expが可。
  • type属性値dateinput要素bdayが可。

W3C : HTML5.3:下記のautocomplete属性値が存在してなかった。

  • one-time-code

8-6.rel属性値の表

rel属性値の表
rel属性値 link要素 a要素area要素 form要素 body-ok 定義
alternate 指定可 指定可 指定不可 現在のHTML文書の代替表現。
author 指定可 指定可 指定不可 現在のHTML文書・記事の著者へのリンク
help 指定可 指定可 指定可 ヘルプへのリンク
license 指定可 指定可 指定可 現在のHTML文書のコンテンツの著作権許諾情報へのリンク
next 指定可 指定可 指定可 現在のウェブページの次のウェブページ
prev 指定可 指定可 指定可 現在のウェブページの前のウェブページ
search 指定可 指定可 指定可 現在のHTML文書及び関連するウェブページを通して検索できるリソースへのリンク
bookmark 指定不可 指定可 指定不可 直近の所属セクションパーマリンク
tag 指定不可 指定可 指定不可 現在のウェブページに対するタギング
external 指定不可 指定可 指定可 参照先は、現在のウェブページと同じウェブサイトの一部ではないことを示す。半角スペース区切りで他の属性値の指定も可。
nofollow 指定不可 指定可 指定可 現在のウェブページの著者等が、リンク先のウェブページを推奨しないことを示す。半角スペース区切りで他の属性値の指定も可。
noreferrer 指定不可 指定可 指定可 リンクをたどる際にリファラーを送信しないことを示す。noopenerの効果も伴う。半角スペース区切りで他の属性値の指定も可。
noopener 指定不可 指定可 指定可 リンクを開いた閲覧文脈が現在のウェブページの補助ではないことを示す(リンクを開いた閲覧文脈から、現在のウェブページを操作できないようにする)。半角スペース区切りで他の属性値の指定も可。
opener 指定不可 指定可 指定可 リンクを開いた閲覧文脈が現在のウェブページの補助であることを示す(リンクを開いた閲覧文脈から、現在のウェブページを操作できる)。半角スペース区切りで他の属性値の指定も可。
canonical 指定可 指定不可 指定不可 現在のウェブページの標準URLを指定。
icon 指定可 指定不可 指定不可 現在のウェブページに係るアイコンを読み込む。
stylesheet 指定可 指定不可 指定不可 スタイルシートを読み込む。半角スペース区切りでalternateを同時に指定した場合は、読み込むスタイルシート代替スタイルシートであることを示す。
pingback 指定可 指定不可 指定不可 現在のウェブページに対するピンバックを処理するサーバを指定する。
prefetch 指定可 指定不可 指定不可 次のナビゲーションで必要となるだろうリンク先を事前に読み込んでキャッシュしておくべきことを指定する。詳細は、Resource Hintsを参照。
dns-prefetch 指定可 指定不可 指定不可 リソース先のDNS解決を事前にしておくべきことを指定する。詳細は、Resource Hintsを参照。
preconnect 指定可 指定不可 指定不可 リソース先に予め接続しておくべきことを指定する。詳細は、Resource Hintsを参照。
prerender 指定可 指定不可 指定不可 次のナビゲーションで必要となるだろうリソース先を予め取得してレンダリングしておくべきことを指定する。詳細は、Resource Hintsを参照。
preload 指定可 指定不可 指定不可 現在のナビゲーションに必要なリソース先を高い優先度でフェッチする。詳細は、Preloadを参照。
modulepreload 指定可 指定不可 指定不可 リソース先のモジュールスクリプトフェッチしてモジュールマップに格納すべきことを指定する。

W3C : HTML5.3:下記のrel属性値の規定が存在してなかった。

  • opener
  • pingback
  • modulepreload

8-7.メディアクエリ

下記を参照。

8-8.length値

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