HTMLのbodyタグの使い方！HTMLの本文を作る！

html

HTMLのbodyタグについて書いています。

bodyタグは、Webページの主要なコンテンツを包含するコンテナです。
テキスト、画像、動画、リンク、フォーム、ボタンなど、実際にブラウザに表示されるすべての要素は、このbodyタグの内側に記述されます。

bodyタグの基本的な使い方と配置

bodyタグは、HTMLドキュメントの<head>タグの直後に配置され、終了タグ </html> の直前に配置されます。
Webページに表示したい内容は、すべて開始タグ(<body>)と終了タグ(</body>)の間に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
  <h1>ようこそ！</h1>
  <p>これはWebページの本文です。</p>
</body>
</html>

上記の例では、<h1>見出しと<p>段落がbodyタグの内側に記述されており、これらが実際にブラウザに表示されるコンテンツとなります。

bodyタグの重要な属性

bodyタグは、かつては背景色やテキストの色などを指定するための多くの表示に関する属性を持っていました。
ですが、HTML5ではこれらの属性は非推奨となり、CSSでのスタイル指定が推奨されています。

しかし、いくつかのグローバル属性やイベントハンドラー属性は依然としてbodyタグで使用されることがあります。

  • グローバル属性: class, id, style, title, lang, dir, tabindex など、他のHTML要素と同様に使用できます。

  • イベントハンドラー属性: 特定のイベントが発生した際にJavaScriptコードを実行するための属性です。例えば、以下のようなものがあります。

    • onload: ページが完全に読み込まれた後に実行するスクリプトを指定します。
    • onunload: ページから移動する前に実行するスクリプトを指定します。
    • onscroll: 要素がスクロールされたときに実行するスクリプトを指定します。
    • onresize: ブラウザウィンドウのサイズが変更されたときに実行するスクリプトを指定します。

onload属性の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>onload イベントの例</title>
</head>
<body onload="showAlert()">
  <h1>ページが読み込まれました！</h1>

  <script>
    function showAlert() {
      alert('ページの読み込みが完了しました。');
    }
  </script>
</body>
</html>

上記の例では、ページが完全に読み込まれるとonload属性に指定されたshowAlert関数が実行され、アラートメッセージが表示されます。
なお、これらのインラインイベント属性は可読性や保守性の観点から、外部JavaScriptやイベントリスナーを使って制御する方法が推奨されています。

bodyタグ内に記述する主要な要素

body タグ内には、Webページに表示したいあらゆるHTML要素を記述できます。
主な要素としては以下のようなものがあります。

  • 見出し (<h1> ～ <h6>)
  • 段落 (<p>)
  • リスト (<ul>, <ol>, <li>)
  • リンク (<a>)
  • 画像 (<img>)
  • 動画 (<video>)、音声 (<audio>)
  • フォーム関連要素 (<form>, <input>, <textarea>, <button>, <select> など)
  • 構造化要素 (<div>, <span>, <article>, <section>, <nav>, <footer>, <aside> など)
  • 表 (<table>, <tr>, <th>, <td>)
  • インライン要素 (<em>, <strong>, <code>, <small>, <span> など)

これらの要素を組み合わせて、Webページのコンテンツと構造を定義します。

bodyタグを使用する際の注意点

  • 1つの<body>要素: HTMLドキュメント内には、必ず1つだけbody要素が存在する必要があります。
  • 表示したいコンテンツのみ記述: bodyタグの内側には、実際にブラウザに表示したいコンテンツのみを記述します。メタデータや外部リソースのリンクなどは<head>タグに記述します。
  • 適切な構造化: <div>, <article>, <section> などの構造化要素を適切に使用して、コンテンツの意味的な構造をマークアップすることが重要です。これにより、SEOやアクセシビリティが向上します。例えば、<section>は関連する内容をグループ化するための要素であり、<article>は独立した内容（ブログ記事など）を表すのに使われます
  • スタイリングは CSS で: 背景色やテキストの色、余白などの表示に関するスタイルは、<style> タグ内や外部CSSファイルで定義し、bodyタグのstyle属性やclass属性などを利用して適用することが推奨されます。

まとめ

bodyタグは、Webページの心臓部であり、ユーザーが実際に目にするすべてのコンテンツを包含する重要な要素です。
適切なHTML要素をbodyタグ内に記述し、CSSでスタイリングすることで、魅力的で使いやすいWebページを作成することができます。

<head>タグと<body>タグの役割を正しく理解し、適切に使い分けることが、Webページ作成の基本となります。

HTML
yasuaki

コメント