ナビゲーションをスキップ
部 I 章 2

マークアップ

Web Almanacのキャラクターが建設作業員として、HTMLの要素ブロックからウェブページを組み立てているヒーロー画像。

はじめに

私たちが知るウェブは、HTMLという基盤の上に構築されています。すべてのウェブサイト、ウェブアプリケーション、オンラインでのやり取りは、その核となるHTMLから始まり、もっとも重要なウェブ標準の1つとなっています。HTMLは、コンテンツを構造化し、関係性を定義し、ブラウザとコミュニケーションを取ることで、私たちが作成したものを世界中のユーザーが閲覧、操作、理解できるようにする言語です。この章では、2024年においてHTMLがどのようにウェブを形作り続けているのか、その使用傾向、カスタム要素の台頭、開発者がよりアクセシブルで効率的、そして将来性のあるウェブサイトを構築するために新機能をどのように活用しているのかを探ります。

今年の版では、データセットにホームページだけでなく、さまざまな二次ページも含まれており、より広い視点を提供しています。ウェブサイトの入り口を超えたページを分析することで、異なるタイプのコンテンツやコンテキストにおけるHTMLの使用状況をより正確に把握できます。ブログ投稿、商品ページ、ログイン画面、記事アーカイブなど、この拡張された範囲により、HTMLの実際の応用についてより深い洞察が得られます。

読者の皆さんには、このデータをより深く掘り下げ、独自の洞察を探求し、ウェブの基礎となる言語の未来について議論に参加していただきたいと思います。

一般

マークアップドキュメントのより一般的な側面から見ていきましょう。このセクションでは、ドキュメントタイプ、ドキュメントのサイズ、言語、圧縮について説明します。

Doctypes

Doctype レンダリングモード デスクトップ モバイル
<!doctype html> 標準モード 91.7% 92.8%
html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" 準標準モード 3.4% 2.7%
doctypeなし 互換モード 2.1% 2.2%
html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" 標準モード 0.8% 0.7%
html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd" 準標準モード 0.6% 0.4%
html public "-//w3c//dtd html 4.01 transitional//en" 互換モード 0.3% 0.3%
図2.1. Doctypeの使用状況。
図2.2. 標準のHTML doctypeを使用しているモバイルページ。

モバイルページの93%が標準のHTML doctype、つまり<!DOCTYPE html>を使用しています。

これは2022年のデータと比べて3ポイント高くなっています。興味深いのは、2番目に多いのがXHTML 1.1 Transitionalであることです。ただし、これは徐々に減少しており(2022年の3.9%から2.7%に減少)。

ドキュメントサイズ

ページのドキュメントサイズは、圧縮を含むネットワーク経由で転送されるHTMLバイト数です。

図2.3. HTMLドキュメントの転送サイズの中央値。

2023年にわずかな減少を見せた後、HTML転送サイズは2022年と2023年と比較して今年は増加しました。

中央値は妥当な数値に見えますが、他のパーセンタイルをより詳しく見てみましょう。

図2.4. HTMLドキュメントの転送サイズの分布。

パーセンタイルの分布を見ると、10パーセンタイルではHTMLファイルは6 KBと小さく、90パーセンタイルでは147 KBに達します。この極端な差は、開発者がページをどのように構造化しているかに大きな違いがあることを示しています。

圧縮

HTMLドキュメントファイルの分析において、圧縮は読み込み時間と全体的なパフォーマンスを改善する上で重要な役割を果たし続けています。

図2.5. HTMLドキュメントのコンテンツエンコーディング。

注目すべき傾向の1つは、Brotli(br)圧縮形式の人気の高まりです。2024年には、Brotliはモバイルページの37%で使用されており、2023年の28%から着実に増加しています。

gzipはもっとも広く使用されている圧縮方式(モバイルで52%)ですが、brが普及するにつれて、その使用率は前年から若干減少しています(2022年は58%)。

これらの改善にもかかわらず、HTMLファイルの一部(モバイルで10.5%)は依然として圧縮なしで提供されており、最適化の機会を逃しています。

ドキュメント言語

図2.6. モバイルでの一意のlang属性コードの数。

分析では、モバイルのhtml要素で5,625の一意のlang属性のインスタンスを確認しました。

HTML lang属性は、スクリーンリーダーや検索エンジンがウェブページのコンテンツの言語を理解するのに重要な役割を果たしています。しかし興味深いことに、Google検索はページの言語を判断する際にlang属性を無視します。これは「ほとんど常に間違っている」と特定したためです。これは、実際のコンテンツの言語が異なる可能性があるにもかかわらず、enがデータセットで主要な言語属性として、デスクトップの44.2%とモバイルの40.5%で使用されている理由を説明するかもしれません。

図2.7. もっとも人気のあるHTML言語コード(地域を含まない)。

さらに、13%のページでlang属性が設定されていません。これは多くのウェブサイトがこの指標を提供できていないことを示しています。

非英語および「未設定」以外のlang値のパーセンテージを集計すると、全ページの約46%を占めており、ウェブコンテンツの真のグローバル性を反映しています。ただし、上述のように、lang属性の誤設定が頻繁にあることを考えると、en値の高い割合が必ずしもコンテンツが英語であることを意味しないことを覚えておくことが重要です。

図2.8. もっとも人気のあるHTML言語コード(地域を含む)。

非英語言語に関しては、ja(日本語)とes(スペイン語)がもっとも人気のある選択肢の一部として際立っており、ページの約5-6%で使用されています。

もっとも一般的な地域バリアントであるen-usは、デスクトップの16.7%とモバイルの15%のページで使用されています。

lang属性値の誤りの問題はありますが、この属性はアクセシビリティの向上に重要な役割を果たし続けています。スクリーンリーダーを使用するユーザーにとって、lang属性を正しく設定することは、現代のウェブ開発において不可欠な実践です。

コメント

HTMLコメントは、開発者がコードにメモや説明を残すためにコードに含めるテキストの断片で、ウェブページの視覚的な表示には影響を与えません。これらのコメントは<!-- -->タグで囲まれ、ブラウザによってレンダリングされないため、ユーザーには表示されません。開発プロセスでは有用ですが、HTMLコメントは本番コードでは必要なく、エンドユーザーに利点がないままファイルサイズをわずかに増加させる可能性があります。

図2.9. 少なくとも1つのコメントを含むモバイルページ。

分析によると、モバイルページの86%が少なくとも1つのコメントを含んでいます。

通常のコメントに加えて、条件付きコメントとして知られる特定のタイプがあります。これらはかつて、Internet Explorer(IE)の特定のバージョンをターゲットにするために広く使用され、開発者は古いIEブラウザのみが処理するカスタムスタイルやスクリプトを提供できました。

<!--[if IE]> <link rel="stylesheet" href="ie-only-styles.css"> <![endif]-->

モダンブラウザとInternet Explorerの廃止により、条件付きコメントは時代遅れになりました。それにもかかわらず、モバイルページの 26% がまだ条件付きコメントを含んでおり、これは整理されなかったレガシーコードのため、または一部のサイトが互換性のために古いバージョンのInternet Explorerをサポートし続けているためと考えられます。

要素

このセクションでは、HTML要素について探っていきます。どの要素が一般的に使用され、どのくらいの頻度で出現し、典型的なページでどの要素を見つけられるかを見ていきます。また、カスタム要素と時代遅れの要素についても見ていきます。そして明確にしておきましょう。「divitis」はまだ存在するのでしょうか?はい、存在します。

要素の多様性

デスクトップとモバイルの両方のページで、10パーセンタイルでは22の異なる要素があり、90パーセンタイルではデスクトップで44要素、モバイルで43要素に達しています。モバイルページの異なる要素の中央値は今年も32で一貫しており、2022年と同じで、2021年の31からわずかに高くなっています。

図2.10. ページごとの異なる要素タイプの数の分布。

ただし、ページごとの要素の分布を確認すると、いくつかの違いがあります。データは2022年と比較してわずかな減少を示しています。モバイルでは、要素の中央値が2022年の653から2024年には594に減少しています。下位の10パーセンタイルでは、モバイルで192から180へのわずかな減少を示しています。90パーセンタイルもわずかな減少を示し、モバイルページは1,832から1,716に減少しています。この全体的な減少は、使用されるHTML要素の数の面でページがわずかにスリム化していることを示唆しています。

図2.11. ページごとの要素数の分布。

上位要素

以下の要素がもっとも頻繁に使用されています:

2021 2022 2023 2024
div div div div
a a a a
span span span span
li li li li
img img script script
script script img img
p p p p
link link link link
meta i meta path
i meta path meta
図2.12. もっとも使用されている要素。

このリストは前年とほぼ一貫していますが、いくつかの変化が起きています。

図2.13. div要素である要素の割合。

<div>は依然としてもっとも支配的な要素です。つまり「divitis」はまだ存在し、今後数年間は変わりそうにありません。

図2.14. 上位HTML要素の頻度。

<div>に続いて、<a>要素は一貫して2位を維持する重要な要素です。ハイパーリンクの基盤として、サイト間のユーザージャーニーのナビゲーションで重要な役割を果たしています。

近年の注目すべき変化の1つは、<script>の使用増加です。2023年には人気度で<img>を上回り、動的コンテンツ、インタラクティビティ、フロントエンドロジック、トレースマーケティングキャンペーンに対するJavaScriptへの依存度の高まりを反映しています。この傾向は2024年も続き、<script>は5番目によく使用される要素として定着しています。

もう1つの注目すべき変化は、2023年にトップ10入りした<path>の台頭です。2024年には<meta>を上回り、アイコン、イラスト、グラフィック要素にスケーラブルベクターグラフィックス(SVG)の使用が増加していることを反映しています。

デスクトップとモバイルの両プラットフォームにおける上位HTML要素の採用率は一貫して高く、現代のウェブ開発における基盤的な役割を反映しています。<html><head>,<body>要素はほぼ普遍的で、デスクトップとモバイルの両方のページの99.7%以上で使用されています。

図2.15. 上位HTML要素の人気度。

注目すべき観察として、モバイルページの0.9%で<title>タグが欠落しており、これは2022年のデータ(1%)と同様です。

次の要素である<link><a><script><img>も高い採用率を示しています。また、上位15要素には含まれていませんが、SVG(スケーラブルベクターグラフィックス)の使用増加も興味深い点です。モバイルでの<svg>の採用率は2022年の45.5%から2024年には51.6%に成長し、ウェブ上でよりスケーラブルで解像度に依存しないグラフィックスへの大きな移行を示しています。

カスタム要素

ハイフンで区切られた名前で簡単に識別できるカスタム要素は、今年も分析で注目を集め、HTMLのネイティブ機能を拡張する上での継続的な重要性を示しています。

図2.16. 年別のカスタム要素の使用状況。

カスタム要素の使用は近年大幅に増加しており、モバイルでの採用率は2022年の 3.6% から2024年には 7.9% に上昇しています。この増加は、開発者とテクノロジーがよりリッチでインタラクティブなウェブ体験を構築するためにカスタム要素を活用する成長傾向を示しています。

ただし、カスタム要素は通常、その機能性とインタラクティビティを有効にするために追加のJavaScriptを必要とします。この要件は、ウェブページのJavaScriptペイロードを調べると特に顕著です。

図2.17. カスタム要素使用時のJSのkB分布。

このグラフでは、中央値でカスタム要素を使用するページは1,286 kBのJavaScriptを使用するのに対し、カスタム要素を使用しないページは522 kBしか必要としないことがわかります。したがって、カスタム要素の台頭はウェブ開発における価値ある進化を表しており、開発者がモジュラーで再利用可能なコンポーネントを作成できるようになりましたが、その使用の影響を考慮することが重要です。

上位10のカスタム要素を詳しく見てみましょう:

図2.18. カスタム要素の人気度。

2022年版でも述べたように、トップ10のカスタム要素のほとんどはSlider Revolutionrs-* 要素が占めています。しかし、今年は新しい(そして意外な)1位が登場しました:wow-image 要素です。これはWixサイトで使用される@wix/image パッケージによって使用されています。

今年のトップ10リストの最後にも新顔が登場しています:predictive-search です。これはShopifyのコンポーネントで、入力時に候補結果を表示します。

廃止された要素

HTML仕様によると、現在29の廃止・非推奨要素があります。そして、keygenを除くすべての要素が、今年のデータセットの一部(または多く)のページに出現しています。

図2.19. 廃止された要素の人気度。

これらの結果を2022年のデータと比較すると、使用率は緩やかですが着実に減少していることがわかります。注目すべき改善点の1つは、<center>要素の使用率が昨年のモバイルサイトの6.1%から今年は4.5%に減少したことです。これは大きな減少を示しており、<center><font>要素に追い抜かれ、現在では4.5%のモバイルページで使用されているもっとも一般的な廃止タグとなっています。興味深いことに、この前向きな傾向にもかかわらず、Googleのホームページのような有名サイトでも、まだマークアップで<center>要素を使用しています。

属性

このセクションでは、ドキュメントでの属性の使用方法と、data-*の使用パターンとソーシャルマークアップについて探ります。

上位属性

HTMLでは、属性は要素に付加される key-value ペアで、追加情報を提供したり要素の動作を変更したりします。これらの属性は、スタイル、クラス、リンク、ウェブページ内での動作などの特性を定義する上で基本的なものです。ユーザーやスクリプトによる要素の表示や操作に影響を与えることが多くあります。たとえば、<img>タグのsrc属性は画像のソースを定義し、<a>タグのhref属性はリンクの宛先を指定します。

今年も、もっとも使用されている属性は圧倒的にclassで、モバイルデータセットで480億回出現し、使用されているすべての属性の33%を占めています。

図2.20. 上位属性の頻度。

そして、ページごとに使用されている属性を見ると、ほぼすべてのページで以下が使用されていることがわかります:

図2.21. 上位属性の人気度。

data-*属性

ここで、属性のサブセットであるdata-*属性について詳しく見ていきましょう。HTMLでは、開発者はdata-で始まるカスタム属性を定義できます。これらの属性は、カスタムデータ、注釈、状態情報など、ページやアプリケーション固有の追加情報を格納するように設計されています。既存の属性やタグでは扱えない特定の情報に対して、追加の非標準メタデータを埋め込む方法を提供し、とくに有用です。data-属性はアプリケーションに固有のもので、JavaScriptで簡単にアクセスや操作ができ、動的なコンテンツやデータ状態を管理する柔軟な方法を提供します。

図2.22. 少なくとも1つのdata-*属性を持つページ。

全体のデータによると、分析されたドキュメントの90%が少なくとも1つのdata-*属性を使用しています。データを詳しく見ていきましょう。

図2.23. 上位data属性の人気度。

2022年から2024年にかけてのdata-*属性の人気度を分析すると、その使用方法にいくつかの興味深い変化が見られます。今年、data-idがもっとも人気で、モバイルページの24%で使用されており、2022年の19%から大きく増加しています。この増加は、2022年の5位から今年の1位への大きな躍進も示しています。

もう1つの注目すべき変化は、リストに新しい要素が登場したことです:data-load-timedata-tagging-idは2024年にページの20%で出現し、ランキングの2位と3位を占めています。これらの属性は2022年に特定されたdata-*属性には含まれていなかったもので、パフォーマンス追跡とタグ付けがモダンなウェブ開発でより重要になっていることを示しています。

図2.24. 上位data属性の頻度。

ソーシャルマークアップ

ソーシャルマークアップとは、HTMLドキュメントに埋め込まれたメタタグのセットで、ウェブコンテンツがソーシャルメディアプラットフォーム上でどのように共有され表示されるかを強化するものです。これらのタグは、タイトル、説明、画像、URLなどの重要なメタデータを提供し、ユーザーがウェブページを共有する際に、Facebook、X(旧Twitter)、LinkedInなどのプラットフォームが正しい情報を取得できるようにします。もっとも一般的なソーシャルマークアップ標準には、Open Graph(og:)とTwitter Cards(twitter:)があり、どちらもプレビューでコンテンツがどのように表示されるかを定義することで、より豊かで制御された共有体験を提供します。

図2.25. 上位ソーシャルメタノードの人気度。

2024年のデータによると、もっとも頻繁に使用されているOpen Graphメタタグはog:title(モバイルページの61%で使用)とog:url(58%)です。これらのタグは共有されるコンテンツのタイトルと正規URLを定義し、og:type(56%)とog:description(53%)が続き、コンテンツタイプと簡単な要約を提供します。 twitter:card(45%)やtwitter:description(24%)などのTwitter固有のメタタグも、プラットフォームが現在「X」としてブランド変更されているにもかかわらず、依然として広く使用されており、プラットフォーム全体での用語の更新の遅れを示しています。

その他

これまでのセクションでは、HTMLの概要と、もっともよく使用される要素や属性の採用について説明してきました。このセクションでは、ビューポート、ファビコン、ボタン、入力、リンクなど、いくつかの特殊なケースについてより深く分析します。

viewport の指定

viewport メタタグは、widthinitial-scale などのプロパティを設定することで、さまざまなデバイスでコンテンツをどのようにスケーリングするかを指定します。一般的な設定である width=device-width,initial-scale=1 は、ページが画面の幅いっぱいに表示され、モバイルデバイスで適切なズームレベルで読み込まれることを保証します。

図2.26. Meta viewport の指定。

現在の使用状況では、もっとも一般的な設定は width=device-width,initial-scale=1 で、モバイルページの50%に存在します。興味深いことに、分析したモバイルページの5.4%にビューポートタグがありません。つまり、これらのページはモバイル向けに設計されていないということです。その他の設定には、ユーザーのスケーリングを無効にする width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0 などのバリエーションがあり、モバイルページの4.4%で見られます。

ファビコン

ウェブサイトに関連付けられた小さなアイコンであるファビコンは、ユーザー体験とブランド認知度を高める上で重要な役割を果たします。これらのアイコンは、ブラウザのタブ、ブックマーク、さらにはユーザーがウェブサイトを保存した際のモバイルのホーム画面にも表示されます。ファビコンの興味深い点の1つは、明示的なHTMLマークアップがなくても機能することです。ファビコンは .png.ico.jpg.svg などのさまざまな画像フォーマットをサポートしています。

図2.27. ファビコンタイプの人気度。

2024年現在、<link rel="icon"> タグで指定されるファビコンでもっとも一般的に使用されているフォーマットは .png で、モバイルページの42%に表示されており、2021年の35%から増加しています。対照的に、.ico ファイルの使用は2021年の33%から27%に減少しており、開発者がこのフォーマットから .png.svg などの他のオプションに移行している可能性があります。ただし、興味深いことに、.svg ファビコンはSafariではサポートされていない点に注意が必要です。

興味深いことに、約18%のページにはまだファビコンがありません。これは2021年にファビコンがなかった22%から若干改善しています。

ボタンと入力タイプ

ウェブ開発におけるボタンは、その二重機能とさまざまなユースケースにより、頻繁な議論の対象となってきました。議論は通常、ネイティブの<button>要素を使用するか、アンカー(<a>)リンクを使用するか、あるいはボタンとして機能するカスタムスタイルのdiv要素を使用するかをめぐって展開されます。この議論には立ち入りませんが、データを見てその使用状況を確認してみましょう。

図2.28. 少なくとも1つのbutton要素を使用しているモバイルページ。

モバイルページの73%が少なくとも1つの<button>要素を使用しており、これは2021年の65.5%から大きく増加しています。2021年と同様に、input型のボタンに関するクエリは実行しませんでしたが、アクセシビリティの章にはボタンに関するとても興味深い情報がたくさんあります。そちらもぜひ読んでみてください!

図2.29. ボタンタイプの人気度。

詳しく内訳を見てみましょう:

  • 一般的な<button>要素はモバイルページの46.5%に表示されています。このボタンはデフォルトの動作を持たないため、クライアントサイドのスクリプトが要素のイベントをリッスンできます。
  • モバイルページの44.7%が<button type="button">を使用しており、これは通常フォーム送信に関連しないアクション(JavaScriptの関数のトリガーなど)に使用されます。
  • フォーム送信に特化した<button type="submit">バリアントは、モバイルページの34.1%に存在します。
  • <button type="reset">は比較的まれで、モバイルページのわずか1.4%でしか見られません。これは、フォームのリセットがあまり一般的でないか、開発者がカスタムソリューションを選択していることを示しています。

ボタン以外にも、ボタンとしてレンダリングされ使用されるinput要素があります。

図2.30. inputタイプを使用したボタンの人気度。

データによると、データセットのモバイルページの25.2%が少なくとも1つの<input type="submit">要素を持ち、2.8%が少なくとも1つの<input type="button">要素を持ち、1.1%が少なくとも1つの<input type="image">要素を持っています。

リンクターゲット

以前は、新しいタブでページを開くためにtarget="_blank"属性を持つリンクを使用すると、ターゲットページがwindow.openerを介してあなたのページにアクセスでき、悪意のある行為を実行される可能性がありました。これを防ぐため、開発者はtarget="_blank"リンクにrel="noopener"属性を追加する必要がありました。noopener値は、新しいタブがwindow.openerオブジェクトにアクセスできないようにします。さらに、noreferrerは新しいタブにリファラー情報が渡されるのを防ぐために、しばしばnoopenerと併用されていました。

モダンブラウザでは、このセキュリティ問題は解決されています:現在、target="_blank"が使用されると、ブラウザは自動的にrel="noopener"を裏で適用します。つまり、ほとんどの場合、開発者はセキュリティの脆弱性を避けるために手動でnoopenerをリンク属性に含める必要がなくなりました。それにもかかわらず、レガシーコードやクロスブラウザの互換性に慎重な開発者のため、多くのウェブページでnoopenernoreferrerの広範な使用が見られます。

リンク デスクトップ モバイル
target="_blank"を持つ 81% 81%
時々target="_blank"noopenernoreferrerと共に使用 77% 76%
target="_blank"noopenernoreferrerなしで持つ 68% 67%
target="_blank"noopenerと共に持つ 25% 24%
常にtarget="_blank"noopenernoreferrerと共に使用 23% 24%
target="_blank"noopenernoreferrerと共に持つ 20% 19%
target="_blank"noreferrerと共に持つ 3% 3%
図2.31. さまざまなリンク属性の組み合わせの採用率。

データを見ると、81%のページがtarget="_blank"を使用しています。興味深いことに、76%のページが少なくとも1つのtarget="_blank"リンクをnoopenernoreferrerと共に含んでいる一方、67%がnoopenernoreferrerなしでtarget="_blank"を持っています。さらに、モバイルページの24%が常にtarget="_blank"リンクをnoopenernoreferrerと共に使用しています。

結論

2024年のHTML使用状況の分析は、この基盤となる言語のウェブ開発における進化と継続的な関連性を示す重要なトレンドと洞察を明らかにしています。

もっとも注目すべき発見の1つは、HTMLドキュメントタイプの標準化の増加で、現在モバイルページの93%が標準の<!DOCTYPE html>を使用しています。これはウェブ標準への準拠に向けた前向きな変化を反映していますが、XHTMLはまだ存在しています。

ドキュメントサイズはわずかに増加しており、より複雑なページへの傾向を示していますが、圧縮(とくにBrotli)の使用がより一般的になり、読み込みパフォーマンスを向上させています。ただし、HTMLファイルの約10%で圧縮が依然として使用されていないことは、多くの開発者にとってまだ最適化の機会があることを示唆しています。

カスタム要素の使用が3.6%から7.9%に増加したことは、よりリッチでインタラクティブなウェブ体験を構築する成長傾向を示しています。廃止された項目の存在は減少していますが、継続的なコードメンテナンスとモダンな標準の採用の必要性を示しています。

興味深いことに、上位のdata-*属性リストは大きな変化を示し、トップ3の属性が完全に異なっています。data-iddata-load-timedata-tagging-idの使用は、現在のウェブ開発でパフォーマンス追跡とタグ付けがより重要になっていることを示唆しています。

ただし、年々変わらないものもあります。Divitisはまだ存在し、classは属性の世界で依然として主権を持ち続けています。

著者

引用

BibTeX
@inbook{WebAlmanac.2024.マークアップ,
author = "Franco、EstelaとKardell、BrianとMeiert、Jens OliverとPieters、Simon",
title = "マークアップ",
booktitle = "2024 Web Almanac",
chapter = 2,
publisher = "HTTP Archive",
year = "2024",
language = "日本語",
doi = "10.5281/zenodo.14065478",
url = "https://almanac.httparchive.org/en/2024/markup"
}