「HTML編」head タグの中身について

  • 投稿日
  • 更新日
  • 著者 mame-sn
  • カテゴリー web

最近、結構ハードな運動を初めて足のスネを痛めてしまった人は誰でしょう？そう私です。

今回は、 HTML を記述上でとても大事なマークアップ言語、 head について少しく書いていこうと思います。あっ、ちなみになのですが、私のブログでは、ほんっっっとうにザックリとしか書きませんので詳しく知りたい方は、他の方の記事を読むことを推奨致します。

目次

head タグについて

<!DOCTYPE html>
<html lang="ja">
<head>
<／head>
<body>
</body>
</html>

通常ですと、このように html の中に head と body を記述していくと思います。head の部分にはページのタイトルやページの概要説明などを記述します。body の部分には、ページの内容つまりはページを開いた時に表示される部分を記述していきます。ザックリ言いますと、 head はページを開いた時には表示されない、 body は表示される。そういう感じで私は覚えました。

head に記述する主な言語

さて、head についてザックリと理解したところで、お次は何を記述すればよいのかですね！ここで説明するのは、web制作を始めたばかりの方や、興味がある方などに向けたものなので、これだけは最低限記述したほうがいいんじゃないか…。と私が思ったもので説明したいと思います。もっと詳しく知りたい方向けではないことを承知の上読んで頂ければと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="豆美の日常を綴った記録です。豆美の日々は波瀾万丈です。">
  <title>豆美さんの日常記録</title>
  <link rel="stylesheet" href="css/style.css">
<／head>
<body>
</body>
</html>

<meta charset=”UTF-8″>

文字コードのことです。

 <meta name=”viewport” 〜>

レスポンシブデザインを作る上で、レスポンシブが崩れないようにするために表記します。

<meta name=”description” 〜>

見ての通りページの概要説明です。

 <link rel=”stylesheet” 〜>

上記は、普段HTMLとCSSは別々のファイルに分けて作成していくのですが、そのことについてはまた別の記事にしようかなと思ってます。現時点では、HTMLファイルからCSSファイルにリンクさせるために必要なんだなぁ〜くらいで覚えてもらえればと思います。

まとめ

今回は、head の中身について少しく話しました。私がこれは最低限必要かなぁ〜と思うものを選んでものなので、プロの方には参考にはならないと思いますがそこはご了承願ます。次の記事ではbody の中身について触れていこうかなと思っておりますので、よろしくお願い致します。

では、その時までバイバ〜い🙌

投稿者プロフィール

mame-sn
Post Views: 1,189
HTML web制作 web head