<body>とは、そもそも何でどんな時に使うのか?詳しくお話していきます。
<body>はブラウザに表示される本文部分
<body>~</body>は、ブラウザ上に本文部分として表示されます。
(<head>~</head>は見えない部分だったので真逆の存在です)
・見出し
・段落
・画像
・リンク
・リスト
・区切り
・メディア
などなど、ユーザーが目に見える部分はほとんどが<body>に記述されています。
<body>はセクショニングルートです
「セクショニングルート?」と疑問に思いますよね。
このタイミングで必ず覚える必要性は低そうですが、せっかくなので知っておきましょう。
セクショニングルートとは、文章全体の最初に現れる大きな区切りのことです。
例えば、<body>~</body>の中に記述されたコード(h1やh2などの見出し)は、<body>を起点として階層構造が作られています。
「このセクション(<body>~</body>)の出発点だよ。<h1>や<h2>という各章が含まれているよ。つまり同一グループ内で見出しの階層をしているよ」と表現しています。
セクショニングルートは<body>以外にも存在する
<figure>(画像や図表+キャプションのまとまり)のように、セクショニングルートは<body>以外にも存在します。
例えば、<body>~</body>内に、<figure>~</figure>を設けることで完全に独立した状態となります。
ユーザーから見るブラウザ上では、何の変化も起きませんが、ブラウザやGoogleなどの検索エンジンに内部構造を正しく伝える際に必要となります。
「ここの<figure>~</figure>で囲んでいる部分だけは、本文中と意味を別にしたい!」などの際に役に立ちます。
セクショニングコンテンツとの違い
似た名称に「セクショニングコンテンツ」があります。
セクショニングルートは完全に独立した状態でしたが、セクショニングコンテンツは完全には独立しておらず、あくまでもセクショニングルートの中にある “新しい章” を伝えています。
家に例えると、
セクショニングルート:別棟
セクショニングコンテンツ:家の中にある部屋
このようなイメージです。
なので、<body>~</body>内に、セクショニングコンテンツ(例えば、<section>~</section>)を記述した場合は、同じ内部構造内の別章という風に、Googleなどの検索エンジンは正しく判断することが出来ます。
・セクショニングルート
・セクショニングコンテンツ
両方ともユーザーから見るブラウザ上では何も変化は起きませんが、内部構造をしっかりと作る上では重要な役割があります。
<body>に記述しないコード
<head>~</head>内に記述していた、” meta” や “link” などのHTML文章の追加情報は書かないようしましょう。
<body>は、あくまでも本文中の内容を書くところです。

コメント