タイトル: html要素
SEOタイトル: <html> ルート要素の役割と属性（lang / dir / xmlns / DOCTYPE 連携）
| この記事の要点 |
|
要素とは
<html> は HTML 文書全体を包むルート要素です。すべての他の要素（<head> / <body> を含む）はこの中に書きます。HTML5 では DOCTYPE 宣言の直後に置きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>必須属性: lang
lang 属性は文書の主要言語を示します。これが正しく設定されていると:
- 検索エンジンが言語別インデックスに正しく分類
- スクリーンリーダーが適切な発音エンジンを選択（日本語ページを英語訛りで読まなくなる）
- ブラウザの自動翻訳が正しく動く
- CSS の
:lang()セレクタが効く - フォント・約物の最適化が効く（CJK 用フォントの選択など）
<html lang="ja"> <!-- 日本語 -->
<html lang="en"> <!-- 英語 -->
<html lang="en-US"> <!-- アメリカ英語 -->
<html lang="zh-Hans"> <!-- 簡体字中国語 -->
<html lang="zh-Hant"> <!-- 繁体字中国語 -->
<html lang="ko"> <!-- 韓国語 -->
<!-- BCP 47 形式: 言語サブタグ-地域サブタグ -->
<html lang="ja-JP">
<html lang="pt-BR"> <!-- ブラジル ポルトガル語 -->dir 属性: 書字方向
| 値 | 意味 | 例 |
|---|---|---|
ltr | 左から右 (Left-To-Right) | 日本語・英語・中国語など（既定） |
rtl | 右から左 (Right-To-Left) | アラビア語・ヘブライ語 |
auto | 内容から自動判定 | UGC で混在する場合 |
<!-- アラビア語サイト -->
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>الصفحة الرئيسية</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
</body>
</html>
<!-- 部分的に方向を指定したい場合は要素単位でも可 -->
<p dir="ltr">英語の引用: "Hello, World!"</p>
<p dir="rtl">عربي محتوى</p>xmlns 属性 (XHTML 時代の名残)
<!-- HTML5: 不要 -->
<!DOCTYPE html>
<html lang="ja">
<!-- XHTML 1.0 (古い): 必須だった -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!-- HTML5 ポリグロット (HTML/XML 両対応): xmlns 可だが省略可 -->DOCTYPE 宣言との関係
<html> 要素そのものはモードを決めません。DOCTYPE 宣言が互換モード（Quirks mode）と標準モード（Standards mode）を切り替えます:
<!-- ✅ HTML5: 標準モード -->
<!DOCTYPE html>
<html lang="ja">
<!-- ❌ DOCTYPE 無し: Quirks mode (古い IE 互換) -->
<html>
<head>...</head>
<!-- 互換モードだと box-sizing や line-height 等の挙動が IE5 互換に -->
<!-- → CSS の意図しないずれが大量発生する -->確認方法 (Chrome DevTools コンソール):
document.compatMode
// "CSS1Compat" → 標準モード OK
// "BackCompat" → 互換モード (Quirks)JS / CSS からの参照
// JS: html 要素を取得する標準的な方法
const html = document.documentElement;
// よくある用途
html.lang; // "ja"
html.dir; // "ltr"
// 言語を動的に変更
html.lang = 'en';
// クラスを付けてテーマを切り替える
html.classList.add('dark');
// CSS 変数を JS から
html.style.setProperty('--primary', '#0066cc');
// スクロール位置
html.scrollTop;
window.scrollTo({ top: 0, behavior: 'smooth' });
// ビューポート全体の幅・高さ
html.clientWidth;
html.clientHeight;/* CSS: :root は html 要素を指す (詳細度が html より高い) */
:root {
--primary: #0066cc;
--bg: #ffffff;
--text: #333333;
font-family: system-ui, sans-serif;
}
/* 言語ごとのスタイル */
:lang(ja) { font-family: "Noto Sans JP", sans-serif; }
:lang(en) { font-family: "Inter", sans-serif; }
:lang(ar) { direction: rtl; }
/* ダークモード */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #f0f0f0;
}
}
/* JS から html.classList.add('dark') 時 */
html.dark {
--bg: #1a1a1a;
--text: #f0f0f0;
}prefers-color-scheme との連動
<!DOCTYPE html>
<html lang="ja" data-theme="auto">
<head>
<meta name="color-scheme" content="light dark">
<!-- ↑ ブラウザの UI (スクロールバー等) も自動でダークに -->
</head>
<body>
...
</body>
</html>// ユーザの OS 設定を読む
const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light';
// 切り替えを購読
matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', e => {
document.documentElement.dataset.theme = e.matches ? 'dark' : 'light';
});に書ける代表的な属性
| 属性 | 意味 | 例 |
|---|---|---|
lang | 言語 (BCP 47) | lang="ja" |
dir | 書字方向 | dir="ltr" |
xmlns | XML 名前空間 (XHTML 用、HTML5 では省略可) | xmlns="http://www.w3.org/1999/xhtml" |
data-* | カスタムデータ属性 | data-theme="dark" |
class | クラス (CSS フック) | class="no-js" |
itemscope / itemtype | Microdata 構造化データ | SEO 用 |
SEO とアクセシビリティのチェックリスト
- 必ず
<!DOCTYPE html>から始める（標準モード） <html lang="...">を必ず指定（WCAG 3.1.1 達成基準）- 多言語サイトなら言語ごとに別の
langを持たせる（hreflang と整合） - RTL 言語サイトには
dir="rtl"を忘れない meta charsetは<head>の最初に<noscript>や JS フラグでno-jsクラスを管理する場合は<html>に付ける
FAQ
Q: lang を間違えるとどうなる？
A: スクリーンリーダーが英語で日本語を読む（読めない発音になる）、自動翻訳が逆方向に翻訳される、検索順位が下がるなどの実害がある。
Q: <html> を省略しても動く？
A: HTML5 の仕様上は省略可能。ブラウザが補ってくれる。ただしlang 属性を付けたいので明示が必須。
Q: <html> に CSS をかけるとどうなる？
A: html 要素は viewport 全体に広がる。背景色を html { background: #000; } とすると、body が空でも画面全体が黒くなる。