HTMLファイルのヘッダーを基本に戻って調べてみた
こんにちは。koouoです。
今回のテーマは「HTMLファイルのヘッダー」についてです。
なんでこれを取り上げたかっていうと、ヘッダー情報を毎回調べる→忘れる→また調べる…ってループを自分がよくやっちゃうからです(笑)
最近だとAIで簡単に調べられるけど、備忘録としてここにまとめておこうと思ったわけです。
ついでに、HTMLファイルについても軽く触れてみたので、そこも紹介します（ただ、あくまでおまけなので、興味ない人はスルーしてOKです）。
そもそもHTMLファイルとは？
HTMLは「Hyper Text Markup Language」の略で、Webページを作成するためのマークアップ言語です。
マークアップ言語とは？
コンピューターがWebページを表示する際に、どのように表示すべきかを認識させるための言語です。認識させるためには「タグ」と呼ばれる要素を使用し、これにより「どこが本文なのか」「どこがタイトルなのか」「どこが見出しなのか」などをコンピューターに正しく伝え、結果的にWebページが適切に表示されます。
ちなみに、マークアップ言語にはHTMLのほかにもXMLやXHTMLなどがあります。
HTMLの今後
昔は「W3C」と「WHATWG」という2つの団体がHTMLの仕様で対立していたんですが、最終的にはWHATWGの『HTML Living Standard』が公式仕様として採用されました。なので、これからHTMLを学ぶなら、そっちに注目しておいたほうがいいと思います。
本題：ヘッダーとは？
ヘッダーはWebページの情報を含む部分で、HTMLファイルでは<head>タグ内に書かれます。
ただし、ユーザーが普段見る画面には直接表示されない情報が多いです。
ヘッダーはページを正しく表示させるための設定をする場所で、どのコンピュータでも同じように表示されるようにするためのものです。（ちなみに、ヘッダーなしでもページが表示されることは多いです。）
今回は、以下のヘッダーがないときから、徐々にヘッダー内に情報を追加し、どのように書き方が変わるのかを記録していきます。
<html>
<body>
見出し
</body>
</html>
ここから、少しずつヘッダー内に情報を追加していきます。
- タイトル
<title>
HTMLドキュメントの題名を表します。
タイトルを設定すれば、Webページにアクセスしてきたユーザに、どんなサイトなのかを伝えることができます。
<html>
<head>
<title>タイトルタグ追加</title>
</head>
<body>
見出し
</div>
</body>
</html>
- 文字コード
<meta charset="○○">
次に、文字コードの指定です。は、文字化けを防ぐために文字コードを設定します。
これがないと、Webページ上で文字が正しく表示されない可能性があります。
<html>
<head>
<title>タイトルタグ追加</title>
<meta charset="UTF-8">
</head>
<body>
見出し
</div>
</body>
</html>
- description
<meta name="description" content="○○">
Webページの要約を記述します。
書き方としては、metaのname属性にdescriptionを指定し、content属性に要約した内容を記述します。
これを書くことで、Googleなどの検索サイトの検索結果で、タイトルの下に表示される説明文の候補になります。
<html>
<head>
<title>タイトルタグ追加</title>
<meta charset="UTF-8">
<meta name="description" content="概要">
</head>
<body>
見出し
</div>
</body>
</html>
ヘッダーの特性
上記で説明した、『文字コード』や『description』は、追加しても特に表示面は変わっていません。
<meta>のタグでは、そのWebページのメタ情報を付与します。
他にヘッダーで設定できるものとしては、メタ情報を付与する『キーワード』<meta name="keywords" content="○○","△△","◇◇">や、他のファイルを呼び出して使いたいときに設定する<link>もあります。気になる方は調べてみてください！
まとめ
- ヘッダーに書く情報のうち、書いても直接表示されないものがある
- ヘッダーがなくてもWebページは表示可能だが、ヘッダーを設定すれば、アクセスしてきたすべてのコンピュータに対して表示の仕方を統一する付加価値を提供する