HTML辞典 html要素、head要素、body要素、title要素、meta要素の解説
ルート要素を表す<html>タグ、メタデータの集まりを表す<head>タグ、文書の内容を表す<body>、文書のタイトルを表す<title>タグ、文書のメタデータを表す<meta>タグの使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| html要素 | なし | 最初の子要素としてhead要素を１つ。その後にbody要素を1つ |
| head要素 | なし |
iframe要素のsrcdoc属性値に入れられる文書内、もしくは別の手段でタイトル情報が提供されている場合は 0個以上のメタデータコンテンツ |
| body要素 | セクショニングルート | html要素の２番目の子要素 |
| title要素 | メタデータコンテンツ | テキスト |
| meta要素 | メタデータコンテンツ | 空 |
HTML共通で指定できるグローバル属性について
html要素
書式・概要
<html 属性="属性値">HTML文書</html>HTML文書におけるルート要素。トップレベルの要素になります。
使用できる属性
manifest（マニフェスト）
キャッシュマニフェストファイルは、オンラインでのアクセスに備えてブラウザがあらかじめキャッシュしておく外部リソースを指定したもので、内容はテキストファイルです。
<html manifest="xxxxx.appcache">xmlns
文書をXMLとして扱う場合は、名前空間宣言を記述します。
<html xmlns="http://www.w3.org/">head要素
書式・概要
<head>メタデータのタグ</head>head要素は文書のタイトルやmeta要素の情報など、メタデータの集まりを表します。html要素の最初の子要素で１つだけ設置できます。
body要素
書式・概要
<body>HTML文書内容</body>body要素は文書の内容を表します。html要素内でbody要素は１つだけ設置できます。
title要素
書式・概要
<title>HTML文書内容</title>title要素は文書のタイトルを表します。基本的には省略できません。また、SEO的にも重要な意味があります。同じWebサイト内で、各ページのタイトルのテキストが重複しないよう推奨されています。
検索エンジンの結果ページなどに影響するため、適切なタイトルをつけます。
meta要素
書式・概要
<meta 属性="属性値">meta要素は文書における様々なメタデータを表します。メタデータとは文書の文字コードや概要、キーワードなどの文書に関する情報を表します。
使用できる属性
name
要素に名前を与えることでメタデータの種類を示します。内容はcontent属性に設定します。
<meta name="xxx" content="xxx">| content-language | 文書の記述言語を指定するために使用します。この指定は非推奨となり、lang属性を使用します。 |
| content-type | 文字コードを指定する |
| default-style | 優先スタイルシートを指定する |
| refresh | 自動更新やリダイレクトを指定する |
| set-cookie | Cookieを設定するために使用します。この指定は非推奨であり、代わりいHTTPヘッダーを使用します。 |
| application-name | 文書がWEBアプリケーションを利用している場合は、アプリケーション名を記述する。1文書に1つだけの記述します。 |
| author | 著作者を設定します。 |
| description | 文書の概要を記述します。検索エンジンのクローラーに読み取られて検索結果などにも表示されます。 |
| generator | 文書がソフトウェアによって記述、作成されている場合に、ソフトウェア名を記述するために指定します。 |
| keywords | 文書の内容を表すキーワードを記述するために指定します、カンマ（,）で区切って複数指定できます。 現在の検索エンジンでは考慮していないため、指定は不要となりました。 |
| robots | 検索エンジンのクローラーによるWebページのインデックスを拒否したり、Webページ内のリンク先を探査されないようにできます。 ただし、強制力はなくクローラーによります。 |
| viewport | スマートフォン向けの文書の表示方法を指定する。キーワードを＝でつなげて、カンマ（,）で区切り複数指定できます。 |
src
【必須】
埋め込む画像のURL
http-equiv
content属性と併せて使用します。HTML文書で使用する言語や文字符号化方式、スタイルシート、更新方法、クッキーを指定します。
| 属性値 | 概要 |
|---|---|
| refresh | 自動更新やリダイレクトさせる |
| X-UA-Compatible | Internet Explorerのレンダリング方法 |
| default-style | デフォルトのスタイルシートを指定 |
content（コンテント）
name、http-equiv属性に必ず併記する属性となり、それらの属性のメタデータを指定します。
charset
head要素内に記述することで、文書の文字コードを指定します。2つ以上の文字コードは指定することはできません。
一般的には、htmlファイルに保存した際の文字コードを指定します。
viewport（スマートフォン向けの表示方法を指定する）
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />iPhoneやAndroidなどのスマートフォンやタブレット端末のブラウザーは、多くの場合、幅90
| content属性値 | 役割 |
|---|---|
| initial-scale | Webページが最初に読み込まれたときの拡大・縮小を指定します。 初期では、Webページを端末画面に合わせます。指定できる値の範囲は、minimum-scaleとmaximum-scaleの値の範囲になります。 |
| width | 表示する幅を200px～10000pxの数値の範囲で指定します。 初期値は980pxです。「device-width」を指定することで、端末の画面幅を指定できます。 |
| height | 表示する高さを223px～10000pxの範囲で指定します。 「device-height」を指定することで、端末の画面高さを指定できます。 |
| user-scalable | 閲覧者にWebページの拡大・縮小を許可するか「yes or no」で指定します。初期値はyesです。 |
| minimum-scale | 許可する拡大率の下限を0～10の数値で指定します。初期値は、0.25です。 |
| maximum-scale | 許可する拡大率の上限を0～10の数値で指定します。初期値は、1.6です。 |
サンプル
「width=device-width」を指定して、端末画面の幅に合わせて表示されます。同時にWebページが表示される倍率は1です。
<meta name="viewport" content="width=device-width,initial-scale=1.0 />ページを更新またはリダイレクト
http-equiv属性にrefreshを指定すると、content属性の値で指定した時間で、ページを更新及びリダイレクトすることができます。ただし、この方法はあまり好ましくはありません。未対応のブラウザやページをロード後に意図しない不具合でリダイレクトができないことがあるので、サーバーサイド側でリダイレクトさせる方法を優先しましょう。
<!-- ページ更新 -->
<meta http-equiv="refresh" content="600" />
<!-- 別のページへリダイレクト -->
<meta http-equiv="refresh" content="1;URL=top.html" />概要を指定する
検索エンジンはHTML文書に関する概要文を解釈して検索結果に表示します。
<meta name="description" content="HTML文書の概要" />InternetExplorerの最新バージョンの標準モードを指定
InternetExplorerは「互換表示」と「標準表示」のレンダリング方法を持っています。バージョンごとに表示を変えることができます。InternetExplorerの最新バージョンの標準モードを指定することで、表示の差異を統一することができます。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />電話番号のリンクを無効化
iPhoneなど、電話番号と判断したときにWebブラウザ側でリンクを自動的に設定する場合があります。意図しない数字の羅列があった場合に、リンクになるのを防ぎます。
<meta name="format-detection" content="telephone=no" />検索エンジンにページをインデックスさせない
検索エンジンにクロール、インデックスさせたくない場合に使用します。コンテンツとして価値がないものはSEOとして不利になるので、この設定をするとよいでしょう。たとえば、管理者画面やログイン画面、問い合わせフォームなどは、訪問者に見せるコンテンツ用途ではないため、クロールされても困るため設定するとよいでしょう。
<meta name="robots" content="noindex, nofollow, noarchive" />テンプレート
日本語で書かれた文書であれば、html要素に対してlang属性で「ja」を指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<title>すなりんのぶろぐ</title>
<meta name="description" content="C#言語の初心者向け入門について書かれた文書" />
<meta name="author" content="すなりん記者" />
<meta name="viewport" content="width=device-width,initial-scale=1.0 />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
</body>
</html>