この記事の要点

は HTML 文書のルート要素。 と を内包する lang 属性は必須。 で検索エンジン・スクリーンリーダー・自動翻訳に言語を伝える dir 属性 で書字方向 (ltr / rtl / auto) を指定。アラビア語・ヘブライ語サイトで必須 DOCTYPE 宣言 と組み合わせて HTML5 標準モードを起動 JS の document.documentElement = 要素。CSS の :root も同じ要素を指す

要素とは

は HTML 文書全体を包むルート要素です。すべての他の要素（ / を含む）はこの中に書きます。HTML5 では DOCTYPE 宣言の直後に置きます。

    
    


    
Hello, World!

必須属性: lang

lang 属性は文書の主要言語を示します。これが正しく設定されていると:

• 検索エンジンが言語別インデックスに正しく分類
• スクリーンリーダーが適切な発音エンジンを選択（日本語ページを英語訛りで読まなくなる）
• ブラウザの自動翻訳が正しく動く
• CSS の :lang() セレクタが効く
• フォント・約物の最適化が効く（CJK 用フォントの選択など）

dir 属性: 書字方向

値	意味	例
ltr	左から右 (Left-To-Right)	日本語・英語・中国語など（既定）
rtl	右から左 (Right-To-Left)	アラビア語・ヘブライ語
auto	内容から自動判定	UGC で混在する場合

    
    


    
مرحبا بالعالم




英語の引用: "Hello, World!"
عربي محتوى

xmlns 属性 (XHTML 時代の名残)

DOCTYPE 宣言との関係

要素そのものはモードを決めません。DOCTYPE 宣言が互換モード（Quirks mode）と標準モード（Standards mode）を切り替えます:

...

確認方法 (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 との連動

    
    


    ...

// ユーザの 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 とアクセシビリティのチェックリスト

• 必ず から始める（標準モード）
• を必ず指定（WCAG 3.1.1 達成基準）
• 多言語サイトなら言語ごとに別の lang を持たせる（hreflang と整合）
• RTL 言語サイトにはdir="rtl" を忘れない
• meta charset は の最初に

FAQ

Q: lang を間違えるとどうなる？
A: スクリーンリーダーが英語で日本語を読む（読めない発音になる）、自動翻訳が逆方向に翻訳される、検索順位が下がるなどの実害がある。

Q: を省略しても動く？
A: HTML5 の仕様上は省略可能。ブラウザが補ってくれる。ただしlang 属性を付けたいので明示が必須。

Q: に CSS をかけるとどうなる？
A: html 要素は viewport 全体に広がる。背景色を html { background: #000; } とすると、body が空でも画面全体が黒くなる。