bodyタグとは？
更新日:
bodyタグとは、HTMLの基本的なタグのひとつで、Webページの実際の内容を表示するために使用される要素です。
HTML文書の中で、headタグに続いて記述され、bodyタグ内に記述された内容がブラウザ画面に表示されます。
例えば、テキスト、画像、リンク、動画など、ユーザーが閲覧するコンテンツはすべてbodyタグ内に配置されます。
bodyタグの適切な使用は、SEOやページのパフォーマンスにも間接的に関係しています。
適切な配置や記述を行うことで、検索エンジンからの評価を向上させることが可能となります。
bodyタグとは
bodyタグとは、Webページのコンテンツをブラウザに表示させるために必要なHTMLの要素です。
HTMLドキュメントは主にheadタグとbodyタグで構成されますが、headタグはページに関する基本的な情報（メタ情報やCSSへのリンク、ページタイトルなど）を扱い、bodyタグはページ上に表示されるテキストや画像、リンク、動画といった実際の内容を含みます。
bodyタグは以下のような基本的な構造で記述されます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>ここに本文が入ります。</p>
<img src="画像.jpg" alt="画像の説明">
<a href="リンク先URL">リンクテキスト</a>
</body>
</html>このように、bodyタグ内に記述したコンテンツが実際にユーザーのブラウザ上で表示されます。
headタグとbodyタグの違いは、表示に関係する要素をbodyタグ内に記述し、ページに関する情報をheadタグ内に記述するという点です。
bodyタグの基本的な使い方と属性についての解説
bodyタグはHTML5においては属性を省略して使用することも可能ですが、背景色や画像の表示、CSSの適用をしたい場合には、属性やCSSを使ったstyle指定が役立ちます。
かつてHTML4以前の時代では、背景色や画像などを直接bodyタグの属性として指定していましたが、現在ではCSSを使用して設定するのが一般的です。例えば、背景色をCSSを使って指定する場合には以下のような記述をします。
<body style="background-color: #f5f5f5;">また、外部CSSファイルを利用する方法も一般的であり、以下のようにCSSファイルをheadタグ内にリンクし、bodyタグのスタイルを定義します。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
コンテンツ
</body>外部のstyle.cssファイルには次のように記述します。
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}このような方法でスタイルを外部化すると、メンテナンス性が高まり、ページ全体で一貫したデザインを実現できます。
bodyタグ内に記述できるHTML要素の一覧と機能について
bodyタグ内には、以下のようなさまざまなHTML要素を配置することが可能です。
- 見出し要素（h1〜h6）：ページのタイトルや段落ごとの見出しを表現します。
- 段落要素（p）：テキストの段落を表現する要素です。
- リンク要素（a）：クリックすると別ページやファイルへ移動する機能を提供します。
- 画像要素（img）：画像をページに表示するために使用します。
- リスト要素（ul, ol, li）：項目を箇条書きに表示する際に使われます。
- テーブル要素（table, tr, td）：表形式で情報を整えるのに役立ちます。
- フォーム要素（form, input, textarea）：ユーザー入力を受け取るために使われます。
これらのHTML要素を適切に使い分けることで、情報の視認性や読みやすさが向上し、検索エンジンの評価にも良い影響を与えることがあります。
bodyタグの適切な使い方とSEOへの影響について
bodyタグの内容は検索エンジンがページの内容を判断するための主要な情報源です。SEOの観点からは、以下のようなポイントが考慮されます。
検索エンジンはbodyタグ内に記述されたテキストやリンクを分析し、検索結果への表示順位を決定します。そのため、ユーザーのニーズに合った内容を適切に含むことが、SEO効果を高めるための一つの方法となります。
特に、h1〜h6タグやpタグ、aタグなどを適切に配置し、キーワードを自然に取り入れることで、ページの評価を向上させることが可能です。また、画像を使用する際にはalt属性を設定し、画像の内容を検索エンジンに伝えることが効果的です。
例えば、画像を適切に記述する例として次のようになります。
<img src="web-design.jpg" alt="Webデザインのイメージ画像">これにより、検索エンジンは画像の内容を理解しやすくなり、画像検索からの流入を促すことも可能になります。
bodyタグとCSSの関係性や使い方について
bodyタグはCSSと密接に関連しており、スタイルを適用するための主要な対象要素です。CSSを活用してbodyタグを適切に設定することで、Webページのデザイン性を高め、ユーザーエクスペリエンスを向上させることができます。
例えば、bodyタグに以下のようなスタイルを適用すると、フォントや背景色、余白などがページ全体に一貫して反映されます。
body {
font-family: "Segoe UI", Arial, sans-serif;
background-color: #ffffff;
margin: 0;
padding: 20px;
color: #333333;
}このような設定をすることで、ページ内のコンテンツをより美しく読みやすく表示することが可能になります。
まとめ
bodyタグは、HTML文書においてWebページの実際のコンテンツを表示するための基本的な要素です。HTMLタグの中でも、ページ内のテキストや画像、リンクなど、表示に直接関係する要素を配置するために使用されます。
bodyタグの内容は、検索エンジンがページの評価を行う際にも考慮されるため、SEO対策の観点からも適切に記述することが望ましいです。また、CSSを利用してスタイルを指定することで、ページ全体のデザイン性を向上させ、ユーザー体験を高めることも可能です。
初心者向けの記事や無料で学べるリソースを参考にしながら、適切なHTMLとCSSの使い方を学び、bodyタグを効果的に活用することで、SEOに配慮したWebページの制作を進めることができます。
この記事の執筆者・監修者。当サイトの運営者で、目からウロコのSEO対策「真」常識の著者。主にSEOの考え方について、現場での経験から、どのようにGoogle検索エンジン対策を行えばよいかを具体的に解説できるよう努めています。ドメパ!!、SEO順位チェックツール、再検索キーワード調査ツール、ピラクラ、ピラクラB!、共起語検索ツール、競合キーワード調査ツール、キーワード候補調査ツール、検索ボリューム調査ツール、見出し抽出ツール、サジェストキーワード取得ツール、MEO順位チェックツールの考案者であり開発者。更に詳しくはプロフィールをご覧ください。SEO対策のお仕事に関するご依頼・お申し込みは、こちらのフォームから承っております。
SEO対策でお悩みの方へ
無料で資料をダウンロードいただけます！SEO対策に役立つノウハウや具体的な施策、最新の成功事例をまとめた3つの資料をご用意しました。これからSEOに取り組む方にも、すでに実践中の方にもお役立ていただける内容です。
資料を無料でダウンロードドメイン診断レポートをご希望の方へ
無料でドメイン診断レポートをダウンロードいただけます！あなたのドメインの強みや改善点を明確にするための詳細な分析レポートをご用意しました。初心者から上級者まで、幅広い方に役立つ内容です。
ドメイン診断レポートを無料でダウンロードまずは簡単お見積り
あなたのサイトに最適なSEO対策をご提案します。検索順位の向上やアクセスアップにお悩みの方は、今すぐお見積りフォームからご相談ください。初めての方でも安心してお任せいただけるサポートをご提供します！
SEO簡易お見積りフォーム
お気軽SEOチェック
初心者アドバイス
AIでSEO対策
