ITコラム

HTML meta tag code on computer screen

ITコラム

2017.01.30

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

メタデータ・コンテンツの要素の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要素( 本ページ )

目次

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”を使う場面は少ないかもしれません。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.