htmlのheadタグについて理解します。
headタグとは
基本的にはサイトの情報を記載します。
ブラウザ画面に表示されることはないです。
サイト情報
サイトの情報はmetaタグに記載します。
metaタグはサイトの情報だけでなく用途は様々です。主に以下の用途で使用します。

説明(description)
ページ(画面)についての説明を指定します。
説明の内容はブラウザ画面に表示されません。
googleなどの検索エンジンから検索された結果の一覧画面に説明の内容が表示されます。
具体的には、metaタグのname属性descriptionを指定した際のcontent属性の値が表示されます。

検索キーワード(keywords)
検索エンジンから検索させたいキーワードを指定します。
キーワードもブラウザ画面に表示されません。
具体的には、metaタグのname属性keywordsを指定した際のcontent属性の内容がキーワードとなります。

文字コード
htmlで表示する文字コードを指定します。
とりあえずutf-8で設定すると覚えておきましょう。
文字コードを指定しないと文字化けします。

自動リンクの制御
電話番号、メールアドレス、住所はスマートフォンやタブレットでは自動的にリンクとなる場合があります。
このリンクを解除することが出来ます。
具体的には以下のように設定します。

viewポート
viewポートについてはここでは詳しく記載しません。後に説明します。今はviewポートの指定ができると覚えておきましょう。

タイトル
サイトのタイトルが設定できます。
タイトルはブラウザのタブに表示されます。

カノニカル
サイトにアクセスする場合、以下のように複数のアクセス方法が存在することがあります。

この場合、同じサイトなのに検索エンジンからはそれぞれ別のサイトだと思われてしまいます。
なので、同じサイトであることを証明する必要があります。
このように、サイトへのアクセス方法が複数ある場合に同一のサイトであること証明する際にカノニカルを指定します。
具体的には以下のように設定します。

スタイル読み込み
htmlのスタイルを読み込みます。
主にcssファイルの読み込みを行います。
cssについては、css入門を参照して下さい。
以下に例を記載します。
test.cssというスタイルシートを読み込んでいます。

まとめ
今までの内容をまとめたサンプルを以下に記載します。

headタグに何を指定するかは各サイトにより異なります。
次回はweb画面の内容を記述する bodyタグについて説明します。
次回:bodyタグ

▼ HTMLに関する記事の一覧をみる
こちら