HTML 【メタデータ】4 ~ meta要素

Code syntax on a computer screen

メタデータ・コンテンツの要素の1つであるmeta要素は、他の要素で指定できないメタデータを扱う要素です。
今回は、meta要素についてまとめたいと思います。

メタデータ・コンテンツについては、以下のページもご参照下さい。
HTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【 metadata 】2 ~ link要素(2)CSSファイルの読み込み
HTML 【 metadata 】2 ~ link要素(3)media属性
HTML 【 metadata 】2 ~ link要素(4)@importと@media
HTML 【 metadata 】2 ~ link要素(5)rel属性
HTML 【 metadata 】3 ~ style要素

目次

1.meta要素の内容
2.meta要素の4つの属性
3.charset属性で文字コードを指定
4.name属性でサイトの情報を指定
5.http-equiv属性で再読み込みを指定

1.meta要素の内容

meta要素は、メタデータ(HTML文書の基本情報)を指定するための要素です。
title要素やlink要素など、他のメタデータ・コンテンツで指定できないメタデータを扱います。
このように把握すると、その他的なイメージがありますが、サイトを作る時に必ず使う重要な要素です。

使用する要素  meta要素
使用する属性  charset属性、name属性、http-equiv属性、content属性

meta要素は、空(カラ)要素(中に何も書かない要素)です。ですので、終了タグがありません。メタデータ・コンテンツの中では、base要素とlink要素と同様です。

<meta charset=”UTF-8″>

meta要素は<head>~</head>内に書きます。

そしてmeta要素は、4つの属性のうちのcharset属性、name属性、http-equiv属性のどれか1つが必須です。
また、charset属性、name属性、http-equiv属性は、meta要素で使用できるのは1つだけです。複数の属性を使う場合は、それぞれにmeta要素を書きます。

meta要素では、以下のようなことが指定できます。
・文字コード(shift_JISとかUTF-8など)を指定する。
・サイトの概要(紹介文)を書く(検索エンジンの検索結果等で表示されます)。
・著作者の名前を書く。
・優先スタイルシートを指定する(link要素やstyle要素と連動させて読み込むCSSを指定できます)。
・ページの再読み込みを指定する。

▲目次へ戻る

2.meta要素の4つの属性

meta要素の属性は、charset属性、name属性、http-equiv属性、content属性の4つです。

charset属性

charset属性は、文字コードを指定する属性です。
この属性は、HTML5から単独で使えるようになりました。
<meta charset=”UTF-8″>
上記は、文字コードをUTF-8に指定しています。

name属性

name属性は、HTML文書の情報の種類を指定します。情報の内容はcontent属性で指定するため、必ずcontent属性と対で使います。
<meta name=”description” content=”~紹介文等テキスト~”>
上記は、サイトの紹介文を指定しています。content=””で指定したテキストが検索結果で表示されます。

http-equiv属性

http-equiv属性は、HTML文書の動作や状態を指定します。内容はcontent属性で指定するため、必ずcontent属性と対で使います。
<meta http-equiv=”refresh” content=”10″>
上記は、10秒毎にページを再読み込みするように指定しています。

content属性

content属性は、name属性かhttp-equiv属性と必ず対で使います。単独では使いません。

▲目次へ戻る

3.charset属性で文字コードを指定

meta要素のcharset属性を使って文字コードを指定すると、ブラウザが自動判別で文字コードを正しく表示してくれます。
これで、サイトの文字化けが防止できます。この指定は、絶対必要です。

使用する要素  meta要素
使用する属性  charset属性

charsetは「character set」の略で、character(キャラクター)は、コンピュータ上で、文字のことです。

charset属性は、HTML5から単独で使えるようになった属性です。
以前は、<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />のように、長々と書く必要がありました。
charset属性が単独で使えるようになったおかげで、シンプルに指定できるようになりました。

charset属性は、1つのHTMLファイルに1回だけ使用します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>

head要素の中で、title要素より前に書きます。HTML文書をブラウザで表示する際の文字コードの指定は、title要素内の文字(タイトル)も対象にすべきだからです。
上のサンプルではUTF-8を指定しています。

現在の日本語環境の文字コードは、この2つが一般的です。
●Shift_JIS
●UTF-8

Shift_JISは、マイクロソフトがメインになって1980年代に作った方式で、長い間、日本語標準文字コードになっていて、日本語環境では一般的でした。

UTF-8は、1990年代にできた新しい規格で、Unicodeという文字コードの中の1つです。

HTML5からは、文字エンコーディングに UTF-8を使用することが推奨されています。
世界中どこででも、日本語サイトを文字化け無く表示できるからです。
逆に、アラビア語など他言語のサイトも、こちらのブラウザで正しく(文字化けせずに)表示されます。
そして、UTF-8は、Win、Mac、Linuxなど、どんなOSでもOKです。

そもそも文字コードとは、文字をコンピュータに分かるようにグループ化して(仮名文字、漢字、半角数字、…)、正しく表示するために制定された方式(漢字と仮名文字を同時に使う、など)の総称です。

文字コードの種類として、Shift_JIS 、UTF-8の他にもASCII、JIS(ISO-2022-JP)、EUC-JP など、たくさんの文字コードがあって、meta要素のcharset属性で指定しておけば、ブラウザは自動判別で、指定した通りの文字コードで表示してくれます。

また、ブラウザで、ユーザが文字コードを自由に選べるようにもなっています。
ブラウザでは「文字エンコーディング」または「エンコード」などという表現をしています。
エンコードとは、ある形式のデータを、ある方式で別の形式のデータに変換することです。デコードはその逆です。

▲目次へ戻る

4.name属性でサイトの情報を指定

meta要素のname属性を使って、サイトの情報を指定することができます。
必ず<meta name=”種類の名称” content=”内容”>という書き方をします。

使用する要素  meta要素
使用する属性  name属性、content属性

name属性は、必ずcontent属性とセットで使います。
name属性で HTML文書の情報の種類の名称を指定し、その内容はcontent属性で指定します。
そしてこれは、head要素内に書きます。

name=”description”

<head>
<meta name=”description” content=”HTMLがサクサク書ける!”>
</head>

サイトの簡単な紹介文を指定します。検索エンジンの検索結果で表示されるテキストなので重要です。サイトの内容を伝えるために、きちんと書いておいた方が良いです。

name=”author”

<head>
<meta name=”description” content=”HTMLがサクサク書ける!”>
<meta name=”author” content=”プログラミング入門レシピ”>
</head>

HTML文書の著作権情報を書きます。個人の場合は自分の名前やハンドルネームなどを、企業・団体などの場合は、その名称を書くのが一般的です。

name=”keywords”

<head>
<meta name=”description” content=”HTMLがサクサク書ける!”>
<meta name=”author” content=”プログラミング入門レシピ”>
<meta name=”keywords” content=”HTML5、metadata”>
</head>

キーワードを指定します。
かつては、検索エンジン向けのキーワードとして機能していましたが、乱用等経緯があり、現在は、検索エンジンには無視されているようです。

▲目次へ戻る

5.http-equiv属性で再読み込みを指定

meta要素のhttp-equiv属性を使って、HTMLの動作や状態を指定することができます。
ただ、HTML5になって、この属性は以前よりあまり使わなくなりました。
以前は、サイトの主言語指定や文字コード指定も、このhttp-equiv属性を使って行っていましたが、HTML5では、各要素や属性が整理されたためだと思います。
でも、refreshは使っています。

使用する要素  meta要素
使用する属性  http-equiv属性、content属性、url属性

http-equiv属性は、必ずcontent属性とセットで使います 。

http-equivの読み方は、エイチティーティーピー イクイヴです。
httpは「hypertext transfer protocol」、equivは「equivalent」の略です。

<meta http-equiv=”refresh”>でページの再読み込みを指定

3秒後に new.html というページを表示したい場合は、次のように指定します。

<meta http-equiv=”refresh” content=”3; url=new.html”>

5秒後に同じページを再読み込みしたい場合は、次のようにurl属性無しで指定します。

<meta http-equiv=”refresh” content=”5;>

<meta http-equiv=”default-style”>で優先外部CSSを指定

これは、外部CSSの優先度をlink要素以外でも指定する方法です。

<meta http-equiv=”default-style” content=”default”>
<link rel=”stylesheet” href=”default.css” title=”default”>
<link rel=”stylesheet” href=”2nd.css” title=”2nd”>
<link rel=”stylesheet” href=”3rd.css” title=”3rd”>

title属性を使ったセット名で優先CSSを指定します。
link要素で複数の外部CSSファイルにtitle属性でセット名を指定している場合、その中の優先セット名を、meta要素で指定する方法です。

title属性無しでも優先のデフォルト外部CSSファイルを指定できます。

<meta http-equiv=”default-style” content=”default.css”>
<link rel=”stylesheet” href=”default.css”>
<link rel=”stylesheet” href=”2nd.css” title=”2nd”>
<link rel=”stylesheet” href=”3rd.css” title=”2nd”>

link要素で複数の外部CSSファイルを指定している場合、その中のデフォルトのCSSを指定します。
link要素にtitle属性を使わずに、meta要素で優先CSSを指定する方法です。

link要素で指定できる内容なので、敢えてhttp-equiv=”default-style”を使う場面は少ないかもしれません。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です