本文（body）
ユーザーが目にする文字、画像、ボタン、動画など、すべてのコンテンツがここに含まれます。
bodyタグ＝ユーザーが見る「すべて」
`
` タグは、HTMLドキュメントの「本体」であり、ブラウザのウィンドウに実際に表示されるすべてのコンテンツを格納します。見出し、段落、画像、リンク、ボタン、動画など、ユーザーが目にし、操作するあらゆる要素がここに含まれます。一方、`
` タグが「裏方」として設定情報を管理するのに対し、` ` は「舞台」そのものです。基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これがメインコンテンツです。</p>
</body>
</html>
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これがメインコンテンツです。</p>
</body>
</html>
bodyタグの主要な役割
- コンテンツの表示: テキスト、画像、動画、フォームなど、あらゆるメディアを配置します。
- 構造化要素の土台: `
`, ` `, ` - イベントハンドリング: JavaScriptでクリックやスクロールなどのユーザー操作を検知する起点となります。
CSSでのスタイリング
`
` タグ自体にもCSSを適用できます。ページ全体の背景色、フォント、余白などを設定する際に使われます。CSS例
body {
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
特に `margin: 0;` と `padding: 0;` は、ブラウザのデフォルトスタイルをリセットするために頻繁に使われます。
JavaScriptとの連携
`
` タグには、`onload` などのイベント属性を設定することもできます。ページが完全に読み込まれた後に実行したい処理を指定する際に便利です。イベントハンドラの例
<body onload="alert('ページが読み込まれました！')">
...
</body>
...
</body>
ただし、現代の開発では、HTMLに直接JavaScriptを書くのではなく、外部ファイルで `addEventListener` を使う方法が推奨されています。
アクセシビリティへの配慮
スクリーンリーダーなどの支援技術は、`
` 内の構造を頼りにページを読み上げます。適切なセマンティックタグ（`