【HTML】 head要素内のタグ meta要素の解説

【HTML】 head要素内のタグ meta要素の解説

前回の記事では、必ず書かなければいけないコードを紹介しました。
この記事では、head要素の中に書くべきタグを説明していきます。

スポンサーリンク
スポンサーリンク

head要素の中に書くタグの種類

前の記事で説明したとおり、head要素の中には各種設定をタグで記入していきます。
様々な種類のタグがあり、その分だけ設定があります。

しかし、いきなり全て覚えるのは大変なので、このページでは主要な設定に絞って説明していきます。

meta要素の役割と種類

meta要素はページの基本情報を指定します。
属性の種類は「http-equiv」または「name」属性を最初に指定します。
その後、「content」属性で詳細な値を指定します。

以下に、よく使われるmeta要素を説明していきますので、必要に応じて使い分けてください。

http-equiv属性

属性値「Content-Type」
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

この「Content-Type」という属性値は、そのサイトの文字コードを表しています。
この文字コードを指定しておかないと、間違った文字コードで表示した場合に文字化けしてしまいます。
基本的に「UTF-8」という文字コードで統一するのが望ましいとされているので、このコードをコピーして使っても大丈夫です。

属性値「Content-Style-Type」
<meta http-equiv="Content-Style-Type" content="text/css" />

「Content-Style-Type」という属性値は、そのサイトのスタイルシートの種類を表しています。
スタイルシートについては、後ほどCSS(カスケーディングスタイルシート)という項目で詳しく解説します。
この属性値も、このサンプル通りに記載すれば問題ありません。

属性値「Content-Script-Type」
<meta http-equiv="Content-Script-Type" content="text/javascript" />

「Content-Script-Type」という属性値は、そのサイトのスクリプトの種類を表しています。
スクリプトというのは、サイトにアニメーション(動き)をさせたりする言語のことです。
編集には専門知識が必要になるので、スクリプトに関する詳しい内容は別の機会に解説します。
スクリプトを使う場合も使わない場合も、念のため記載しておくと安心です。
サンプル通りに記載すれば問題なく動作します。

name属性

属性値「description」
<meta name="description" content="サイトの概要説明です。" />

「description」という属性値は、そのページの概要文を表しています。
content属性に、大まかなページの説明を記載してください。

属性値「keywords」
<meta name="keywords" content="サンプル,sample,サンプルサイト" />

「keywords」という属性値は、そのページに関するキーワードを表しています。
content属性に、関連するキーワードを単語で入力してください。
複数指定する場合は、「,」(半角カンマ)で区切って入力してください。
キーワードの数が多すぎるのは望ましくありませんので、最大5個ほどで指定してください。

属性値「author」
<meta name="author" content="ぶーにゃん" />

「author」という属性値は、そのページの製作者を表しています。
そのサイトの管理者のハンドルネーム等を記載すると良いでしょう。

属性値「copyright」
<meta name="copyright" content="copyright &copy; サイト名" />

「copyright」という属性値は、そのページの著作権保有者を表しています。
content属性には、「copyright &copy;」の後にサイト名等を記載すると良いでしょう。

コピー用サンプルコード

最後に、前回の必須コードに加えて今回のhead要素を加えたサンプルを載せておきます。
慣れないうちはコピーして編集してお使いください。

title要素もほぼ必須ですので、解説前ですが併せてサンプルとして記載しました。
title要素については、次の記事で詳しく説明します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>ページのタイトルを記入してください。</title>
 <meta name="description" content="ページの概要説明を記入してください。。" />
 <meta name="keywords" content="キーワード,ワード,サンプル" />
 <meta name="author" content="製作者名" />
 <meta name="copyright" content="copyright &copy; サイト名" />

<!-- 次の記事で説明するhead要素内のタグも、必要に応じて記入してください。 -->

</head>
<body>
 
<!-- body要素の中身を記入してください。 -->
 
</body>
</html>

meta要素については、これで終わりです。
お疲れ様でした!

次からは、title・link・script要素と、それぞれの要素の記載順について説明していきます。
次でhead要素内のタグについては終わりますので、もう少し読み進めてみてください。

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。