タイトル: html要素
SEOタイトル: <html> ルート要素の役割と属性（lang / dir / xmlns / DOCTYPE 連携）
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong><html></strong> は HTML 文書の<strong>ルート要素</strong>。<code><head></code> と <code><body></code> を内包する</li><li><strong><code>lang</code> 属性は必須</strong>。<code><html lang="ja"></code> で検索エンジン・スクリーンリーダー・自動翻訳に言語を伝える</li><li><strong><code>dir</code> 属性</strong> で書字方向 (<code>ltr</code> / <code>rtl</code> / <code>auto</code>) を指定。アラビア語・ヘブライ語サイトで必須</li><li><strong>DOCTYPE 宣言 <code><!DOCTYPE html></code></strong> と組み合わせて HTML5 標準モードを起動</li><li><strong>JS の <code>document.documentElement</code></strong> = <html> 要素。CSS の <code>:root</code> も同じ要素を指す</li></ul></td></tr></table>
<h2><html> 要素とは</h2>
<p><strong><code><html></code></strong> は HTML 文書全体を包む<strong>ルート要素</strong>です。すべての他の要素（<code><head></code> / <code><body></code> を含む）はこの中に書きます。HTML5 では DOCTYPE 宣言の直後に置きます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html></code></pre>
<h2>必須属性: lang</h2>
<p><code>lang</code> 属性は<strong>文書の主要言語</strong>を示します。これが正しく設定されていると:</p>
<ul>
<li><strong>検索エンジン</strong>が言語別インデックスに正しく分類</li>
<li><strong>スクリーンリーダー</strong>が適切な発音エンジンを選択（日本語ページを英語訛りで読まなくなる）</li>
<li><strong>ブラウザの自動翻訳</strong>が正しく動く</li>
<li><strong>CSS の <code>:lang()</code></strong> セレクタが効く</li>
<li><strong>フォント・約物</strong>の最適化が効く（CJK 用フォントの選択など）</li>
</ul>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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"> <!-- ブラジル ポルトガル語 --></code></pre>
<h2>dir 属性: 書字方向</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>値</th><th>意味</th><th>例</th></tr></thead>
<tbody>
<tr><td><code>ltr</code></td><td>左から右 (Left-To-Right)</td><td>日本語・英語・中国語など（既定）</td></tr>
<tr><td><code>rtl</code></td><td>右から左 (Right-To-Left)</td><td>アラビア語・ヘブライ語</td></tr>
<tr><td><code>auto</code></td><td>内容から自動判定</td><td>UGC で混在する場合</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- アラビア語サイト -->
<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></code></pre>
<h2>xmlns 属性 (XHTML 時代の名残)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 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 可だが省略可 --></code></pre>
<h2>DOCTYPE 宣言との関係</h2>
<p><code><html></code> 要素そのものはモードを決めません。<strong>DOCTYPE 宣言</strong>が<strong>互換モード（Quirks mode）</strong>と<strong>標準モード（Standards mode）</strong>を切り替えます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ HTML5: 標準モード -->
<!DOCTYPE html>
<html lang="ja">
<!-- ❌ DOCTYPE 無し: Quirks mode (古い IE 互換) -->
<html>
<head>...</head>
<!-- 互換モードだと box-sizing や line-height 等の挙動が IE5 互換に -->
<!-- → CSS の意図しないずれが大量発生する --></code></pre>
<p>確認方法 (Chrome DevTools コンソール):</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">document.compatMode
// "CSS1Compat" → 標準モード OK
// "BackCompat" → 互換モード (Quirks)</code></pre>
<h2>JS / CSS からの参照</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// 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;</code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* 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;
}</code></pre>
<h2>prefers-color-scheme との連動</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html lang="ja" data-theme="auto">
<head>
<meta name="color-scheme" content="light dark">
<!-- ↑ ブラウザの UI (スクロールバー等) も自動でダークに -->
</head>
<body>
...
</body>
</html></code></pre><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">// ユーザの 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';
});</code></pre>
<h2><html> に書ける代表的な属性</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>属性</th><th>意味</th><th>例</th></tr></thead>
<tbody>
<tr><td><code>lang</code></td><td>言語 (BCP 47)</td><td><code>lang="ja"</code></td></tr>
<tr><td><code>dir</code></td><td>書字方向</td><td><code>dir="ltr"</code></td></tr>
<tr><td><code>xmlns</code></td><td>XML 名前空間 (XHTML 用、HTML5 では省略可)</td><td><code>xmlns="http://www.w3.org/1999/xhtml"</code></td></tr>
<tr><td><code>data-*</code></td><td>カスタムデータ属性</td><td><code>data-theme="dark"</code></td></tr>
<tr><td><code>class</code></td><td>クラス (CSS フック)</td><td><code>class="no-js"</code></td></tr>
<tr><td><code>itemscope</code> / <code>itemtype</code></td><td>Microdata 構造化データ</td><td>SEO 用</td></tr>
</tbody>
</table>
<h2>SEO とアクセシビリティのチェックリスト</h2>
<ul>
<li><strong>必ず <code><!DOCTYPE html></code></strong> から始める（標準モード）</li>
<li><strong><code><html lang="..."></code></strong> を必ず指定（WCAG 3.1.1 達成基準）</li>
<li>多言語サイトなら<strong>言語ごとに別の <code>lang</code></strong> を持たせる（hreflang と整合）</li>
<li>RTL 言語サイトには<strong><code>dir="rtl"</code></strong> を忘れない</li>
<li><strong><code>meta charset</code></strong> は <code><head></code> の最初に</li>
<li><strong><code><noscript></code></strong> や JS フラグで <code>no-js</code> クラスを管理する場合は <code><html></code> に付ける</li>
</ul>
<h2>FAQ</h2>
<p><strong>Q: <code>lang</code> を間違えるとどうなる？</strong><br />
A: スクリーンリーダーが英語で日本語を読む（読めない発音になる）、自動翻訳が逆方向に翻訳される、検索順位が下がるなどの実害がある。</p>
<p><strong>Q: <code><html></code> を省略しても動く？</strong><br />
A: HTML5 の仕様上は<strong>省略可能</strong>。ブラウザが補ってくれる。ただし<code>lang</code> 属性を付けたいので<strong>明示が必須</strong>。</p>
<p><strong>Q: <code><html></code> に CSS をかけるとどうなる？</strong><br />
A: html 要素は viewport 全体に広がる。背景色を <code>html { background: #000; }</code> とすると、body が空でも画面全体が黒くなる。</p>