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は誰が生みの親？

WHATWGです

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取込

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取込ここらへんでもめます

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

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取込ここらへんで停戦

これからは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栄枯盛衰は世の習い

HTML栄枯盛衰は世の習い

Kazuya Takami

More Decks by Kazuya Takami

Featured

Transcript