headタグとbodyタグについて【HTML基礎】

HTMLがどういうものかちょっと分かってきました。

今回はheadタグとbodyタグの説明だよ。

headタグの中身
1. titleタグとは
2. meta description（メタディスクリプション）について
bodyタグの中身
headタグとbodyタグの役割

headタグの中身

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

上記はVSCodeのエメットで入力したコードです（言語の属性は“ja”に変更済）。このコードからheadタグだけ抜き出したのが次になります。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

２行目、３行目は今は「とりあえず書いておく」くらいの認識で大丈夫です。４行目についてはtitleタグという非常に重要なタグになります。

titleタグとは

titleタグはその名のとおり「Webサイトのタイトル」を設定するタグです。次の２ヶ所で使われます。

一つ目はブラウザのタブなどに表示されるテキストです。

２つ目はGoogle検索などで表示された時のメインのテキストです。titleタグはSEO（検索順位に関わる最適化）にとっても非常に重要なタグですので、必ず記述しておきましょう。

検索画面のタイトル下の文章はどこで設定しますか？

じゃあせっかくなので、一緒に説明しておこう。

meta description（メタディスクリプション）について

Google検索などで表示される、Webサイトの説明文はmetaタグというもので設定します。metaタグはサイトの内容や設定などを記述しておくタグです。サイトの説明文を追加する場合もheadタグの中にmetaタグを追記します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="デザインふむふむはWebデザインを独学で学びたい人をサポートするブログです。未経験者から初心者になってみよう！">
  <title>デザインふむふむ</title>
</head>

４行目からのmataタグを追記することでサイトの説明を設定することができます。このmetaタグを「メタディスクリプション」といいます。今は深く考えずに以下をコピペして、中身だけ書き換えましょう。

<meta name="description" content="ここにサイトの説明を記述">

metaタグは終了タグが無いタグです。設置場所はheadタグ内であればどこでも大丈夫ですがtitleタグの上くらいがよいでしょう。

descriptionの文字数はデバイスによって表示できる文字数に限界があります。オーバーしたテキストは省略されてしまうので、パソコンでは120文字以内、スマホでは60文字以内くらいにしましょう。descriptionを共用する場合は60文字以内に重要なテキストを含める様にしましょう。

bodyタグの中身

<body>
  
</body>

bodyタグの中は、からっぽですね。

そうだね。じゃあbodyタグの中にテキストを打ってこんな感じにしてみよう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ももたろう
  むかしむかし、あるところに、おじいさんとおばあさんがすんでいました。
</body>
</html>

文章が打てたら保存して、htmlファイルを直接ダブルクリックしてブラウザで表示してみよう。ダブルクリックで開かない人は、ブラウザの上にファイルをドラッグしてもOKだよ。

ブラウザにテキストが表示されればOKです。

あれ？タイトルと本文が改行されていません。

じゃあ、HTMLのタグを追加してこうしてみよう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>ももたろう</h1>
  <p>むかしむかし、あるところに、おじいさんとおばあさんがすんでいました。</p>
</body>
</html>

タイトル部分をh1タグでくくり、本文部分をpタグでくくります。