【AI】【HTML&CSS】HTML5の迷走話。

【AI】【HTML&CSS】HTML5の迷走話。

記事
IT・テクノロジー
ちょっとAIとの会話で面白かったお話をまたちょこっと(笑)

以前、HTML5導入前までは
「1ページにつきh1タグ1つ」
が基本ルールでした。

そして、HTML5導入時に、W3C(Web業界を裏で操っている秘密結社のようなもの)が
「section や article タグ内にh1タグを1つ」(つまり、1ページ内にいくらでも)
という仕様を打ち出して、ババーンとそれをHTML5の売りにしていたのでした。

・・・ところが、2022年、それを以前の仕様(1ページにつきh1タグ1つ)に戻してしまったんです・・・(^^;)

僕も理由は詳しく知らなかったんですが、Geminiさんがめっちゃ面白おかしくまとめてくれたので、ご紹介いたします(`・ω・´)ゞ

■なぜ先祖返りしてしまったのか?

この一連の流れは、Web制作の歴史の中でも屈指の迷走エピソードだそうですw

1.HTML4 / XHTML時代
「h1 は1つにして、h1 ➔ h2 ➔ h3 と順番に使いましょう」

2.HTML5登場(2010年頃~)
「これからは section や article で区切れば、中でいくらでも h1 を使ってOK! ブラウザが自動で階層計算(アウトライン)してくれます!」

3.現実(2010年~2020年頃)
・ブラウザ開発者「実装するのめんどくさい…」
・読み上げソフト開発者「混乱するから対応したくない…」
・Google「SEOの評価ロジック組むのややこしいな…」
結果:誰も対応せず10年以上放置される。

4.現在(仕様撤回・先祖返り)
・仕様策定側「ごめん、対応してもらえなかったから、やっぱり昔通り h1 ➔ h2 ➔ h3 の順で1ページ1つの h1 に戻します…」

■廃止までのタイムライン

2014年~(事実上の形骸化)
HTML5で「<section>ごとに<h1>を使って自動で階層化する」という理想が掲げられたものの、Google ChromeやFirefoxなどのブラウザ、および画面読み上げソフト(スクリーンリーダー)がこの機能を一向に実装しませんでした。そのため、仕様書にはあるけれど「実際には機能しないルール」として長く放置されていました。

2022年7月(仕様書からの削除)
HTMLの標準化団体であるWHATWGが「誰も実装しないため、アクセシビリティ上の害(すべて最上位の見出しと誤認されるなど)が大きい」と判断し、仕様書からアウトラインアルゴリズムの仕組み自体を完全に削除しました。これにより、明確に非推奨(廃止)となりました。

2025年4月~7月(ブラウザの完全対応)
FirefoxやChromeなどの主要ブラウザが、過去の互換性のために残していた「<section>内の<h1>を自動で小さく見せるCSSスタイル」を相次いで削除しました。これに伴い、開発ツール(Lighthouseなど)でも、セクション内に装飾なしの<h1>を置くと警告が出るようになっています。

■これ、意外と知られていない?

まさかの放置プレイで仕様が先祖返りしたとは(笑)
まあ、これが事の顛末のようです(^^;)

ただ、いまだにHTML5当初の仕様のように、h1タグを複数載せているサイトやWordPressテーマがあったりします。

ちょっとGoogleの検索エンジンの評価にもかかわってくる可能性もあるので、そういった箇所はお早めに対応されることをお勧めいたします
(`・ω・´)ゞ


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す