要素とは

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

    
    


    
Hello, World!

必須属性: lang

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

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

dir 属性: 書字方向

    
    


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




英語の引用: "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';
    });

に書ける代表的な属性

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 が空でも画面全体が黒くなる。