メタデータ・コンテンツの要素の1つであるmeta要素は、他の要素で指定できないメタデータを扱う要素です。
今回は、meta要素についてまとめたいと思います。
HTML 【メタデータ】1 ～ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ～ link要素（1）MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ～ link要素（2）CSSファイルの読み込み
HTML 【メタデータ】2 ～ link要素（3）media属性
HTML 【メタデータ】2 ～ link要素（4）@importと@media
HTML 【メタデータ】2 ～ link要素（5）rel属性
HTML 【メタデータ】3 ～ style要素
HTML 【メタデータ】4 ～ meta要素（ 本ページ ）
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
meta要素は、メタデータ（HTML文書の基本情報）を指定するための要素です。
title要素やlink要素など、他のメタデータ・コンテンツで指定できないメタデータを扱います。
このように把握すると、その他的なイメージがありますが、サイトを作る時に必ず使う重要な要素です。
meta要素は、空（カラ）要素（中に何も書かない要素）です。ですので、終了タグがありません。メタデータ・コンテンツの中では、base要素とlink要素と同様です。
<meta charset="UTF-8">
meta要素は<head> ～ </head>内に書きます。
そしてmeta要素は、4つの属性のうちのcharset属性、name属性、http-equiv属性のどれか１つが必須です。
また、charset属性、name属性、http-equiv属性は、meta要素で使用できるのは１つだけです。複数の属性を使う場合は、それぞれにmeta要素を書きます。
meta要素では、以下のようなことが指定できます。
・文字コード（shift_JISとかUTF-8など）を指定する。
・サイトの概要（紹介文）を書く（検索エンジンの検索結果等で表示されます）。
・著作者の名前を書く。
・優先スタイルシートを指定する（link要素やstyle要素と連動させて読み込むCSSを指定できます）。
・ページの再読み込みを指定する。
meta要素の属性は、charset属性、name属性、http-equiv属性、content属性の４つです。
charset属性は、文字コードを指定する属性です。
この属性は、HTML5から単独で使えるようになりました。
<meta charset="UTF-8">
上記は、文字コードをUTF-8に指定しています。
name属性は、HTML文書の情報の種類を指定します。情報の内容はcontent属性で指定するため、必ずcontent属性と対で使います。
<meta name="description" content="～紹介文等テキスト～">
上記は、サイトの紹介文を指定しています。content=””で指定したテキストが検索結果で表示されます。
http-equiv属性は、HTML文書の動作や状態を指定します。内容はcontent属性で指定するため、必ずcontent属性と対で使います。
<meta http-equiv="refresh" content="10">
上記は、１０秒毎にページを再読み込みするように指定しています。
content属性は、name属性かhttp-equiv属性と必ず対で使います。単独では使いません。
meta要素のcharset属性を使って文字コードを指定すると、ブラウザが自動判別で文字コードを正しく表示してくれます。
これで、サイトの文字化けが防止できます。この指定は、絶対必要です。
charsetは「character set」の略で、character（キャラクター）は、コンピュータ上で、文字のことです。
charset属性は、HTML5から単独で使えるようになった属性です。
以前は、<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />のように、長々と書く必要がありました。
charset属性が単独で使えるようになったおかげで、シンプルに指定できるようになりました。
charset属性は、１つのHTMLファイルに１回だけ使用します。
<!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という文字コードの中の１つです。
HTML5からは、文字エンコーディングに UTF-8を使用することが推奨されています。
世界中どこででも、日本語サイトを文字化け無く表示できるからです。
逆に、アラビア語など他言語のサイトも、こちらのブラウザで正しく（文字化けせずに）表示されます。
そして、UTF-8は、Win、Mac、Linuxなど、どんなOSでもOKです。
そもそも文字コードとは、文字をコンピュータに分かるようにグループ化して（仮名文字、漢字、半角数字、…）、正しく表示するために制定された方式（漢字と仮名文字を同時に使う、など）の総称です。
文字コードの種類として、Shift_JIS 、UTF-8の他にもASCII、JIS（ISO-2022-JP）、EUC-JP など、たくさんの文字コードがあって、meta要素のcharset属性で指定しておけば、ブラウザは自動判別で、指定した通りの文字コードで表示してくれます。
また、ブラウザで、ユーザが文字コードを自由に選べるようにもなっています。
ブラウザでは「文字エンコーディング」または「エンコード」などという表現をしています。
エンコードとは、ある形式のデータを、ある方式で別の形式のデータに変換することです。デコードはその逆です。
meta要素のname属性を使って、サイトの情報を指定することができます。
必ず<meta name=”種類の名称” content=”内容”>という書き方をします。
name属性は、必ずcontent属性とセットで使います。
name属性で HTML文書の情報の種類の名称を指定し、その内容はcontent属性で指定します。
そしてこれは、head要素内に書きます。
<head>
<meta name="description" content="HTMLがサクサク書ける！">
</head>
サイトの簡単な紹介文を指定します。検索エンジンの検索結果で表示されるテキストなので重要です。サイトの内容を伝えるために、きちんと書いておいた方が良いです。
<head>
<meta name="description" content="HTMLがサクサク書ける！">
<meta name="author" content="プログラミング入門レシピ">
</head>
HTML文書の著作権情報を書きます。個人の場合は自分の名前やハンドルネームなどを、企業・団体などの場合は、その名称を書くのが一般的です。
<head>
<meta name="description" content="HTMLがサクサク書ける！">
<meta name="author" content="プログラミング入門レシピ">
<meta name="keywords" content="HTML5、metadata">
</head>
キーワードを指定します。
かつては、検索エンジン向けのキーワードとして機能していましたが、乱用等経緯があり、現在は、検索エンジンには無視されているようです。
meta要素のhttp-equiv属性を使って、HTMLの動作や状態を指定することができます。
ただ、HTML5になって、この属性は以前よりあまり使わなくなりました。
以前は、サイトの主言語指定や文字コード指定も、このhttp-equiv属性を使って行っていましたが、HTML5では、各要素や属性が整理されたためだと思います。
でも、refreshは使っています。
http-equiv属性は、必ずcontent属性とセットで使います 。
http-equivの読み方は、エイチティーティーピー イクイヴです。
httpは「hypertext transfer protocol」、equivは「equivalent」の略です。
３秒後に new.html というページを表示したい場合は、次のように指定します。
<meta http-equiv="refresh" content="3; url=new.html">
５秒後に同じページを再読み込みしたい場合は、次のようにurl属性無しで指定します。
<meta http-equiv="refresh" content="5;>
これは、外部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”を使う場面は少ないかもしれません。
INTERNOUS,inc. All rights reserved.
