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

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

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

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

メタデータ

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

title要素

カテゴリ:
メタデータコンテンツ
コンテンツモデル:
空白文字以外のテキスト
コンテンツ属性:
グローバル属性

  • head要素内に記述
  • head要素内に1つだけ記述できる
  • ドキュメントのタイトルや名前を表す
  • ユーザ履歴やブックマーク、検索結果に利用されるため、ドキュメントを識別できるtitleをつける必要がある

base要素

カテゴリ:
メタデータコンテンツ
コンテンツモデル:
なし
コンテンツ属性:
グローバル属性、href属性(ドキュメントのbaseURL)、target属性(デフォルトのブラウジングコンテキスト((ユーザの閲覧環境のこと。_blankや_selfなどを指定する。)))

  • head要素内に記述
  • head要素内に1つだけ記述できる
  • ドキュメントのbaseURLを指定
  • base要素には、hrefかtarget属性どちらか1つは必ず指定する必要がある

link要素

カテゴリ:
メタデータコンテンツ
body要素に記述が許可されている場合:フローコンテンツ、フレージングコンテンツ
コンテンツモデル:
なし
コンテンツ属性:
グローバル属性、
href … ハイパーリングのアドレス
crossorigin … 別オリジンのリソースに対する処理の設定
rel … このドキュメントとターゲットリソースとの関係性
rev … このドキュメントとターゲットリソースとの関係性を逆で見た場合
media … メディアクエリの設定
nonce … Content Security Policyで利用される暗号の設定
hreflang … リンク先リソースの言語指定
type … MIMEタイプの設定
referrerpolicy … リクエストに適用するリファラーポリシー
sizes … アイコンのサイズ

  • head要素内に記述。またはhead要素内のnoscript要素の子要素として記述。またはフレージングコンテンツを配置できる場所に記述。
  • 他リソースを記述。


続きは次回の記事で。