チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行後、今度はフロントエンドエンジニアになろうと奮闘中。時々趣味の雑貨系も♡好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5の基礎知識~メタデータその2~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

メタデータ

head要素内にメタデータコンテンツに属する要素を記載する。

meta要素

カテゴリ:
メタデータコンテンツ

コンテンツモデル:
なし

コンテンツ属性:
・グローバル属性
・name属性 — メタデータの名前を指定(keywordやdescriptionなど)。
・http-equiv属性 — プラグマディレクティブ。
・content — 値を指定。
・charset — エンコードを指定(UTF-8など)。

タグの記載場所:
・charset属性が存在する場合またはhttp-equiv属性が存在していてエンコーディングが指定されている場合は、head要素内に記載。
・http-equiv属性が存在するがエンコーディングの指定がない場合は、head要素内またはhead要素の子要素であるscript要素に記載。
・name属性が存在する場合、メタデータコンテンツを配置できる場所に記載。
 

  • ドキュメントの文字コードや概要などの情報を記載。
  • title、base、link、style、およびscript要素で指定できないものを記載。
  • name、http-equiv、charset属性のいずれか1つを指定しなければならない。
  • nameまたはhttp-equiv属性が指定された場合、content属性を指定しなければならない。それ以外では省略しなければならない。
  • charset属性は1ドキュメントに1つのみ指定可能。
ex.
<meta name="keywords" content="chocopai">

style要素

カテゴリ:
メタデータコンテンツ

コンテンツモデル:
type属性に依存

コンテンツ属性:
・グローバル属性
・media … メディアクエリ
・nonce … Content Security Policyの暗号ノンスの設定
・type … 埋め込むリソースの種類
・title … 代替スタイルシートの名前

タグの記載場所:
メタデータコンテンツを配置できる場所に記載。
・head要素の子要素として存在するscript要素内に記載。
・body要素内では、フローコンテンツが配置可能な場所に記載。
 

  • 内部スタイルシート(埋め込み)を書くことができる。
  • type属性が存在する場合、有効なMIMEタイプを指定する。
  • type属性が省略された場合、デフォルト値の"text/css"が設定される。
ex.
<style>
div {
    margin: 0;
}
</style>

script、noscript、template要素は別のところで記載。