ハイパーテキスト マークアップ言語（HTML）は、ウェブ上に表示されるドキュメントの構造を記述するための標準のマークアップ言語です。HTML は一連の要素と属性で構成されています。これらを使用して、ドキュメントのすべてのコンポーネントをマークアップして、意味のある方法で構成します。
HTML ドキュメントは、基本的には、HTML 要素とテキストノードを含むノードのツリーです。HTML 要素は、段落、リスト、表の作成、画像やフォーム コントロールの埋め込みなど、ドキュメントのセマンティクスと書式設定を提供します。各要素に複数の属性を指定できます。他の要素やテキストなど、多くの要素にコンテンツを含めることができます。その他の要素は空で、タグと属性で関数が定義されています。
要素には、メタデータ、セクション、テキスト、インライン セマンティック、フォーム、インタラクティブ、メディア、コンポーネント、スクリプトなど、いくつかのカテゴリがあります。このシリーズでは、これらのほとんどについて説明します。まず、要素とは何でしょうか。
要素
HTML は一連の要素で構成され、これらの要素を使用してコンテンツのさまざまな部分を囲み、特定の方法で表示または動作させます。HTML 要素は、山かっこ（< と >）を使用して記述されたタグで区切られます。
ページタイトルはレベル 1 の見出しで、<h1> タグを使用します。実際のタイトルは「ML ワークショップ」です。これは、この要素のコンテンツです。コンテンツは開始タグと終了タグの間に配置します。開始タグ、終了タグ、コンテンツ全体が要素です。
終了タグは開始タグと同じで、先頭にスラッシュが付きます。
要素とタグは同じ意味ではありませんが、多くの人はこの用語を同じ意味で使用しています。角かっこで囲まれた内容がタグ名になります。タグには角かっこが含まれます。ここでは <h1> です。「要素」は、開始タグと終了タグ、およびこれらのタグ間のすべてのコンテンツ（ネストされた要素を含む）です。
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
この段落要素には他の要素がネストされています。要素をネストするときは、適切にネストすることが重要です。HTML タグは、開いたときと逆の順序で閉じます。上記の例では、<em> の開始と終了が <strong> 開始タグと終了タグ内であり、<strong> が <p> タグ内で開始と終了の両方になっていることに注目してください。
タグはブラウザに表示されません。タグは、ページのコンテンツを解釈するために使用されます。
HTML は非常に寛容です。たとえば、終了タグ </li> を省略すると、終了タグが暗黙的に指定されます。
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
<li> を閉じないことも有効ですが、おすすめしません。終了タグ </ul> は必須です。順序なしリストの終了タグが省略されている場合、ブラウザはリストとリスト項目の終了位置を特定しようとしますが、この決定に同意しない可能性があります。
各要素の仕様には、終了タグが必須かどうかが記載されています。仕様の「いずれのタグも省略できない」とは、開始タグと終了タグの両方が必要であることを意味します。この仕様には、必要なすべての終了タグのリストが記載されています。
上記の例の <em> または <strong> が閉じられていない場合は、ブラウザが要素を閉じる場合と行わない場合があります。<em> を閉じないと、コンテンツが想定と異なる方法でレンダリングされる可能性があります。</ul> が省略され、次のタグがリストの親コンテナの終了タグである場合、運が良くなります。一方、<h1> 開始タグの場合、ブラウザは、スタイルの継承を含め、ヘッダーがリストの一部であると想定します。終了タグが省略されていると大きな問題が発生します。<script>、<style>、<template>、<textarea>、<title> などの一部のタグを閉じないと、次の例に示すように、後続のコンテンツが中断します。
一部のコンテンツが意図せず斜体になっていたり、見出しがインデントされていたりしても、ビジネスに支障が生じることはありません。</textarea> を追加するのを忘れた、または </style> を閉じ忘れてまったく表示されないなどの理由で、コンテンツが 200x300 のテキスト領域にスタイルなしで表示されると、サイトが使用不能になります。
場合によっては、マークアップ内にタグがない場合でも、ブラウザ内に要素が含まれることがあります。要素は暗黙的に指定される可能性があるため、タグがなくても要素は存在できます。そうしない場合でも、ブラウザによってコンテンツの周囲に <body></body> が追加され、テーブルの行の周囲に <tbody></tbody> が追加されます。ただし、タグを省略することは有効ですが、しないでください。また、すでに述べたように、正しくネストされていることを確認してください。マークアップのメンテナンス担当者である皆さん、そしてコードベースに取り組んでいる皆さんに感謝の意を表します。
要素には、置換される要素と置換されない要素の 2 種類があります。
置換されない要素
前のセクションでマークアップした段落、ヘッダー、リストはすべて置換されません。置換されない要素には、開始タグと終了タグ（任意）で囲まれており、サブ要素としてテキストなどのタグが含まれる場合があります。これらの囲みタグにより、フレーズや画像をハイパーリンクに変換したり、文をヘッダーにしたり、単語を強調したりできます。
置換要素と void 要素
置換された要素はオブジェクトに置き換えられます。ほとんどのフォーム コントロールではグラフィカル ユーザー インターフェース（UI）ウィジェット、ほとんどの画像ではラスター ファイルやスケーラブルな画像ファイルが使用されます。オブジェクトに置き換えられ、それぞれにデフォルトの外観が適用されます。オブジェクトの種類とブラウザに応じて、適用可能なスタイルは限定されます。たとえば、ほとんどのブラウザでは、UI ウィジェットと関連擬似要素のスタイルが制限されています。ラスター画像の場合、高さ、幅、クリッピング、フィルタリングは CSS で簡単に行えます。一方、HTML に類似した XML ベースのマークアップ言語を使用したスケーラブルなベクター グラフィックは、（ラスター画像が含まれていない限り）高い拡張性です。また、完全なスタイル設定も可能です。埋め込み SVG を埋め込みた HTML ファイルにリンクされた CSS からスタイル設定できるかどうかは、SVG がどのように設定されているかによって異なります。
この例では、置換された 2 つの要素 <img> と <input> が、テキスト以外のコンテンツ（それぞれ画像とグラフィカル ユーザー インターフェース オブジェクト）に置き換えられます。
<input type="range">
<img src="switch.svg" alt="light switch">
上記の HTML の出力:
置換要素と空要素はよく混同されます。void 要素はすべて自己終了要素であり、1 つのタグで表されます。つまり、void 要素の終了タグはありません。必要に応じて、タグの末尾にスラッシュを含めると、多くの人がマークアップを読みやすくなります。この例では、スラッシュを使用してタグを自動的に閉じています。
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
末尾のスラッシュは、要素が自動終了し、一致する終了タグや終了タグがないことを示す方法です。
void 要素には、テキスト コンテンツやネストされた要素を含めることはできません。void 要素には、<br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<source>、<track>、<wbr> などがあります。
置換された要素のほとんどは void 要素ですが、すべてではありません。video、picture、object、iframe 要素は置換されますが、void ではありません。すべての要素に他の要素やテキストを含めることができるため、すべてに終了タグがあります。
ほとんどの void 要素が置換されますが、base、link、param、meta の場合と同様に、すべてではありません。コンテンツを含めることはできず、置き換えられない void 要素があると、画面に何もレンダリングしないのはなぜですか？コンテンツに関する情報を提供するため。この情報は、要素の属性によって提供されます。
属性
<img> と <input> の例では、開始タグに要素タイプ以外のものが含まれていることにお気づきでしょうか。このようなスペースで区切られた名前と値のペア（値を含めるかどうかは任意）は、属性と呼ばれます。HTML を驚くほど強力なものにしているのは、属性です。このシリーズでは何百もの属性と属性値を取り上げますが、ここでは一般的な属性と属性値を指定する方法について説明します。
属性は要素に関する情報を提供します。この属性は、残りの開始タグと同様、コンテンツ内では表示されませんが、目の見えるユーザーと目の見えないユーザー（支援技術や検索エンジン）に対してコンテンツがどのように表示されるかを定義するのに役立ちます。
属性は開始タグにのみ表示されます。開始タグは常に要素タイプから始まります。タイプの後に 0 個以上の属性を 1 つ以上のスペースで区切って記述できます。ほとんどの属性名の後には、その属性値と等しい等号（開始引用符と終了引用符で囲んだもの）が続きます。
この例では、2 つの属性を持つアンカーリンクを使用しています。この 2 つの属性により、「Registration」というコンテンツが内部アンカーリンクに変換され、リンクがクリック、タップ、またはキーボードなどのデバイスでアクティブにされたときに、現在のブラウザタブの属性 id="register" までスクロールされます。
属性は、要素の動作、リンク、機能を定義します。その他の属性については、このシリーズの属性のセクションをご覧ください。現時点では、一部の属性はグローバルであり、どの要素の開始タグ内でも使用可能です。複数の要素にのみ適用されるものもあれば、1 つの要素にのみ適用される要素固有のものもあります。
ほとんどの属性は名前と値のペアです。ブール値属性は、値が true、false、または属性の名前と同じであり、属性としてのみ含めることができます。値は必要ありません。
<img src="switch.svg" alt="light switch" ismap />
この画像には、src、alt、ismap の 3 つの属性があります。src 属性は、SVG 画像アセットの場所を指定するために使用します。alt 属性は、画像の内容を説明する代替テキストを指定します。ismap 属性はブール値であり、値は必要ありません。これは、属性について説明するためだけです。これらの属性については、images のセクションで詳しく説明します。
属性の引用符は必ずしも必要というわけではありませんが、必要な場合もあります。値にスペースや特殊文字が含まれている場合は、引用符が必要です。このため、常に引用することをおすすめします。属性値が引用符で囲まれている場合は、属性間にスペースを 1 つ以上含める必要はありませんが、安全のため、また読みやすくするために引用符とスペースの使用をおすすめします。
HTML では大文字と小文字が区別されませんが、一部の属性値では大文字と小文字が区別されます。この仕様で定義されている値では、大文字と小文字は区別されません。id や class の値など、キーワードとして定義されていない文字列は、通常、大文字と小文字が区別されます。
HTML では属性値の大文字と小文字を区別する場合、CSS や JavaScript で属性セレクタの一部として使用すると、大文字と小文字が区別されます。
マークアップを読みやすくするために、タグ内のすべての要素名と属性名に小文字を使用して HTML をマークアップし、すべての属性値を引用符で囲むことをおすすめしますが、必須ではありません。「XHTML スタイル マークアップ」という用語を聞いたことがあるかもしれませんが、これは末尾にスラッシュが付いた空の要素が自己終了し、それが終わっていることを意味します。
要素の外観
セマンティック要素のデフォルトの外観は、ユーザー エージェント スタイルシートで設定します。ほとんどのブラウザではこの目的で実際のスタイルシートが使用されますが、コードでシミュレートされるブラウザもあります。最終的な結果は同じです。ユーザー エージェント スタイルシートの制約は HTML 仕様によって設定されますが、ブラウザには大きな柔軟性があるため、ブラウザ間で若干の違いがあります。
選択する要素と使用するタグは、表示するコンテンツに適したものにする必要があります。タグには意味があるからです。要素のセマンティクス（role）は、支援技術にとって重要です。場合によっては検索エンジンにとっても重要です。HTML は、コンテンツの外観を定義するためではなく、コンテンツを構造化するために使用してください。デザインは CSS の領域です。<h1>、<strong>、<em> など、コンテンツの外観を変更する多くの要素にはセマンティックな意味がありますが、外観は作成者のスタイルによって変更でき、通常は変更されます。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
要素、属性、JavaScript
DOM（ドキュメント オブジェクト モデル）は、HTML ドキュメントの構造とコンテンツを表すデータ表現です。ブラウザは HTML を解析して、テキストのすべての要素とセクションに対して JavaScript オブジェクトを作成します。これらのオブジェクトをノードと呼びます。それぞれ要素ノード、テキストノードと呼ばれます。
すべての HTML 要素の機能を定義するインターフェースがあります。HTML DOM API は、DOM を介したすべての HTML 要素へのアクセスと制御を提供し、HTML 要素とそれを継承するすべての HTML クラスのインターフェースを提供します。HTMLElement インターフェースは、HTML 要素とその子孫ノードすべてを表します。他のすべての要素は、それを継承するインターフェースを介して実装します。継承する各インターフェースには、コンストラクタ、メソッド、プロパティがあります。継承された HTMLElement プロパティを使用して、すべてのグローバル属性、input、pointer、transition、animation イベントにアクセスできます。個々の要素のサブタイプ（HTMLAnchorElement、HTMLImageElement など）を使用して、要素固有の属性値とメソッドにアクセスできます。
理解度をチェックする
HTML に関する知識をテストする
スタイル設定には HTML 要素を使用します。
置換した要素を選択します。
<img><p><ul><input>正しい記述をすべて選択してください。