こんにちは！
エイチームフィナジーアドベントカレンダー12日目を担当します @chika_hoge です。
推しタグは dl, dt, dd タグです。よろしくお願いします。
はじめに
最近ショックだったことがあります。
それはいつの間にか td の width や border 属性が非推奨になっていたこと…。
HTML 要素は、web 制作に携わる人なら重要な言語ですが、なかなかアップデート情報を拾いに行くことが少ないな、って感じます。
この記事では今知っておいた方がいい HTML 要素のお話をしたいと思います。
html5 あたりから情報のキャッチアップが怪しい…そんな人向けにご紹介します。
HTML ってどこが管理しているの？
WHATWG の Living Standard が HTML 標準仕様です。
元々 HTML の最新仕様の策定については、W3C と WHATWG それぞれが公開しているものが存在していました。
しかし一年半前に 両者が協力して仕様策定し、今後は WHATWG Living Standard が標準仕様になるとアナウンスされました。
XHTML の時代を知っている人からすれば感慨深いですね…。
ちなみに、HTML だけではなく DOM の標準化も WHATWG 管轄です。
しかし CSS の管轄は変わらず W3C のままとなっています。
Living Standard の新し目要素をざっと解説！
早速いきます！
hgroup
- 見出しのグループ化をおこないます。
- サブタイトルなど見出しが複数階層にある場合に機能します。
- 子要素は
h1〜h6になります
-
hgroupの最高ランクは、子要素の一番高いランクになります。- 例：
h1がある場合はhgroupはh1と同等ランクになります。
- 例：
hgroup.html
<hgroup>
<h1>鳥の種類</h1>
<h2>オカメインコ</h2>
</hgroup>
menu
- ユーザーが実行またはアクティブ化可能な要素のグループを表します。
- HTML5.2 で一度廃止になりましたが、Living Standard では復活しています。
-
ulの代替手段として使われ、子要素は主にli、もしくはスクリプトサポート要素（script,template）です。
memu.html
<menu>
<li><button onclick="console.log('copy')">copy</button></li>
<li><button onclick="console.log('cut')">cut</button></li>
<li><button onclick="console.log('paste')">paste</button></li>
</menu>
ここからはご存知の方も多いかもしれません。
picture, source 要素
- デバイスサイズや解像度など、メディアクエリを使用し、表示する画像を切り替えることができます。
- また、ブラウザが対応していない形式の画像なら、別の画像を表示することも可能です。
- WebP形式の画像に対応していないブラウザなら、PNG画像を表示など
- source が複数ある場合は、上位に記載されている source が優先されます。
picture.html
<picture>
<source srcset="https://placehold.jp/700x150.png"
media="(min-width: 800px)">
<img src="https://placehold.jp/350x150.png" />
</picture>
width: 800px 以上の場合
width: 799px 以下の場合
fieldset, legend 要素
- fieldset
- 複数のフォーム部品を1つのグループにまとめることができます。
- legend
- フォーム部品のグループにタイトルや説明を付けることができます。
fieldset_legend.html
<form>
<fieldset>
<legend>あなたは何派？</legend>
<input type="radio" name="animal" value="dog">犬派<br>
<input type="radio" name="animal" value="cat">猫派<br>
<input type="radio" name="animal" value="bird" checked>鳥派<br>
</fieldset>
</form>
details, summary 要素
- Markdown形式のエディタを使っている人にはおなじみですね。
- details 要素
- 追加の詳細情報を記載することができます。
- ブラウザ上は折りたたみ要素として表示されます。
- summary 要素
- 詳細情報の要約を記載することができます。
details_summary.html
<details>
<summary>ここに要約が入ります</summary>
<ul>
<li>ここに詳細な内容が入ります</li>
<li>オカメインコはインコと名前に入っていますが実はオウムです。</li>
</ul>
</details>
最後に
- 上記は網羅的に新しい要素を紹介しているわけではなく、特に知っておいた方が良いとされる要素をピックアップしています。
- 細かい変更点（
dl要素の直下にdiv書いてOKなど）や属性レベルでの変更点などは触れていませんが、色々と細かいところも変化しているので、そういった点もご確認いただいた方がいいかと思います。 - こちらのサイトがとっても分かりやすかったのでオススメです。
ところで、Living Standard アップデート情報取りに行くの大変過ぎません？
- CSS なら策定状況などに合わせて情報を取りに行けばいいですが、Living Standard はそういった勧告などの策定状況やバージョン管理がされていないため、新しくアップデートがかかった時に取りに行くことがめっちゃ難しいな、と思っています。
- リポジトリにコミットはされてますが、それを追い続ける気力は流石にない…。
- 今回は知識＋検索＋本家のサイトをざっと見し、紹介する要素を洗い出しました。
- 他の人はどうやって情報キャッチアップしているのか気になります。おすすめのやり方などあれば是非教えてください！
ワクワク楽しいマークアップ
- 新しく追加された要素や属性を見ていると、js 関連やセキュリティ関連のものが増えていっていると実感です。（
slot、template、dialog要素やintegrity属性など） - また、今回は取り上げませんでしたが CSS についてもアップデートが目覚ましく、ワクワクするプロパティがいっぱいです。
- HTML は進化していっています。書こうと思ったらどうとでも書けますが、よりセマンティックに書けるとより良いかなと思います。
- そもそも、やっぱりマークアップは楽しい！皆さまも良いマークアップライフを〜