ルート要素を表す<html>タグ、メタデータの集まりを表す<head>タグ、文書の内容を表す<body>、文書のタイトルを表す<title>タグ、文書のメタデータを表す<meta>タグの使用方法を掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| html要素 | なし |
最初の子要素としてhead要素を１つ。その後にbody要素を1つ |
| head要素 | なし |
iframe要素のsrcdoc属性値に入れられる文書内、もしくは別の手段でタイトル情報が提供されている場合は 0個以上のメタデータコンテンツ |
| body要素 |
セクショニングルート |
html要素の２番目の子要素 |
| title要素 |
メタデータコンテンツ |
テキスト |
| meta要素 |
メタデータコンテンツ |
空 |
グローバル属性（共通）
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
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>
コメント