【HTML Living Standard】body要素の使い方
body要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
bodyオブジェクトは、Webページとしてユーザーに表示されるすべての内容を表すオブジェクトです。HTML Living Standardにおいて、HTMLドキュメントの主要なコンテンツを格納するための要素として定義されています。
このオブジェクトは、テキスト、画像、動画、音声、リンク、フォーム、表、見出し、段落など、Webブラウザに表示されるあらゆる要素を含みます。つまり、Webサイトを訪れた人が実際に目にする情報の「本体」となる部分を形成します。
bodyオブジェクトは、HTMLドキュメントの根幹をなす<html>要素の直接の子要素であり、通常は<head>要素の直後に配置されます。一つのHTMLドキュメント内には、原則としてbodyオブジェクトは一つだけ存在し、Webページの構造を明確にします。
また、bodyオブジェクトには、ページ全体のイベント（例えば、ページの読み込み完了時や閉じられる時など）に関連するイベントハンドラ属性を設定することができます。これにより、Webページのライフサイクルに応じた特定のスクリプト実行を制御することが可能です。システムエンジニアにとって、このbodyオブジェクトはWebページの見た目とユーザーインタラクションの基盤を理解する上で非常に重要な要素となります。
構文(syntax)
1<body> 2 <!-- ウェブページのコンテンツがここに入ります --> 3</body>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML Body要素で表示内容を記述する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Body要素の基本的な使い方</title> 7</head> 8<body> 9 <!-- body要素は、ウェブページに実際に表示されるすべてのコンテンツを格納します。 --> 10 <!-- 例えば、見出し、段落、画像、リンクなどがここに含まれます。 --> 11 <h1>ようこそ、HTMLの世界へ！</h1> 12 <p>これはbody要素内に記述された段落です。この部分がウェブブラウザに表示されます。</p> 13 <p>body要素がなければ、ユーザーが視覚的に認識できるコンテンツは何もありません。</p> 14</body> 15</html>
<body>要素は、ウェブページに実際に表示されるコンテンツの全てを格納する、非常に重要なHTML要素です。ウェブブラウザでユーザーが目にする情報、例えば見出し、段落、画像、リンク、リストなどの視覚的な要素は、全てこの<body>要素の中に記述されます。
提供されたサンプルコードでは、<body>要素の中に<h1>（見出し）と<p>（段落）が記述されています。これらの要素に書かれた「ようこそ、HTMLの世界へ！」や「これはbody要素内に記述された段落です。」といった文字列が、実際にブラウザに表示される内容となります。もし<body>要素が存在しなければ、ウェブページには構造情報のみが存在し、ユーザーが視覚的に認識できるコンテンツは何も表示されません。
HTMLの要素であるため、<body>自体にプログラミング言語のような引数や戻り値という概念はありません。この要素は単独で特定の処理を実行するのではなく、その中に含まれる他のHTML要素をまとめて、ブラウザに表示するための主要な領域を定義する役割を担っています。これにより、開発者はユーザーに提示したい内容を整理して記述することができます。
<body>要素は、ウェブページに実際に表示されるすべてのコンテンツを格納する、HTML文書の中心となる要素です。この要素は必ず<html>要素の直下、かつ<head>要素の後に一つだけ配置する必要があります。初心者の方が間違いやすい点として、<body>要素の開始タグや終了タグを忘れると、ブラウザが誤って解釈し表示が崩れる原因となるため、正確な記述を心がけてください。
また、<head>要素にはページのタイトルや文字コードなどの設定情報が記述されますが、<body>要素内にはそれらを含めず、ユーザーが視覚的に認識するテキスト、画像、リンクといったコンテンツのみを記述するように区別が重要です。正しい構造で記述することで、ブラウザは意図通りにページを表示し、将来的なメンテナンスも容易になります。
HTML Body 要素で複数コンテンツを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Body 要素の基本サンプル</title> 7</head> 8<body> 9 <!-- 10 <body>要素は、ウェブページに表示されるすべてのコンテンツ（見出し、段落、画像、リンクなど）を格納します。 11 HTMLドキュメントには<body>要素は1つしか存在できませんが、 12 その内部には複数の異なる要素やコンテンツを配置できます。 13 --> 14 15 <h1>ようこそ！私たちのウェブサイトへ</h1> 16 <p> 17 これはウェブサイトのメインコンテンツの一部です。 18 <body>要素内に配置されたコンテンツは、ブラウザに表示されます。 19 </p> 20 21 <section> 22 <h2>セクション1：HTMLの基本</h2> 23 <p>HTMLはウェブページの構造を定義するためのマークアップ言語です。</p> 24 <ul> 25 <li>見出し (<code><h1></code>, <code><h2></code>, ...)</li> 26 <li>段落 (<code><p></code>)</li> 27 <li>リスト (<code><ul></code>, <code><ol></code>)</li> 28 </ul> 29 </section> 30 31 <section> 32 <h2>セクション2：さらに詳しく</h2> 33 <p> 34 複数のセクションや要素を使って、ウェブページに豊かな情報を提供できます。 35 写真や動画、フォームなども<body>要素内に配置可能です。 36 </p> 37 <p> 38 このように、<body>要素は様々な情報を「複数」まとめて表示するための大きな箱と考えることができます。 39 </p> 40 </section> 41 42 <footer> 43 <p>© 2023 サンプルウェブサイト</p> 44 </footer> 45 46</body> 47</html>
HTMLの<body>要素は、ウェブページとしてブラウザに表示されるすべてのコンテンツを格納するための、非常に重要な要素です。この要素の中に、見出し、段落、画像、リンク、リスト、フォームなど、ユーザーが目にする情報すべてを記述します。ウェブページの「本体」と考えることができます。
<body>要素は、一つのHTMLドキュメント内でただ一つだけ配置される必要があります。しかし、その内部には、ウェブページを構成する非常に多くの異なる要素やコンテンツを「複数」配置することができます。サンプルコードでは、ウェブページのメインタイトルである<h1>要素や説明文の<p>要素、さらにコンテンツを構造的にグループ化する<section>要素、著作権情報などを表示する<footer>要素などが、すべてこの<body>の中に収められています。これにより、ウェブページに多様な情報を整理して提供する基盤となります。
<body>要素は、プログラミング言語における関数やメソッドのように、引数を取ったり特定の値を戻り値として返したりする機能は持ちません。HTMLの要素は、文書の構造や意味を定義することが主な目的であるため、引数や戻り値に関する特別な挙動を考慮する必要はありません。その役割は、ウェブコンテンツ全体を包み込む「大きな箱」として機能することに特化しています。
<body>要素はHTMLドキュメント内に必ず一つだけ配置するルールがあります。これを複数記述すると、正しくページが表示されない原因となるため注意が必要です。一方で、<body>要素の内部には、見出し、段落、画像、リンク、セクションなど、ウェブページに表示したい「複数」のコンテンツや要素を自由に配置できます。ブラウザに表示されるすべてのコンテンツは<body>タグの間に記述しなければなりません。誤って<body>の外にコンテンツを記述すると、ブラウザで表示されず意図しない結果を招きます。ウェブページの主要な内容を正しくユーザーに届けるため、この基本的な構造と役割を理解し、適切に利用することが重要です。