1.

<html> ルート要素の役割と属性（lang / dir / xmlns / DOCTYPE 連携）

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

要素とは

<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
// &quot;CSS1Compat&quot; → 標準モード OK
// &quot;BackCompat&quot; → 互換モード (Quirks)

JS / CSS からの参照

// JS: html 要素を取得する標準的な方法
const html = document.documentElement;

// よくある用途
html.lang;                              // &quot;ja&quot;
html.dir;                               // &quot;ltr&quot;

// 言語を動的に変更
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: &quot;Noto Sans JP&quot;, sans-serif; }
:lang(en) { font-family: &quot;Inter&quot;, 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=&quot;ja&quot;
dir書字方向dir=&quot;ltr&quot;
xmlnsXML 名前空間 (XHTML 用、HTML5 では省略可)xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
data-*カスタムデータ属性data-theme=&quot;dark&quot;
classクラス (CSS フック)class=&quot;no-js&quot;
itemscope / itemtypeMicrodata 構造化データSEO 用

SEO とアクセシビリティのチェックリスト

  • 必ず <!DOCTYPE html> から始める（標準モード）
  • <html lang="..."> を必ず指定（WCAG 3.1.1 達成基準）
  • 多言語サイトなら言語ごとに別の lang を持たせる（hreflang と整合）
  • RTL 言語サイトにはdir=&quot;rtl&quot; を忘れない
  • 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 が空でも画面全体が黒くなる。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:10:02 guest 206

人気ページ

最近更新/作成されたページ