HTMLを期待どおりに動作させるための必須タグ
(blog.jim-nielsen.com)- Webページをブラウザで期待どおりに表示するには、いくつかの基本的なHTMLタグを必ず含める必要がある
- `` は標準モードレンダリングを保証し、レイアウト計算の誤りを防ぐ
- `` は言語情報の提供により、アクセシビリティ、検索、翻訳品質を向上させる
とは、それぞれ文字エンコーディングとモバイル表示比率を制御する- これらのタグは単なる形式的要素ではなく、Web標準とユーザー体験の一貫性を保つ中核的な構成要素である
HTMLの基本構造と必須タグの概要
- この記事は Alex Petros の発表 “Incantations that make HTML work correctly” に着想を得て書かれた内容である
- 著者は、ブラウザでHTMLファイルを直接開くときに常に含めるべき基本スニペットを整理している
- 例として示された基本構造は次のとおり
- 各タグは、ブラウザがHTMLを標準的に解釈して表示できるよう助ける役割を持つ
- 欠けていると、ブラウザが**非標準モード（quirks mode）**に切り替わったり、文字化けやモバイル画面での縮小表示などの問題が起きる
`` — 標準モードの宣言
- `` は、ブラウザに**標準モード（standards mode）**でレンダリングするよう指示する宣言である
- この宣言がないと、ブラウザはquirks modeに切り替わり、過去の非標準HTMLの挙動をエミュレートする
- その結果、レイアウト、サイズ、配置の計算が変わり、予期しない表示エラーが発生する
は大文字・小文字を区別せず、や `` など、どのような形でも認識される- 著者は「1998年式のマークアップを書きたいなら大文字で書いてもいい」と冗談を添えている
`` — 文書言語の指定
- `` は、文書の基本言語を明示するタグである
- この情報はブラウザ、検索エンジン、スクリーンリーダーなど、さまざまなツールで利用される
- 主な活用例
- スクリーンリーダーが正しい発音と音声トーンを選択する
- 検索エンジンがインデックス化と翻訳精度を向上させる
- スペルチェックなどのロケールベース機能を適用する
- 言語属性を省略しても画面上は問題ないように見えるが、周辺ツールが誤った処理をする可能性がある
- そのため、HTML内に明示的に含めるのが望ましい
- サーバーのレスポンスヘッダーでも言語情報を渡せるが、ローカルファイルを直接開く場合はHTML内での指定のほうが安全である
- 例示コード
return new Response( "Hello world
- 例示コード
", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```
`` — 文字エンコーディングの指定
- `` は、ブラウザが文書の文字エンコーディング方式を認識できるようにする
- これにより、é, ü, ñ, ©, ™, ®, …, 👍 などの非ASCII文字が正しく表示される
- このタグがないと、文書内の特殊文字やスマートクォートが文字化けして見えることがある
- 著者は自身のブログで“スマートクォート（smart quotes）”が崩れる事例を例として挙げている
- 比較例
- `` がない場合: 特殊文字と絵文字が文字化けする
- 含まれている場合: すべての文字が正常に表示される
- ブログには両者を比較したスクリーンショット画像が添付されている
`` — モバイルビューポート設定
- このタグは、モバイルブラウザで画面比率と拡大率を制御する
- 欠けていると、モバイル端末でページが縮小されて小さく表示される
- 著者は「デスクトップでは問題なく見えるのに、モバイルで開くとすべてが小さく見える」として、meta viewportタグを忘れた事例を紹介している
- 左側（タグなし）と右側（タグあり）の比較スクリーンショットを通じて違いを視覚的に説明している
- そのため、簡単なプロトタイプであってもこのタグを含めて、期待したレイアウト比率を維持すべきである
まとめ — HTMLの本当の基本
- 著者は最後に「いちばん重要なスニペットを忘れていた」と冗談を言う
- 例として次のコードを示している
- 例として次のコードを示している
- これは現代のWeb開発でよく使われるJavaScriptベースのアプリ構造を風刺的に示したものである
- 全体としてこの記事は、HTMLの基礎タグがWeb標準の動作を保証する中核要素であることを強調している
3件のコメント
必須なら、なぜデフォルトでそう動かないのでしょうか？ ともあれ、Webは本当に不思議ですよね。発想が一味違います。
下位互換性のためではないでしょうか。基本的な動作方式をそのまま変えてしまうと、以前は問題なく動いていたものが壊れる可能性があるので。
Hacker Newsの意見
document.compatModeを使って確認できる 私はマウスオーバーした要素のテキストを簡単にコピーするための userscript を使っているが、Quirks Mode では不安定に動くdocument.write("" + document.documentElement.innerHTML)で強制的に切り替えることはできるが、文書全体が初期化されて問題が起きる ユーザー側でより きれいな方法 で Standards Mode を強制できないか気になるdangには HN の 使い勝手改善 を少しやってほしい デフォルトのフォントサイズが 12px 程度なので、たいていの現代的なデバイスではかなり小さく見える CSS も約 13 年前に公開された 既存コード をそのまま使っているように見える