headタグについて勉強しましょう。
前回、HTMLの大まかな概要について勉強しました。
今回は、HTMLの中の<head>タグについてより勉強をしていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの勉強</title>
</head>
以前作成した、このHTMLのヘッドの部分のみ抜き出して説明をしていきます。
<head>タグには、入力出来るタグがいくつかあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTMLの勉強を始めます。">
こちらは、検索エンジンに対して、どんなサイトであるかの説明を記載する項目となっています。こちらにかかれた文章が、検索結果に反映されますので、自分が作ったサイトの内容を簡潔に書きましょう。
<title>HTMLの勉強</title>
<link rel="stylesheet" href="style.css">
デザインを指定するスタイルシート(css)を適用させるために必要なタグです。
※スタイルシートについては別の機会に説明をします。
<link rel="shortcut icon" href="favicon.ico" >
こちらは、ファビコンを指定する際に必要なタグです。
ファビコンとは、下記のような物です。
ユーザーがお気に入りに入れた際に、タイトルと一緒に表示がされるので、ユーザーにとってどんなサイトかをイメージしやすくさせることが出来ます。
<script src="myscript.jp"></script>
こちらは、jsファイルを読み込むためのタグになります。
スクリプトタグは閉じタグが必要となりますので、忘れず入力をしてください。
</head>
上記のタグを整理すると下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTMLの勉強を始めます。">
<title>HTMLの勉強</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" >
<script src="myscript.jp"></script>
</head>
現時点では、cssファイルもファビコンデータも、jsファイルも作成していないため、何も変化はありませんが、こういうタグもhead内には入れられるということを理解しておいてください。