head要素内の基本的なマークアップの流れ

head要素には文字コードや言語、読み込むファイルといった文書のメタ情報を記述します。メタ情報とはコンピュータがHTML文書を正しく解釈するための情報です。記述が必須とされているのはタイトル要素のみですが、このページの内容ぐらいは書いておいた方がいいです。

必ず記述すること
大体記述すること

必ず記述すること

head要素

head要素を記述する場所です。この間にメタ情報を記述します。

<!--ここにメタ情報を記述する-->

WEBページのタイトル

WEBページのタイトルをtitle要素に記述します。 title要素はhead要素内に必ず１つ必要です。

<title>ページタイトル</title>

文字コード

WEBページの文字コードを指定します。この解釈が食い違うと文字化けしたページになります。またHTML文書を記述する際、指定した文字コードと合わせないと文字化けします。サイトを作る前にあらかじめ決めておいた方がいいでしょう。こだわりがなければ「utf-8」がお勧めです。

<title>ページタイトル</title>

大体記述すること

外部ファイルの指定

外部ファイルのファイルパスを指定をします。大抵のサイトはCSSファイルを外部ファイルに持っているので場所を記述します。他にもJavsScriptがよく使われますので、ここにもある前提で書いておきます。

<title>ページタイトル</title>

<!--CSSファイルの指定-->

<!--JavaScriptファイルの指定-->

ビューポート

パソコンで閲覧する前提のサイトは、スマートフォンで表示すると余計な余白が表示されたり縮小されたりします。しかしビューポートを指定すれば、スマートフォンでの閲覧時も比較的元のレイアウトを保てるようになります。詳細は別の記事で説明するので、とりあえずは「meta情報にこんなのがあるんだ」ぐらいに覚えて置いてください。

<title>ページタイトル</title>

検索エンジンへの情報

検索エンジンに対してこのページがどのようなものであるか示します。
descriptionにはページの概要を、keywordには検索時のキーワードを指定します。

これらはSEO（検索エンジンなどに対するアピールのようなもの）的に重要です。逆に「身内サイトだからそんなの一切気にしないぜ！」という場合は必要ないです。

<title>ページタイトル</title>

これでhead要素が一端の感じになりました。実際は他にも色々書いたり逆に書かなかったりしますが、その辺はページ次第です。

head要素はどのような事を書く場所か、感じは掴めたでしょうか？

B!
LINE