HTML栄枯盛衰は世の習い

HTML栄枯盛衰は世の習い
- Web Night Miyazaki vol.14 -

高見和也（Takami Kazuya）
https://twitter.com/miiitaka
https://www.facebook.com/miiitaka
{ Company: “株式会社まなびと” },
{ Role: “Front-End Developer 兼代表取締役” }
https://github.com/miiitaka

名刺交換はこちらで（名刺交換サービス Eight ）
https://8card.net/virtual_cards/DptPRPyciFfr-MHF3eTIeQ

2021年1月28日永眠（享年13）

今は HTML Living Standard が標準です

HTML Living Standardは誰が生みの親？

Web Hypertext Application Technology Working Group（WHATWG、ワットワーキン
ググループ、ワットダブルジー）は、HTMLと関連技術の開発をするためのコミュ
ニティである。W3Cが策定したXHTMLや、W3Cがウェブ開発者の要望を軽視して
いることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって2004年
に結成された。2017年末にはMicrosoftも参加している。
W3Cの対抗組織として始まったWHATWGだが徐々に影響力を強め、
例えば、WHATWGが提唱したHTML Living Standardを基にして、
W3CがHTML5を策定した。2019年、今後は W3C自身は、
HTMLとDOMの策定をやめ、WHATWGに協力することを表明した。
Web Hypertext Application Technology Working Group
※出典：Wikipedia
https://ja.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group

要するに仲が悪い
（※個人の見解です）

HTML4
ブランチで表すとこう
1997.12
4.0勧告
2018.3
4.01廃止
1999.12
4.01勧告
XHTML
2000.1
1.0勧告
2018.3
1.01廃止
2009.7
開発打切
2002.8
SE勧告
HTML5
2007.3
共同作業開始
HTML Living Standard
2011.11
勧告
2008.1
草案公開
2012
共同作業中止
2014.10
5.0勧告
2016.11
5.1勧告
2017.12
5.2勧告
2021.11
5.2廃止
5.1取込 5.2取込

HTML4
1997.12
4.0勧告
2018.3
4.01廃止
1999.12
4.01勧告
XHTML
2000.1
1.0勧告
2018.3
1.01廃止
2009.7
開発打切
2002.8
SE勧告
HTML5
2007.3
共同作業開始
2011.11
勧告
2008.1
草案公開
2012
共同作業中止
2014.10
5.0勧告
2016.11
5.1勧告
2017.12
5.2勧告
2021.11
5.2廃止
5.1取込 5.2取込
ここらへんでもめます

しかし両者大人なので停戦になります

HTML4
1997.12
4.0勧告
2018.3
4.01廃止
1999.12
4.01勧告
XHTML
2000.1
1.0勧告
2018.3
1.01廃止
2009.7
開発打切
2002.8
SE勧告
HTML5
2007.3
共同作業開始
2011.11
勧告
2008.1
草案公開
2012
共同作業中止
2014.10
5.0勧告
2016.11
5.1勧告
2017.12
5.2勧告
2021.11
5.2廃止
5.1取込 5.2取込
ここらへんで停戦

これからはHTML Living Standard

HTML LS で何が変わるのか？

HTMLを書く上では大きな変化はありません

① 宣言は変わらず <!DOCTYPE html>
② <img> 要素に遅延読込ができる loading 属性追加（以前は JavaScript で実装してた）
→WordPress5.5から投稿などで img要素に自動的に追加されます※次ページ参照
③ autofocus 属性がフォーム系の要素だけでなくフォーカス可能な要素であればOK
④ <a href=“”> で遷移したとき別URLに ping を送信する ping 属性追加（ area 要素でも可）
⑤ <h1> は複数設定可能（但し 1 section 1 要素が原則）
⑥ グローバル属性として slot 属性対応（Shadow DOMに追加がより柔軟に）
⑦ autocapitalize 属性（自動大文字機能の ON / OFF ※iOSのみ）
⑧ nonce 属性（Base64指定。セキュリティは意識したい）
何が変わるの？（たくさんあるので高見が気になるものをピックアップ）

レイアウトシフト※を防ぐために指定。もし画像タグにwidth・height属性がなければ
1. ブラウザは画像の幅と高さの比率を把握できない
2. レスポンシブWebデザインの場合ブラウザは画像をどんなサイズで表示すべきか計算できない
3. サイズが不明のためブラウザは画像のダウンロード前に表示領域を確保できない
4. 画像が遅延読み込みされたら、コンテンツの移動が発生しレイアウト崩れを起こす
可能性がある
WordPressでは画像タグにwidth・height属性がないものには「loading=”lazy”」を
自動追加しない仕様となっています。
遅延読込ができる loading 属性の注意点
→ width・height 属性が必須
※ 後から読み込まれたコンテンツの影響で、すでに読み込み済みのコンテンツの移動が発生し
レイアウト崩れを起こしてしまう現象の事。

ご清聴ありがとうございました。

HTML栄枯盛衰は世の習い

Recommended

Recommended

More Related Content

Similar to HTML栄枯盛衰は世の習い

Similar to HTML栄枯盛衰は世の習い (20)

More from Takami Kazuya

More from Takami Kazuya (20)

HTML栄枯盛衰は世の習い