【どこにあるの?】htmlのbody要素とは? 書き方・中身・属性も分かりやすく解説!

body要素について知りたい人

body要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

body要素とは?
body要素の書き方
body要素で利用できる属性
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

body要素はHTMLの本体を記載する要素となっています。

HTMLは主にhtml要素、head要素、body要素で構成されています。

html文書はHTMLの全体であることを表して、head要素は文書のヘッダー情報を表しています。

そして、body要素はhead要素の後に記述するものとなっています。

そこでこの記事ではbody要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

body要素の評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.body要素とは?

body要素は文書の内容を表しており、HTML文書の中で1つだけ使用することができます。

body要素はhtml要素の内側に、head要素の後に記載します。

body要素内は文章、画像等、実際にブラウザ上に表示される部分です。

2.body要素の書き方

body要素の書き方をみていきましょう。

以下はbody要素のサンプルプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>body要素とは?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し1</h1>
<p>本文</p>
</body>
</html>

DOCTYPE宣言をした後、html要素で全体を囲み、head要素、body要素と記述していきます。

一つ注意点として1ページの中で2回以上body要素を使うことはできません。

body要素内はWebページに表示していく文章、画像などのコンテンツを記載します。

HTML文書は「head要素」と「body要素」で構成されています。

head要素

「head要素」はWebページの基本情報が記述されています。

そのため、ユーザーにhead要素の内容は基本的にWebページに表示されません。

head要素では文字、タイトル、メタディスクリプション、viewport、meta robots、OGPタグ、URLの正規化、サイトアイコン、スタイルシートファイルなどの設定を行います。

body要素

一方、「body要素」はWebページのコンテンツが記述されています。

そのため、body要素に書かれた内容がWebページに表示されます。

body要素は親要素としてhtml要素を持ち、body要素の子・子孫となる要素がWebブラウザ上にレンダリングされます。

子要素としてh1～h6要素、p要素、div要素などといった様々な種類の子を持つことができます。

↓↓↓↓ html要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日【意味は?】html要素とは? 属性・使い方も分かりやすく解説!

↓↓↓↓ head要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年2月18日HTMLのhead要素とは? 書き方や読み方を分かりやすく解説!

3.body要素で利用できる属性

body要素で利用できる属性をみていきましょう。

alink：ハイパーリンクの選択時の文字色
background：背景画像の URI
bgcolor：文書の背景色
link：未訪問のハイパーリンクの文字色
text：文字色
vlink：訪問済みのハイパーリンクの文字色

body要素には上記のようにWebページ全体の背景色・背景画像・文字色・各リンクアンカーの色を指定できる属性があります。

しかし、上記の属性は全て推奨されない属性として、CSS による代替指定が推奨されています。

「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

4.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント