クイズ：HTMLはまだ履歴書に載せるべき？

<ul>タグは順序なしリストを作成し、項目は通常箇条書きで表示されます。

<dd>要素は、説明リスト内で説明、定義、または値を定義し、<dl>タグ内で<dt>（説明用語）とペアで使用されます。

これはキーと値のデータを表示する際に便利です。プロフィール情報、設定、統計情報などが一般的な例です。

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

The <figure> tag is typically used to wrap self-contained (media) content, like an image or chart, along with <figcaption> to provide a caption.

This is useful for images, diagrams, code snippets, and more.

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

<article>要素は、独立して配布または再利用できるスタンドアロンのコンテンツを定義するために使用されます。

ブログ記事、ニュース記事、フォーラムの投稿、ユーザーコメントなどによく使われます。

ページ上で複数のarticleを使用することもできます（例えば無限スクロールページ）。また、互いに入れ子にして「スタンドアロンコンテンツ」の階層を作成することもできます。

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

<fieldset> は関連するフォームコントロールをグループ化するために使用され、<legend> はそのグループにタイトル/ラベルを提供し、アクセシビリティを向上させます。

これは、配送先住所や支払い詳細のセクションなど、関連するフォーム要素をグループ化するのに便利です。

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

<meter>要素は、温度、ディスク使用量、投票数など、設定された範囲内のスカラー（単一）測定値を表すために使用されます。

これは<progress>バーに似ているように見えるかもしれませんが、プログレスバーは常にゼロから始まります。したがって、<progress>要素は「完了のパーセンテージ」を示し、<meter>は定義可能な範囲内の任意の値を示します。

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

<source>要素は利用可能なメディア形式を指定するために使用されます.

具体的には、<video>、<audio>、<picture> 要素と共に使用され、ブラウザが最も適切な形式を選択できるようにします。

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

<hgroup>要素は、見出しと関連する二次的なコンテンツ（通常は1つ以上の<p>要素）をグループ化します。

見出しにサブタイトル、タグライン、または文書アウトラインで別の見出しにすべきでない代替タイトルがある場合に便利です。

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

<menu>はコマンドまたはインタラクティブコントロールのリストを表します。

リストがナビゲーションリンクの場合は、<nav>と<ul>を使用してください。ツールバー的なコントロールやコマンドリストには<menu>を使用します。

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details>は折りたたみ可能なコンテンツを可能にし、<summary>はコンテンツの表示タイトルを指定します。

これはFAQ、折りたたみ可能なセクション、またはトグル可能なコンテンツに便利です。

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

<dialog>要素はポップアップやモーダルに使用され、セマンティックマークアップ、拡張CSS、およびこれらのインタラクションのためのネイティブAPIを提供します。

JavaScriptを使用して、モーダルダイアログの場合は.showModal()、非モーダルダイアログの場合は.show()で開き、.close()またはmethod="dialog"を使用したフォーム送信で閉じます。

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

<time>要素は日付、時刻、または期間を表すために使われます。人間が読めるコンテンツと機械が読めるdatetime属性を含めることができます。HTMLには<date>要素はありません。

ARIA（Accessible Rich Internet Applications）属性は、スクリーンリーダーやその他の支援技術に追加のコンテキストを提供することで、ウェブアクセシビリティを向上させます。

要素を説明するために使用できるロール、状態、プロパティがあります。

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

role属性は、支援技術に対して要素の目的を説明し、アクセシビリティの向上に役立ちます。