MENU

Webデザイン技能検定2級:HTML5とHTML Living Standardの変遷と違い

Webデザイン技能検定2級対策:HTML5からHTML Living Standardへの変遷を解説。W3CからWHATWGへの主導権の移行や、バージョン廃止による継続的な更新(Living Standard)の仕組み、i・b・main要素などの仕様変更をまとめた図解アイキャッチ。手書きのアニメ風解説者がポイントを案内。

現在のWeb制作において、HTMLの規格がどのように管理されているかを理解することは、学科試験・実技試験ともに不可欠です。かつての主流だった「HTML5」と、現在の標準である「HTML Living Standard」の違いを整理しましょう。

目次

1. HTMLの歴史と規格の統一

長年、HTMLの規格策定には2つの団体が関わっていました。

  • W3C (World Wide Web Consortium):
    主にWeb技術の標準化を行う団体。「HTML5」「HTML5.1」などを策定。
  • WHATWG(ワットダブリュージー) (Web Hypertext Application Technology Working Group):
    ブラウザベンダー(Apple, Google, Mozillaなど)によって設立された団体。「HTML Living Standard」を策定。

かつてはこの2団体がそれぞれ独自の規格を出していましたが、2019年にW3CがWHATWG版のHTMLを唯一の標準として認めることで合意し、現在はHTML Living Standardが唯一の公式規格となっています。

💡 さらに詳しく:HTML5の歴史と規格一本化の背景

2級試験では、現在の標準である Living Standard の知識はもちろん、「HTML5から5.1、5.2へと進化する過程で何が変わったのか」という歴史的な経緯も頻出ポイントとなっています。

「なぜW3CとWHATWGの2つがあるの?」「2019年に何が起きたの?」といった歴史の裏側や、年度ごとの具体的な変更点についてより深く知りたい方は、ぜひこちらの詳細解説もチェックしてみてください。合格に必要な「規格の変遷」の知識がより確実なものになります!

2. 「Living Standard」という考え方

これまでの「HTML4.01」や「HTML5」のように、バージョン番号をつけて完成させる方式をスナップショット型と呼びます。

これに対し、HTML Living Standardは「常に進化し続ける(Living)標準」という考え方を採用しています。

  • バージョンの廃止: 「HTML6」といった次世代バージョンは存在せず、常に最新の状態が1つの規格として更新され続けます。
  • 迅速な更新: ブラウザの進化やセキュリティの必要性に応じて、細かい変更が日々行われます

3. HTML Living Standardでの主な変更・廃止点

検定試験で特に狙われやすい、HTML5からHTML Living Standardへの移行に伴う変更点は以下の通りです。

1.要素の廃止と集約(ルビ関連)

以前は、ふりがなを振る際に「本文」と「ルビ」を細かく分ける必要がありましたが、現在はよりシンプルに書くことが推奨されています。

変更前(HTML5初期の書き方)

変更前(HTML5初期の書き方)変更前(HTML5初期の書き方)rb要素で本文を囲むのが標準的でした。
また、rtc 要素を使用することで、複数種類のルビ注釈をまとめることも可能でした。

例えば:

  • 日本語の読み
  • 英語訳
  • 発音記号

を同時に付けたいケースです。

<ruby>
  <rb>漢</rb><rt>かん</rt>
  <rb>字</rb><rt>じ</rt>
</ruby>

rtc 要素を使用する場合の例
<ruby>
  <rb>漢</rb><rb>字</rb>
  <rtc>
    <rt>かん</rt><rt>じ</rt>
  </rtc>
  <rtc>
    <rt>kan</rt><rt>ji</rt>
  </rtc>
</ruby>

変更後(Living Standard推奨)

rb要素(アールビー)は廃止(または不要)となり、ruby直下にテキストを書くスタイルへ。

<ruby>
  漢<rt>かん</rt>
  字<rt>じ</rt>
</ruby>

イント: ブラウザの解析能力が上がったため、わざわざ「ここが本文」と指定しなくても、rt(ルビテキスト)の直前にある文字が自動的に対象と判断されるようになりました。

2.i要素:見た目(斜体)から「意味の区別」へ

「斜体(Italic)」という見た目の指定から、「周囲の文章とは異なる性質の言葉」を示す役割に昇格しました。

  • 旧定義: 文字を斜体にする。
  • 新定義: 専門用語、学名、他言語の慣用句、思考(心の声)など、声のトーンが変わる箇所。

[比較例] コードで見る違い

<!-- HTML4/5初期:ただ斜めにするだけ -->
<i>Italic text</i>

<!-- Living Standard:意味を区別する -->
人類の学名は <i>Homo sapiens</i> です。 <!-- 専門用語 -->
それは <i>de facto standard</i> ですね。 <!-- 他言語の慣用句 -->
彼は頷いた。<i>(本当に大丈夫か?)</i> <!-- 心の声 -->

3.b要素(Bring Attention):注意を引きつける

「太字(Bold)」という指定から、「重要性は高くないが、実用的に目立たせたい箇所」を示す役割になりました。

  • 旧定義: 文字を太字にする。
  • 新定義: 製品名、文書内のキーワード、リード文など、読者の注意をそこに向けたい箇所。
<p>
  本日紹介する新製品は <b>Gemini 3 Flash</b> です。 <!-- 製品名 -->
  記事の<b>要約(リード文)</b>をここに記述します。 <!-- 注意を引くキーワード -->
</p>

[比較] strong / em との違いに注意!

試験で迷いやすいのが「強調」との違いです。Living Standardでは、以下のように明確に使い分けます。

要素役割(Living Standard)ニュアンスの例
iトーンの区別「これはラテン語です」「これは心の声です」
em(イーエム)アクセント(強調)絶対に 忘れないでください」
b注意喚起「ここが製品名です」「ここがキーワードです」
strong強い重要性危険: ここに入らないでください」

なぜこの変更が重要なのか?
「斜め」や「太字」といった見た目の指定は、視覚障がいのある方が使うスクリーンリーダー(音声読み上げソフト)には伝わりません。
しかし、「これは専門用語(i)」「これは製品名(b)」という意味がコードに含まれていれば、将来的にAIや読み上げソフトが「少し声色を変えて読む」といった配慮ができるようになります。これがWebアクセシビリティの向上につながるため、現代の標準(Living Standard)ではこの定義が採用されています。

4.main 要素:複数配置が「条件付き」で可能に

これまでは「1ページに1つ」が絶対的なルールでしたが、現在は特定の条件下で複数記述できるようになりました。

  • 旧定義: ページ内で最も重要なメインコンテンツを示す。配置は1つのみ。
  • 新定義: 製品名、文書内のキーワード、リード文新定義: 基本は1つだが、hidden 属性(非表示設定)がついている場合に限り、同一ページ内に複数配置が可能。、読者の注意をそこに向けたい箇所。
<!-- 変更後のコード例:タブ切り替えUIなど -->
<body>
  <header>...</header>

  <!-- 現在表示されているメインコンテンツ -->
  <main>
    <h2>タブ1:最新ニュース</h2>
    <p>ここにニュースの内容が入ります。</p>
  </main>

  <!-- 非表示状態のメインコンテンツ(hidden属性があれば複数記述OK) -->
  <main hidden>
    <h2>タブ2:会社概要</h2>
    <p>ここには会社概要が入ります。</p>
  </main>

  <footer>...</footer>
</body>

ポイント:
この変更により、タブメニューのように「中身を切り替えて表示する」UIにおいて、どの要素がメインコンテンツの候補であるかを、より正確にブラウザに伝えられるようになりました。

5. a 要素の ping 属性:解析機能の標準化

リンクがクリックされたことをサーバーに通知する仕組みが、HTMLの属性だけで完結するようになりました

  • 役割: ユーザーがリンクをクリックした際、ping 属性で指定したURLに対して、裏側で「クリック通知(POSTリクエスト)」を送信する機能。
  • 利点: これまでJavaScriptで行っていた複雑なクリック解析を、ブラウザの標準機能としてシンプルに実装できる。
<!-- 変更後のコード例 -->
<a href="https://example.com/target-page" ping="https://analytics.example.jp/log">
  詳細を見る
</a>

ポイント:
ユーザーのページ遷移を妨げることなく、バックグラウンドで安全に通知を送れます。ユーザーが「誰がどこをクリックしたか」をブラウザ側で制御(拒否設定など)しやすくなるため、プライバシー保護の観点からも推奨される仕組みです。

6. keygen (キーゲン)要素:鍵生成タグの「完全廃止」

かつてはWebフォーム内でセキュリティ用の「鍵」を作るために使われていましたが、現在は完全に廃止され、ブラウザでも動作しません。

  • かつての役割: ユーザーのブラウザ上で「公開鍵」と「秘密鍵」のペアを生成し、安全な認証(クライアント証明書など)を行うための要素
  • 廃止の理由: セキュリティ上の脆弱性が指摘されたことや、ブラウザ間での動作のバラつきが大きかったため。現在は、より強力な「Web Authentication API(WebAuthn)」(ウェブ オーセンティケーション エーピーアイ /ウェブオースン)などの新しい技術がその役割を担っています

以前のコード(HTML5初期)
フォーム内に一行書くだけで、ブラウザが鍵作成のメニューを表示していました。

<form action="/register" method="post">
  ユーザー名: <input type="text" name="user">
  <!-- 以前はこれで鍵を作れたが、現在は動作しない -->
  認証キー作成: <keygen name="security_key">
  <input type="submit" value="送信">
</form>

現在(Living Standard)の考え方

現在はHTMLタグではなく、JavaScriptを使って、指紋認証や顔認証、セキュリティキー(YubiKeyなど)と連携して認証を行うのが主流です。

// 現在はタグではなく、JS(WebAuthn API)で安全な認証器を呼び出す
navigator.credentials.create({
  publicKey: { /* 認証用の詳細設定 */ }
}).then((credential) => {
  // 安全にサーバーと通信
});

試験対策のコツ
検定試験では、「かつて存在したが、現在はより安全なJavaScript APIなどに置き換わって廃止された要素」として keygen の名前を覚えておきましょう。

HTML Living Standard 変更点まとめ表(要素・属性)

要素・属性以前のルール(HTML5)現在のルール(Living Standard)
i 要素斜体(見た目)トーン・種類の区別(専門用語、心の声など)
b 要素太字(見た目)実用的な注意喚起(製品名、キーワードなど)
main 要素1ページに1つのみhidden 付与なら複数配置OK
a (ping)未定義(JSで実装)標準化(属性だけでクリック解析が可能)
keygen鍵生成タグ(利用)廃止(WebAuthn APIなどへ移行)
rb / rtcルビの細かな指定廃止・集約ruby / rt だけで完結)

5. 実践演習:Webデザイン技能検定2級レベル予想問題

問1:規格の名称と管理団体
HTMLの規格策定に関する記述として、最も適切なものはどれか。
①.現在、HTMLの標準規格はW3Cによって策定されている「HTML5.2」である。
②.W3CとWHATWGは現在、それぞれ独立したHTML規格を並行して公開している
③.現在の唯一の標準規格は「HTML Living Standard」であり、WHATWGによって管理されている。
④.「HTML Living Standard」は、3年ごとに「HTML6」「HTML7」といったメジャーバージョンがリリースされる仕組みである。

正解 ③

2019年の合意により、現在は WHATWG (ワットダブリュージー)が策定する HTML Living Standard が唯一の公式な標準規格です。スナップショット(バージョン区切り)ではなく、継続的に更新されるのが特徴です。

問2:要素の再定義(i・b要素)
HTML Living Standardにおける i 要素および b 要素の説明として、適切なものはどれか。
①.i 要素は、文書内で最も重要な強調箇所を示すために使用する。
②.b 要素は、学名や他言語の慣用句など、声のトーンが異なる箇所を示すために使用する。
③.i 要素は、専門用語や思考、他言語のフレーズなど、周囲と区別したい箇所に使用する。
④.b 要素は、視覚障がい者が利用するスクリーンリーダーにおいて、常に「重要な強調」として読み上げられる。

正解:

① 重要な強調は strong 要素です。
② それは i 要素の説明です。
③ 正解です。i 要素は「トーンの区別」を担います。
b 要素は「注意を引く」ためのもので、必ずしも強い重要性を伴うとは限りません。

問3:要素の廃止と属性
HTML Living Standardにおける変更点の説明として、誤っているものはどれか。
①.main 要素は、hidden 属性が付与されている場合に限り、1つの文書内に複数配置することができる。
②.a 要素の ping 属性は、リンククリック時に指定したURLへ通知を送信するための属性である。
③. rb 要素および rtc 要素は廃止され、現在は ruby 要素と rt 要素の組み合わせで記述することが推奨されている。
④.keygen 要素は、現代のWebサイトにおいても、フォームから安全な鍵ペアを生成するために広く推奨されている。

正解:

keygen 要素は完全に廃止されています。 現在は Web Authentication API などの新しい技術が代替として使われています。①、②、③はすべて Living Standard における正しい仕様変更の内容です。

学習のまとめ:試験直前のチェックリスト

  • HTML Living Standard という名称を覚えた
  • 管理団体は WHATWG であることを知っている
  • i / b は「見た目」ではなく「意味」で使い分ける
  • mainhidden があれば複数書いても良い
  • keygen / rb / rtc は「廃止」と紐付けた

この問題がすべて正解できれば、HTML規格の変遷に関する問題は自信を持って回答できるはずです!



「やりたい」をすぐ実現!ストアカで学ぶ楽しさ

学びたい人と教えたい人をつなぐ 日本最大級のまなびのマーケット、ストアカ。
ビジネススキルから趣味・自己啓発まで、500以上のカテゴリーで 8万件以上の講座 が揃っています。

✅ 会員登録は30秒・完全無料!
✅ 1回1,000円〜気軽に受講できる
✅ レビュー・講師情報も充実で安心

特に人気なのは

  • 占い・スピリチュアル系
  • 料理・グルメ系
  • ビジネススキル・ライティング系
  • 語学・リスキリング系
  • 子ども向け習い事

「やってみたい!」と思ったその瞬間から、講座を探してすぐ予約。
少しの時間でスキルアップや趣味の幅を広げたい方にぴったりです✨

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次