属性

属性については、HTML の概要で簡単に説明しましたが、ここでは詳しく説明します。

属性は HTML を強力にするものです。属性は、開きタグに表示される名前と名前と値のペアで、要素に関する情報と機能を提供します。属性はスペース区切りで指定します。

HTML 要素にラベルが付けられた開始タグ、属性、閉じタグ。

属性は、要素の動作、リンク、機能を定義します。一部の属性はグローバルです。つまり、任意の要素の開始タグ内に配置できます。他の属性は複数の要素に適用されますが、すべての要素に適用されるわけではありません。また、要素固有の属性もあり、1 つの要素にのみ関連します。HTML では、ブール値を除くすべての属性と、ある程度列挙型の属性には値が必要です。

属性値にスペースや特殊文字が含まれている場合は、値を引用符で囲む必要があります。このため、読みやすくするために、引用符を使用することをおすすめします。

HTML では大文字と小文字は区別されませんが、一部の属性値では区別されます。HTML 仕様の一部である値では、大文字と小文字は区別されません。定義された文字列値（クラス名や ID 名など）では、大文字と小文字が区別されます。HTML で属性値が大文字と小文字を区別する場合、CSS と JavaScript の属性セレクタの一部として使用する場合は大文字と小文字が区別されます。それ以外の場合は区別されません。

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

ブール値の属性

ブール値属性が存在する場合、その値は常に true です。ブール値属性には、autofocus、inert、checked、disabled、required、reversed、allowfullscreen、default,、loop、autoplay、controls、muted、readonly、multiple,、selected があります。これらの属性の 1 つ以上が存在する場合、要素は無効、必須、読み取り専用になります。存在しない場合、要素は無効になります。

ブール値は省略することも、空の文字列に設定することも、属性の名前にすることもできますが、値を文字列 true に設定する必要はありません。true、false、😀 など、無効な値はすべて true に解決されます。

次の 3 つのタグは同等です。

<input required>
<input required="">
<input required="required">

属性値が false の場合は、属性を省略します。属性が true の場合は、属性を含めますが、値は指定しません。たとえば、required="required" は HTML では有効な値ではありませんが、required はブール値であるため、無効な値は true に解決されます。ただし、無効な列挙型属性が欠落値と同じ値に解決されるとは限らないため、どの属性がブール値で、どの属性が列挙型で、無効な値を指定する可能性があるかを覚えておくよりも、値を省略する習慣を身につける方が簡単です。

true と false を切り替える場合は、値を切り替えるのではなく、JavaScript で属性をまとめて追加、削除します。

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

SVG などの XML 言語では、論理属性を含むすべての属性に値を含める必要があります。

列挙型の属性

列挙型属性は、ブール属性と混同されることがあります。これらは、事前定義された有効な値が限られた HTML 属性です。ブール値属性と同様に、属性は存在しても値がない場合、デフォルト値が設定されます。たとえば、<style contenteditable> を含めると、デフォルトは <style contenteditable="true"> になります。

ただし、ブール属性とは異なり、属性を省略しても false であるとは限りません。値が指定されていない属性が存在しても、必ずしも true であるとは限りません。また、無効な値のデフォルトは、null 文字とは限りません。例を続けます。contenteditable が指定されていないか無効な場合、デフォルトは inherit になります。明示的に false に設定することもできます。

デフォルト値は属性によって異なります。ブール値とは異なり、属性が存在する場合でも、自動的に「true」にはなりません。<style contenteditable="false"> を含めると、要素は編集できなくなります。値が無効な場合（<style contenteditable="😀"> や <style contenteditable="contenteditable"> など）、値は無効になり、デフォルトで inherit になります。

列挙型の属性の場合、ほとんどの場合、欠落値と無効な値は同じです。たとえば、<input> の type 属性がない場合、存在するが値がない場合、または値が無効な場合、デフォルトは text になります。これは一般的な動作ですが、必ずしもそうとは限りません。そのため、どの属性がブール値で、どの属性が列挙型であるかを把握することが重要です。値を間違えないように、可能であれば値を省略し、必要に応じて値を検索してください。

グローバル属性

グローバル属性は、<head> 内の要素を含む任意の HTML 要素に設定できる属性です。30 を超えるグローバル属性があります。理論上は、これらの属性はどの HTML 要素にも追加できますが、一部のグローバル属性は、一部の要素に設定しても効果がありません。たとえば、<meta> に hidden を設定しても、メタ コンテンツは表示されません。

id

グローバル属性 id は、要素の一意の識別子を定義するために使用します。次のような多くの目的で使用されます。 - リンクのフラグメント識別子のターゲット。- スクリプト作成用の要素の特定。- フォーム要素とラベルの関連付け。- 支援技術のラベルまたは説明を提供します。- CSS で（高い特定度または属性セレクタとして）スタイルをターゲティングする。

id 値はスペースなしの文字列です。スペースが含まれている場合、ドキュメントは改行されませんが、HTML、CSS、JS でエスケープ文字を使用して id をターゲットにする必要があります。その他の文字はすべて有効です。id の値は 😀 または .class にできますが、おすすめしません。現在の自分と将来の自分のためにプログラミングを簡単にするには、id の最初の文字を文字にして、ASCII の文字、数字、_、- のみを使用します。id 値は大文字と小文字が区別されるため、id の命名規則を定めて、それに従うことをおすすめします。

id はドキュメントに固有である必要があります。id を複数回使用しても、ページのレイアウトが崩れることはありませんが、JavaScript、リンク、要素のインタラクションが想定どおりに動作しない可能性があります。

ナビゲーション バーには 4 つのリンクがあります。リンク要素については後で説明しますが、リンクは HTTP ベースの URL に限定されません。現在のドキュメント（または他のドキュメント）のページのセクションへのフラグメント識別子にすることもできます。

機械学習ワークショップ サイトのページ ヘッダーのナビゲーション バーには、次の 4 つのリンクがあります。

href 属性は、リンクを有効にしたときにユーザーをリダイレクトするハイパーリンクを指定します。URL にハッシュマーク（#）の後に文字列が続く場合、その文字列はフラグメント識別子です。その文字列がウェブページ内の要素の id と一致する場合、そのフラグメントはその要素へのアンカー（ブックマーク）です。ブラウザは、アンカーが定義されているポイントまでスクロールします。

これらの 4 つのリンクは、id 属性で識別されるページの 4 つのセクションを参照しています。ユーザーがナビゲーション バーの 4 つのリンクのいずれかをクリックすると、フラグメント ID によってリンクされている要素（# を除いた一致する ID を含む要素）がスクロールして表示されます。

機械学習ワークショップの <main> コンテンツには、ID が付いた 4 つのセクションがあります。サイト訪問者が <nav> のいずれかのリンクをクリックすると、そのフラグメント ID を含むセクションがスクロールして表示されます。マークアップは次のようになります。

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

<nav> リンク内のフラグメント ID を比較すると、それぞれが <main> の <section> の id と一致していることがわかります。ブラウザには「ページ上部」への無料リンクが用意されています。href="#top"（大文字と小文字を区別しない）または href="#" を設定すると、ユーザーはページの上部にスクロールされます。

href のハッシュマーク区切り文字は、フラグメント識別子の一部ではありません。フラグメント識別子は常に URL の最後の部分であり、サーバーに送信されません。

CSS セレクタ

CSS では、#feedback などの ID セレクタを使用して各セクションをターゲットに設定できます。特定性を下げるには、大文字と小文字を区別する属性セレクタ [id="feedback"] を使用します。

スクリプト

MLW.com には、マウス ユーザー専用のイースター エッグがあります。ライトのスイッチをクリックすると、ページのオン / オフが切り替わります。

照明スイッチの画像のマークアップは次のとおりです。 html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> id 属性は、getElementById() メソッドのパラメータとして使用できます。また、# 接頭辞を付けて、querySelector() メソッドと querySelectorAll() メソッドのパラメータの一部として使用することもできます。

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

1 つの JavaScript 関数は、この機能を使用して id 属性で要素をターゲットにします。

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

HTML <label> 要素には for 属性があり、値として、関連付けられているフォーム コントロールの id を取得します。すべてのフォーム コントロールに id を含めて、各フォーム コントロールをラベルの for 属性とペア設定することで、すべてのフォーム コントロールにラベルが関連付けられます。

各ラベルは 1 つのフォーム コントロールにのみ関連付けることができますが、フォーム コントロールには複数のラベルを関連付けることができます。

フォーム コントロールが <label> の開始タグと終了タグの間にネストされている場合、for 属性と id 属性は必要ありません。これは「暗黙的な」ラベルと呼ばれます。ラベルを使用すると、各フォーム コントロールの用途をすべてのユーザーに知らせることができます。

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

for と id を関連付けることで、支援技術のユーザーが情報を利用できるようになります。また、ラベルの任意の場所をクリックすると、関連する要素にフォーカスが移動し、コントロールのクリック領域が拡大されます。これは、マウス操作の精度が低下する手指の不自由なユーザーだけでなく、ラジオボタンよりも指幅が広いすべてのモバイル デバイス ユーザーにとっても有用です。

このコードサンプルでは、偽のクイズの偽の 5 番目の質問は、単一選択の多肢選択式問題です。各フォーム コントロールには明示的なラベルがあり、それぞれに一意の id があります。ID が誤って重複しないように、ID 値は質問番号と値の組み合わせになっています。

ラジオボタンを含める場合は、ラベルがラジオボタンの値を記述するため、同じ名前のボタンをすべて <fieldset> に含めます。<legend> は、セット全体のラベル（質問）です。

ユーザー補助のその他の用途

ユーザー補助とユーザビリティにおける id の使用は、ラベルに限定されません。テキストの概要では、<section> をリージョン ランドマークに変換しました。<section> の aria-labelledby の値として <h2> の id を参照し、アクセス可能な名前を指定しました。

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

ユーザー補助を確保するために使用できる aria-* の状態とプロパティは 50 を超えます。aria-labelledby、aria-describedby、aria-details、aria-owns の値には、スペース区切りの id 参照リストを指定します。aria-activedescendant: 現在フォーカスされている子孫要素を識別します。値として、フォーカスされている単一要素の id 参照を取得します（一度にフォーカスできる要素は 1 つだけです）。

class

class 属性は、CSS（および JavaScript）で要素をターゲティングする追加の方法を提供しますが、HTML では他の目的には使用されません（ただし、フレームワークとコンポーネント ライブラリで使用される場合があります）。class 属性の値には、要素の大文字と小文字を区別するクラスのスペース区切りリストを指定します。

適切なセマンティック構造を構築すると、要素の配置と機能に基づいて要素をターゲティングできます。サウンド構造では、子要素セレクタ、関係セレクタ、属性セレクタを使用できます。このセクションでは属性について説明しますが、同じ属性または属性値を持つ要素にスタイルを適用する方法についても考えてみましょう。クラス属性を使用しないことを勧めているわけではありません。多くのデベロッパーが、クラス属性を使用する必要がないことを認識していないだけです。

これまで、MLW ではクラスを使用していません。クラス名を 1 つも指定せずにサイトを公開できますか？確認いたします。

style

style 属性を使用すると、インライン スタイルを適用できます。インライン スタイルとは、属性が設定されている単一の要素に適用されるスタイルです。style 属性の値には CSS プロパティ値のペアを取ります。値の構文は CSS スタイル ブロックの内容と同じです。CSS と同様に、プロパティの後にコロンが続き、値の後にセミコロンで各宣言を終了します。

スタイルは、属性が設定されている要素にのみ適用されます。ネストされた要素、<style> ブロック、スタイルシートの他のスタイル宣言でオーバーライドされていない限り、子孫は継承されたプロパティ値を継承します。この値は、その要素にのみ適用される単一のスタイルブロックの内容と同等のものであるため、生成コンテンツ、キーフレーム アニメーションの作成、他の at ルールの適用には使用できません。

style は確かにグローバル属性ですが、その使用は推奨されません。代わりに、スタイルを個別のファイルで定義します。ただし、style 属性は、テスト目的など、開発中に簡単なスタイル設定を行う場合に便利です。次に、「ソリューション」スタイルをリンクされた CSS ファイルに貼り付けます。

tabindex

tabindex 属性は任意の要素に追加して、フォーカスを受け取るようにできます。tabindex 値は、タブ順序に追加されるかどうかを定義します。必要に応じて、デフォルト以外のタブ順序に追加することもできます。

tabindex 属性の値には整数を指定します。負の値（-1 を使用するのが一般的）を指定すると、JavaScript などを使用して要素にフォーカスを設定できるようになりますが、タブシーケンスには要素が追加されません。tabindex の値が 0 の場合、要素はフォーカス可能になり、タブ操作で到達できるようになります。また、ページのデフォルトのタブ順序に、ソースコードの順序で追加されます。値が 1 以上の要素は、優先度の高いフォーカス順序に配置されるため、使用はおすすめしません。

このページには、<button> として機能する <share-action> カスタム要素を使用した共有機能があります。0 の tabindex は、カスタム要素をキーボードのデフォルトのタブ順に追加するために含まれています。

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

button の role は、この要素がボタンのように動作することをスクリーン リーダー ユーザーに通知します。JavaScript は、click イベントと keydown イベントの両方の処理、Enter キーと Space キーのキー入力の処理など、ボタンの機能の約束が守られるようにするために使用されます。

フォーム コントロール、リンク、ボタン、コンテンツ編集可能要素はフォーカスを受け取ることができます。キーボード ユーザーがタブキーを押すと、tabindex="0" が設定されているかのように、フォーカスが次のフォーカス可能な要素に移動します。他の要素はデフォルトでフォーカスできません。これらの要素に tabindex 属性を追加すると、通常はフォーカスを受け取らない要素でもフォーカスを受け取れるようになります。

ドキュメントに tabindex が 1 以上の要素が含まれている場合、それらの要素は別のタブシーケンスに含まれます。Codepen でわかるように、タブ入力は、値が小さい順に別々のシーケンスで始まり、その後、ソース順の通常のシーケンスで入力されます。

タブ順序を変更すると、ユーザー エクスペリエンスが著しく低下する可能性があります。そのため、キーボードやスクリーン リーダーなどの支援技術を使用してコンテンツを操作することが難しくなります。また、デベロッパーにとっても管理とメンテナンスが困難です。フォーカスは重要です。フォーカスとフォーカス順序について説明するモジュールが 1 つあります。

role

role 属性は、WHATWG HTML 仕様ではなく、ARIA 仕様の一部です。role 属性を使用すると、コンテンツに意味的な意味を付与できます。これにより、スクリーン リーダーはオブジェクトの想定されるユーザー操作をサイトのユーザーに知らせることができます。

コンボボックス、メニューバー、タブリスト、ツリーグリッドなど、HTML に同等の UI ウィジェットがないものもあります。たとえば、タブ付きのデザイン パターンを作成する場合は、tab、tablist、tabpanel のロールを使用できます。ユーザー インターフェースを物理的に確認できるユーザーは、ウィジェットを操作し、関連するタブをクリックしてさまざまなパネルを表示する方法を経験から学んでいます。ボタンのグループを使用して異なるパネルを表示する場合に、<button role="tab"> に tab ロールを含めると、スクリーン リーダーのユーザーは、現在フォーカスがある <button> が、通常のボタンのような機能を実装するのではなく、関連するパネルを表示できることを認識できます。

role 属性はブラウザの動作を変更したり、キーボードやポインタ デバイスの操作を変更したりしません。<span> に role="button" を追加しても、<button> にはなりません。そのため、セマンティック HTML 要素は本来の用途に使用することをおすすめします。ただし、適切な要素を使用できない場合は、role 属性を使用して、セマンティック以外の要素がセマンティック要素のロールに後付けされたことをスクリーン リーダーのユーザーに通知できます。

contenteditable

contenteditable 属性が true に設定された要素は、編集可能でフォーカス可能であり、tabindex="0" が設定されている場合と同様にタブ順序に追加されます。Contenteditable は、true と false の値をサポートする列挙型の属性です。属性が存在しない場合、または無効な値が設定されている場合のデフォルト値は inherit です。

次の 3 つの開始タグは同等です。

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

<style contenteditable="false"> を含めると、要素は編集できなくなります（<textarea> のようにデフォルトで編集可能である場合を除きます）。値が無効な場合（<style contenteditable="😀"> や <style contenteditable="contenteditable"> など）、値はデフォルトで inherit になります。

状態を切り替えるには、HTMLElement.isContentEditable 読み取り専用プロパティの値をクエリします。

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

また、editor.contentEditable を true、false、inherit に設定して、このプロパティを指定することもできます。

グローバル属性は、<style> 要素を含むすべての要素に適用できます。属性と少量の CSS を使用して、ライブ CSS エディタを作ることができます。

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

style の color を inherit 以外に変更してみてください。次に、style を p セレクタに変更してみてください。display プロパティを削除すると、スタイル ブロックが消えます。

カスタム属性

ここでは HTML グローバル属性のごく一部について説明しました。1 つまたは限定された要素セットにのみ適用される属性もあります。定義済みの属性が数百個あっても、仕様にない属性が必要になる場合があります。HTML で対応できます。

data- 接頭辞を追加することで、任意のカスタム属性を作成できます。属性の名前は、data- で始まり、xml で始まらず、コロンが含まれていない（:）小文字の文字列にすることができます。

HTML は寛容で、data で始まらないサポートされていない属性を作成しても、カスタム属性を xml で始めても、: を含めても、エラーは発生しませんが、data- で始まる有効なカスタム属性を作成することにはメリットがあります。カスタムデータ属性を使用すると、既存の属性名を誤って使用していないことを確認できます。カスタムデータ属性は将来にわたって有効です。

ブラウザは、特定の data- 接頭辞属性のデフォルトの動作を実装しませんが、カスタム属性を反復処理するデータセット API が組み込まれています。カスタム プロパティは、JavaScript を介してアプリケーション固有の情報を通信するのに最適な方法です。data-name の形式で要素にカスタム属性を追加し、該当する要素の dataset[name] を使用して DOM からアクセスします。

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

getAttribute() は、完全な属性名を使用して使用することも、よりシンプルな dataset プロパティを使用することもできます。

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

dataset プロパティは、各要素の data- 属性の DOMStringMap オブジェクトを返します。<blockquote> にはいくつかのカスタム属性があります。データセット プロパティを使用すると、カスタム属性の名前と値にアクセスするために、そのカスタム属性が何であるかを把握する必要がなくなります。

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

この記事の属性はグローバルです。つまり、任意の HTML 要素に適用できます（ただし、すべての属性が要素に影響するわけではありません）。次に、リンクについて詳しく説明します。その際、導入画像で説明していない 2 つの属性（target と href）と、他の要素固有の属性についても説明します。

理解度を確認する

属性に関する知識をテストします。

id はドキュメント内で一意である必要があります。

False
もう一度お試しください。
正しい
正解です。

正しく作成されたカスタム属性を選択します。

data-birthday
正解
birthday
もう一度お試しください。
data:birthday
再試行