「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。
今回は、試験範囲でもある「HTML5.1のグローバル属性」のまとめ。
ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。
実際に受験してきた時の結果と感想はこちら↓をご覧ください。
先日、「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。 これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
グローバル属性とは
グローバル属性とは、すべての要素に共通して指定できる属性のことを言い、HTML5.1では次の15種類が定義されている。
| 属性名 | 値の示すもの | 指定可能な値 |
| class | 要素が属する種類や分類を示す名前 | テキスト（空白文字で区切って複数の名前を指定可能） |
| id | 要素のid（他の要素と重複しない固有の名前） | テキスト（空白文字を含むことはできず、必ず1文字以上必要） |
| lang | 言語の種類 | BCP47言語タグ（ja, enなど） |
| style | スタイルシート | CSSの宣言（セレクタと{}を除く「プロパティ: 値;」の部分 |
| dir | 文字表記の方向 | 列挙属性* dir=”ltr” dir=”rtl” dir=”auto” |
| tabindex | タブキーによる移動の順序（フォーカスの可/不可も制御） | 整数 |
| accesskey | キーボード・ショートカット | 印刷可能な文字を１つ |
| hidden | 要素を表示しない | 論理属性* ※属性名だけで指定可 |
| translate | ローカライズの際に翻訳すべきかどうか | 列挙属性* translate=”” translate=” yes” translate=” no” |
| spellcheck | スペルおよび文法チェックの有効/無効 | 列挙属性* spellcheck=”” spellcheck=” true” spellcheck=” false” |
| contenteditable | 要素を編集可能にするかどうか | 列挙属性* contenteditable=”” contenteditable=” true” contenteditable=” false” |
| contextmenu | この要素が使用するコンテキストメニュー | menu要素のid属性の値 |
| draggable | ドラッグが可能かどうか | 列挙属性* draggable=” true” draggable=” false” |
| dropzone | ドロップされるとどうなるか | copy, move, linkのいずれか１つ 空白文字で区切って、 string:〇〇〇 file:〇〇〇 を複数指定可 |
列挙属性／列挙型属性(Enumerated Attribute)
あらかじめ決められたキーワードの中から値を選択する方式の属性のことを「列挙属性」または「列挙型属性」と言う。キーワードは大文字で書いても小文字で書いても文法的には問題ない。列挙属性の中には値として空文字を指定できるものもある。
論理属性／論理型属性(Boolean Attribute)
通常、HTMLの属性は「属性名=”値”」の書式で指定しますが、「属性名」だけで指定できる属性があり、そのような属性のことを「論理属性」または「論理型属性」という。
論理属性には値を指定することもできる。
〇 hidden
〇 hidden=””
〇 hidden=”hidden”
× hidden=”true”
× hidden=”false”
class属性
class属性は、それを指定した要素が属する種類・分類を示すための属性。名前は空白文字で区切って複数指定可能。空白文字は、連続して複数個を入れてもOK。また値全体の前後に空白文字が入っていても問題ない。
id属性
id属性は、それを指定した要素に固有の名前をつけるための属性。固有の名前なので、同じページ内の他のid属性に同じ値を指定することはできない。（class属性にはこのような制限はなく、複数の要素に対して同じ値を指定できる。）
※id属性の値には空白文字を含むことができない。
※id属性の値には必ず１文字以上入れる必要がある。
※使用できる文字に特に制限はなく、アンダースコア(_)や数字を値の先頭に使用してもよいし、値全体が数字や記号でもOK。
lang属性
lang属性は、要素内容と属性値の言語の種類を示す属性。値には、BCP47という仕様で定義されている言語タグを使用。
| 言語コード | 言語名 |
| ja | 日本語 |
| en | 英語 |
| en-US | 米国英語 |
| en-GB | イギリス英語 |
| fr | フランス語 |
| de | ドイツ語 |
| it | イタリア語 |
| es | スペイン語 |
title属性
title属性は、その要素に関連する補助的な案内や助言的な情報を提供するための属性。一般的なパソコン環境のブラウザでは、ツールチップで表示される。
dir属性
dir属性は、要素内容のテキストを表記する方向を示す属性。
tabindex属性
tabindex属性は、フォーカスの可・不可を制御し、フォーカスを可能にした場合にはタブキーによる移動の順序も設定可能な属性。値には整数が指定でき、0以上を指定するとフォーカスされるようになり、負の値を設定するとフォーカスされなくなる。
タブキーによる移動の順序を設定するには、1以上の整数を指定すると、ソース順に関係なく値の小さいものから大きいものへと移動する。
値に0を指定するとソースの並び順に移動するようになる。
※どの要素であっても、この属性が指定されるとインタラクティブコンテンツになる。
accesskey属性
accesskey属性は、要素にアクセスキーを指定することで、マウスの使えない環境でもキーボードを使って簡単に同様の操作を行うことができるようにするもの。
accesskey属性は次のような用途に使用することができる。
・キーボード操作でリンク先を開けるようにする。
・キーボード操作で入力欄を選択できるようにする。
・キーボード操作でコマンドを実行できるようにする。
accesskey属性の値には、その要素に割り当てるアクセスキーを指定する。大文字と小文字は区別されることになっている。
※HTML5では、複数のアクセスキーを指定することができたが、HTML5.1では、設定できるアクセスキーは１つだけとなった。
accesskey属性を指定した場合、アクセスキーの呼び出し方法はブラウザによって異なる。
| OS | ブラウザ | 説明 |
| Windows | IE | Alt + [アクセスキー] |
| Chrome | Alt + [アクセスキー] | |
| Firefox | Alt + Shift + [アクセスキー] | |
| Safari | Alt + [アクセスキー] | |
| Opera | Alt + [アクセスキー] ※古いバージョンでは、Shift + Esc + [アクセスキー] | |
| Mac OS |
Chrome | Ctrl + Alt + [アクセスキー] |
| Firefox | Ctrl + Alt + [アクセスキー] ※古いバージョンでは、Ctrl + [アクセスキー] | |
| Safari | Ctrl + Alt + [アクセスキー] | |
| Opera | Ctrl + Alt + [アクセスキー] ※古いバージョンでは、Shift + Esc + [アクセスキー] |
通常、フォームのラベルをもつinput要素では、label要素にaccesskeyを指定する。その際、アクセスキーを使用するとlabel要素ではなくinput要素にフォーカスが移る。ただし、ラジオボタンをフォーカスで移動させたい場合はinput要素をlabel要素で囲う必要あり。
dropzone属性
dropzone属性は、この要素にドロップされたデータがどうなるかを示す属性。値には「copy（コピーされる）」「move（移動する）」「link（リンクが作成される）」のいずれか１つが指定できる。
さらに空白文字で区切って、受け入れ可能な文字列またはファイルの種類を指定することもできる。その場合、文字列なら「string:MIMEタイプ（例：string:text/plain）」、ファイルなら「file:MIMEタイプ（image/jpeg）」の書式で指定する。
※dropzone属性を持つ要素は、非視覚的なやりとりのために「title属性」で名前を付けるように推奨されている。
カスタムデータ(data-*)属性
カスタムデータ属性とは、使用するのに適当な属性や要素がない場合に、任意の要素に独自の属性を追加できるように用意されたもの。（※値は自由に設定でき、１つの要素にいくつでも指定できる）ただし、属性名は必ず「data-」という文字列で開始し、そのあとに少なくとも１文字以上を続けなければならない。また、属性名の中にアルファベットの大文字を含むことはできない。
カスタムデータ属性はサイト内部で利用するために用意された属性であり、サイトとは無関係の外部のソフトウェアから利用するためのものではない点に注意が必要。
WAI-ARIA関連の属性
HTML5では、WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications 1.0)という別の仕様で定義されているrol属性およびaria-*属性を任意の要素に対して指定することができる。
rol属性
role属性は、要素の役割が何であるのかを示すために使用する属性で、高齢者や障害を持った人がWebサイトやWebアプリケーションを利用しやすくするための方法を定義している。
ランドマークロール
| 名前 | 意味 |
|---|---|
| banner | ヘッダー。1回だけ使用ができる。 |
| complementary | 補足のコンテンツ。HTMLの要素だと<aside>と対応してる。1回のみの使用が望ましい。 |
| contentinfo | コンテンツ情報。ページやWebサイトについての情報（著作権や連絡先など）1回だけ使用できる。 |
| form | フォーム。<form>に関する属性。 |
| main | メインコンテンツ。1回だけ使用できる。 |
| navigation | ナビゲーション。<nav>のようにサイト内の別のページへのリンクを含む要素。あんまり複数回使うのは望ましくない。 |
| search | 検索。サイトコンテンツの検索などで利用する。複数回使ってもOK。 |
文書構造ロール
| 名前 | 意味 |
|---|---|
| application | アプリケーションとしてのコンテンツ（bodyにつけることが多い） |
| article | 文書、ページ |
| cell | テーブルのセル |
| columnheader | テーブルやグリッドの列のヘッダー情報をもつセル。テーブルの列の見出しとして使用もできる。 |
| definition | 用語などの定義 |
| directory | 目次のようなグループのリスト |
| document | コンテンツを含むもの（bodyにつけることが多い。application以外は大体これ） |
| feed | スクロール可能な記事リスト |
| figure | 参照の図や画像など |
| group | UI要素やオブジェクトをグループ化したもの |
| heading | 見出し |
| img | 画像 |
| list | listitemを含むリスト |
| listitem | リストの項目 |
| math | 数式を表すコンテンツ |
| none | 意味を持たないことを示す要素 |
| note | 補足 |
| presentation | 意味を持たないことを示す要素。類義語はnone |
| region | |
| row | テーブルにおけるセルの行 |
| rowgroup | 1つ以上の行を含む構造 |
| rowheader | 行のセルを含むヘッダー |
| separator | セクションまたはメニューのグループを区切る仕切り |
| table | テーブル |
| term | 対応する定義をもつ単語 |
| toolbar | 機能を持つボタンやセレクタを含む。ツールバー。 |
| tooltip | 要素の説明をするポップアップ。ツールチップ。 |
抽象的ロール
| command | input | landmark |
| range | roletype | section |
| sectionhead | select | structure |
| widget | window |
文書
ウィジェットロール
スタンドアロンユーザーインターフェースウィジェット(単独)
| 名前 | 意味 |
|---|---|
| alert | |
| alertdialog | |
| button | ボタン。クリックやタップした時にユーザー誘発のアクションを可能にする入力 |
| checkbox | チェックボックス。 true、false、またはmixedを選択できるチェックボックス |
| dialog | |
| gridcell | gridまたはtreegrid内のセル。 |
| link | リンク。 |
| log | |
| marquee | |
| menuitem | menuまたはmenubarの中の選択肢。メニューの中のリストとか。 |
| menuitemcheckbox | チェックボックスをもつmenuitem。 |
| menuitemradio | ラジオボタンをもつmenuitem。 |
| option | selectで選択可能な項目。 |
| progressbar | 時間がかかるタスクの進捗状況を表示する要素。 |
| radio | ラジオボタン。 |
| scrollbar | 表示コンテンツ内のスクロールを制御する要素。 |
| searchbox | 検索テキストボックス。 |
| separator（フォーカス可能な場合） | コンテンツを区切る仕切り |
| slider | <input type=‘range’>のようなつまみをスライドさせて数値を選択する要素 |
| spinbutton | <input type=‘number’>のようなinput内で数値を選択するフォーム |
| status | |
| switch | スイッチ。checkedとは別のon/offを表すチェックボックス |
| tab | タブ |
| tabpanel | tabに関連付けられたコンテナ |
| textbox | 自由形式のテキストを入力する型 |
| timer | |
| tooltip | |
| treeitem | treeのオプション項目 |
複合ユーザーインターフェースウィジェット
| 名前 | 意味 |
|---|---|
| combobox | 入力するtextboxと他の要素を含む複合ウィジェット |
| grid | 1つ以上のセルや行を持つ複合ウィジェット |
| listbox | 選択肢のリストから1つ以上の項目を選択できるようにするウィジェット |
| menu | 選択肢のリストを提供するウィジェット |
| menubar | 水平に表示されるメニュー |
| radiogroup | radioボタンのグループ |
| tablist | tabのリスト |
| tree | 折りたたみや展開されるようなネストしているリストを持つ |
| treegrid | 行がtreeと同じように折りたたみや展開されるgrid |
aria-*属性
aria-*属性は、要素のその時点での状態や特性などを示すために使用できる属性で、「aria-〇〇〇」といった形式の属性名を持つ。
例としては、チェックボックスなどがチェックされている状態かどうかを示すaria-checked属性（※値は true, false, mixed）や、入力が必須であることを示すaria-required属性（※値は true, false）などがある。