HTMLの勉強をしていると最初に戸惑うのが、headタグとbodyタグの使い方だと思います。
HTML5にて色々な記述の仕方がこれまでのHTML4.01までとはガラリと変わったのですが、HTMLの基本を表すheadタグとbodyタグについては変更がありませんでした。
HTML5のDOCTYPE宣言とXHTMLやHTML4.01の過去バージョンのDTDとは
HTML5のルート要素であるhtmlタグ使用時の注意事項とlang=”ja”の設定方法とは
今回は、html要素として非常に重要な<head>と<body>の違いをまとめます。
headタグとbodyタグに書ける、html要素は全く別である
以下にheadタグとbodyタグを利用したhtmlの構文の例を示します。
<!DOCTYPE html>
<html>
<head>
<meta description="検索で表示される説明文を記載する">
<title>文章のタイトル</title>
<!--headタグ内に記載された文書に関する情報はサイト上に表出することは無い。-->
</head>
<body>
<h1>見出し</h1>
<p>文章を入れる</p>
<!--bodyタグ内は文章の本文に当たり、サイト上に表出する部分になる。-->
</body>
</html>
headタグは”文章に関する情報を(検索エンジンや閲覧ブラウザに)示す“要素
例えば、headタグ内に入れる要素として代表的なものが<meta>タグです。
<meta description=”検索エンジン上で表示される説明文を記載する”> のように、サイト内のフロント側に何か表示される訳では無いですが、検索エンジンにそのページの概要を知らせるという使い方が可能です。
【WordPress】プラグイン無しでカスタムフィールドを利用してmeta keywordsとmeta descriptionを実装する
headタグ内に入れる要素に<title>タグもありますが、これは検索エンジン上に表示されるタイトルとブラウザのタブ部分に表示する２つの用途があります。(≒サイト上には表示されない)
ページ表示速度の観点で賛否両論あるが、cssやjsの呼び出しを書くのも基本はheadタグ内です。
bodyタグは”(サイト内の)文章の本文に当たる“要素
bodyタグ内は実際にサイトのフロントに表示される部分になります。
見出しタグや段落タグをここに記載することで、サイト上に文章を表出させることができます。
※ちなみに、head -> bodyの順番でタグを使います。逆は不可となっているので、ご注意を！
