HTML 解体新書を購入してしばらく積ん読してしまっていたのですが、ようやく目を通したところ、知らなかった情報が多く記載されていたのでまとめ。
注意すべき点
section 要素
見出しと合わせて一つのまとまりを作る。見出しを持たない section は避ける（何度もやってしまっていた）。
header 要素
ページそのものの header だけでなく、最も近い祖先のヘッダとなる。
article 要素と組み合わせても良い。
<article>
<header>記事のタイトル</header>
<p>記事の説明…</p>
</article>hr 要素
区切りを表すが、見出しや section を使っていれば不要。
装飾の横線として使うべきでない。
i 要素
アイコンフォントとして使われがち？だが、HTML 仕様ではそのような用法は定義されていない。
span が better。（とはいえ fontawesome のサンプルは <i> なので、ある程度市民権はある用法？）
実は知らなかった要素達
div や CSS、JavaScript を用いて作っていたが、実は native なものもあった…という要素。
time 要素
時刻を表示する際に、マシンリーダブルにできる。アクセシビリティ的に良い？
<time datetime="2022-01-05">2022/01/05</time>details 要素
詳細情報の表示・非表示を切り替えられる。
<details>
<summary>サマリ</summary>
<ul>
<li>説明1</li>
<li>説明2</li>
</ul>
</details>
fieldset 要素
フォームコントロールをグループ化できる。なにか使えそうな気がする…？
<fieldset>
<legend>caption</legend>
<label>
ラベル
<input type="password" />
</label>
<label>
フォーム2
<input type="number" />
</label>
<label>
<input type="checkbox" />
チェックボックス
</label>
</fieldset>
meter 要素
progress 要素は知っていたが、meter 要素は知らなかった。
割合で示す値を表示でき、値に応じて見た目を変えることができる。
<meter value="40" max="100" low="30" high="70"></meter>
<meter value="20" max="100" low="30" high="70"></meter>
<meter value="80" max="100" low="30" high="70"></meter>
input 要素
めちゃくちゃいろいろな機能があった。JS 側で validation したほうが都合が良いこともありそうではある（zod とか）。
maxlength, minlength
そのまま。
max, min, step
時刻系や range において使える。
step 便利そう…と思ったが、時刻の場合、キーボードの上下のみの対応で、GUI での選択では適用されない様子…
pattern
正規表現で許容パターンを記述できる。title 要素でエラー分を指定。
autocomplete
ページに一つしか存在できないが、表示されてすぐ focus できる。
datalist 要素
補完の候補を提示できる
おわりに
HTML だけでも native で多くの機能がある…ことはわかってはいたものの、改めて見ると思った以上に多かった。
知らずに JavaScript で実装してしまうと手間的にもアクセシビリティ的にも不利。
アクセシビリティ関連の話題も多く取り上げられていて勉強になったが、ちゃんとアクセシビリティを理解するにはそれ用の本を読んだほうが良さそう。