自身のアウトプットも兼ねてつれづれと書き続けるブログ。
HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ]
前回からの続きです。
ルート要素と文章のメタデータ[02]
base要素
base要素は、基準URLやリンク先を表示するデフォルトのウィンドウターゲットを指定します。この要素はなくても良いですが、記述する場合１つしか存在してはなりません。
【コンテンツモデル】
Nothingです。内容を持つことが出来ず、終了タグを書くこともできません。
【属性】
href属性：基準となるURLを指定します。下記の例ですとaタグにnekonikoban.htmという相対URLが書かれていますが、HTMLが存在しているか関係なく、http://test.com/のリンクとして扱います。
target属性：リンク先をどのように開くかのデフォルト値を指定します。下記の例ですとタブブラウザーであれば常にタブでリンクを開くように指定できます。
<base target="_blank">
meta要素
<meta>
meta要素は、他の要素では表現できないさまざまな種類のメタデータを表します。
【コンテンツモデル】
Nothingです。内容を持つことが出来ず、終了タグを書くこともできません。
【属性】
meta要素は、下記の４つから最低１つは指定する必要があります。
- charset：HTMLの文字コーティングを表します。
- http-equiv：HTTPでウェイブサーバーから与えられる情報と等価な情報を表します。
- name：文章レベルのメタデータを表します。
- itemprop：microdataによるメタデータを表します。
※charset属性を指定した場合を除き、content属性も同時に指定しなければなりません。
[charset属性]
charset属性を利用すると、HTML文章の文字エンコーディングを宣言できます。この用法を文字エンコーディング宣言（charset encoding declaration）と呼びます。
<meta charset='utf-8'>
現在のHTML仕様は文字エンコーディングとしてUTF-8を要求するためcharset属性の値は、utf-8としなければいけません。また文字エンコーディング宣言を書く際には以下のような制約があります。
[http-equiv属性]
http-equiv属性を利用すると、HTTPレスポンスヘッダーと同等の情報を指定できます。
・文字エンコーディング宣言（http-equiv="content-type"）
文字エンコーディング宣言はhttp-equiv属性にも記入することが可能です。この記述は古い書き方で、現在のHTMLではcharset属性を利用されます。
<meta http-equiv="content-type" content="text/html; charset=utf-8">
・ページのリフレッシュ（http-equiv="refresh"）
http-equiv="refresh"を指定してcontent属性に整数を指定すると、指定秒数後にページを自動的に再読み込むするよう指示します。下記の例は200秒後にページを再読み込みする例です。
<meta http-equviv="refresh"content="200">
また指定秒数後にそのURLへリダイレクトする動作を指示できます。下記の例ですと30秒後にhttps://www.nekonikoban.com/に移動します。
<meta http-equviv="refresh"content="30; URL=https://www.nekonikoban.com/>
・CSPの指定（http-equiv="content-security-policy"）
CSP（Content Security Policy）を指定できます。CSPを指定すると、ページ上でのJavascriptの動作を制限できます。これにより、クロスサイトスクリプティングの攻撃を受けにくくなります。
[name属性]
name属性は、任意のメタデータを表現します。content属性でメタデータとなるテキストを指定し、name属性で任意の名前を付けます。
・ページコンテンツの説明（name="description"）
name="description"を指定するとcontent属性の値はページコンテンツの説明（ディスクリプション）となります。検索エンジンはこの説明文を検索結果ページに表示することがあります。
<meta name="description" content="ホームページの説明が入ります。">
・ページのキーワード（name="keywords"）
name="keywords"は、ページに関するキーワードをカンマ区切りで記述するものです。
<meta name="keywords" content="キーワード,キーワード,キーワード">
・ビューポート（name="viewport"）
name="viewport"は、主に画面が小さなモバイルブラウザーに対して、ウェブページの表示制限に関する情報を伝えます。
<meta name="viewport" content="width=device-width, initial-scale=1">
style要素
style要素は、CSSスタイルシートを埋め込む要素です。link要素が外部のスタイルシートを参照するのに対し、style要素は要素の内容にスタイルを記述します。
特定ページだけに一時的にスタイルを適応するような場合、style要素は便利です。
【コンテンツモデル】
テキストになります。このテキストはCSSの構文として適合するものでなければなりません。
[属性]
現在ではstyle要素に属性を指定することは稀です。