こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。
このレッスンではheadタグの中にWEBページの設定に関するどのような情報を記述するのかを学びます。
具体的にはmetaタグ、titleタグ、linkタグの使い方を学び、それぞれの役割を理解しましょう。
これらのタグもWEBページでは必ず使うタグです。
- metaタグの使い方
- titleタグの使い方
- linkタグの使い方
目次
HTMLの全体構成（2）レッスンの答え
このレッスンの答えは以下のとおりです。
<!DOCTYPE html>
<html>
<head>
<!-- 雛形をコピーして、3つの要素を追加してください -->
<!-- 文字コードを「utf-8」にしてください -->
<meta charset="utf-8">
<!-- タイトルを「Progate」にしてください -->
<title>Progate</title>
<!-- 「stylesheet.css」を読み込んでください -->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>
metaタグではWEBページで使用する文字コードを宣言しています。
他にも概要やキーワードなどWEBページに関する様々な情報を表すことができます。
titleタグではWEBページのタイトルを記述しています。
titleタグはGoogle検索で上位表示させる（SEO）ために重要な要素の1つとなります。
linkタグではCSSコードを記述しているstylesheet.cssを読み込んでいます。
CSSファイルなどの外部に書いたコードを読み込むことができます。
よくあるミス
このレッスンでは雛形が用意されており、ほとんど手を動かして記述する必要がありせん。
そのためWEBページを実際に作り始めた時、雛形ですでに準備されていたところでよくミスがあります。
以下のようなよくあるミスに気をつけましょう！
- metaタグやlinkタグに閉じタグを付けてしまう
- linkタグのrefを記述していない
よくあるミス1：metaタグやlinkタグに閉じタグを付けてしまう
<!-- 文字コードを「utf-8」にしてください -->
<meta charset="utf-8"></meta>
<!-- 「stylesheet.css」を読み込んでください -->
<link rel="stylesheet" href="stylesheet.css"></link>
このレッスンでは雛形をコピーして貼り付けるのでこのようなミスは起こりませんが、WEBページを作り始めた時にmetaタグやlinkタグに閉じタグを付けてしますミスをしてしますので気をつけましょう。
metaタグやlinkタグは閉じタグが必要ありません。
よくあるミス2：linkタグのrefを記述していない
<!-- linkタグにrefがない --> <link href="stylesheet.css">
linkタグのrefもこのレッスンでは雛形として準備されているので、意識しなくてもコピペで記述されますがWEBページを作り始めるとrefを付け忘れてしまいやすいです。
refではどのような種類のファイルを読み込むのかを宣言している重要な情報なので、忘れずにrefを記述しましょう。
まとめ：headタグ内に記述するmetaタグ、titleタグ、linkタグをマスターしよう
このレッスンではheadタグの中にWEBページの設定に関する情報をmetaタグ、titleタグ、linkタグで記述する方法を学びました。
これらのタグもWEBページでは必ず使うタグです。
metaタグではWEBページで使用する文字コードを宣言しています。
他にも概要やキーワードなどWEBページに関する様々な情報を表すことができます。
titleタグではWEBページのタイトルを記述しています。
titleタグはGoogle検索で上位表示させる（SEO）ために重要な要素の1つとなります。
linkタグではCSSコードを記述しているstylesheet.cssを読み込んでいます。
CSSファイルなどの外部に書いたコードを読み込むことができます。
- metaタグの使い方
- titleタグの使い方
- linkタグの使い方
WEBページを実際に作り始めた時、雛形ですでに準備されていたところでよくミスがあります。
以下のようなよくあるミスに気をつけましょう！
- metaタグやlinkタグに閉じタグを付けてしまう
- linkタグのrefを記述していない
