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

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

HTML5の基礎知識~全体構造~

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

HTMLの全体構造について

基本は、

<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 中身は省略 -->
</head>
<body>
<!-- 中身は省略 -->
</body>
</html>

DOCTYPE宣言

DOCTYPE宣言については以下で。
chooringo.hatenablog.com

html要素

カテゴリ:なし
コンテンツモデル:head要素と続けてbody要素
コンテンツ属性:グローバル属性、manifest属性

  • HTMLドキュメントのルート要素(最上位、頂点)。すべての要素の親要素。
  • lang属性の指定が推奨されている。(なぜなら、音声ツールの発音や翻訳ツールのルールで利用されるから。)
  • manifest属性が指定可能だが、将来的にはWebプラットフォームから削除される予定なので、使用しないことを推奨。
    • manifest属性…アプリケーションキャッシュの機能を使うときに利用するもので、キャッシュしたいファイルを記載した設定ファイルを指定する。
    • その代わりにservice workersの利用を推奨。
  • html要素内の先頭にコメントがなければ、開始タグは省略可能。
  • html要素の終了タグの直後にコメントがなければ、終了タグは省略可能。

head要素

カテゴリ:なし
コンテンツモデル:iframeのsrcdoc指定または上位プロトロコルからタイトル情報を取得できる場合は、0個以上のメタデータコンテンツ。
その他の場合は、1個以上のメタデータコンテンツで、そのうち1つはtitle要素にする。
コンテンツ属性:グローバル属性

  • メタデータコンテンツを入れる要素。
  • head要素内の先頭が要素であるか内容が空であれば、開始タグは省略可能。
  • head要素の終了タグの直後に空文字やコメントがなければ、終了タグは省略可能。

body要素

カテゴリ:セクショニング・ルート
コンテンツモデル:フローコンテンツ
コンテンツ属性:グローバル属性、onafterprint、onbeforeprint、onbeforeunload、onhashchange、onlanguagechange、onmessage、onoffline、ononline、onpagehide、onpageshow、onpopstate、onrejectionhandled、onstorage、onunhandledrejection、onunload

  • ドキュメントのコンテンツを入れる要素。
  • body要素内の内容が空ならば、開始タグは省略可能。
  • body要素内の先頭が、空文字・コメント・ meta・link・script・style・template 以外ならば、開始タグは省略可能。
  • body要素の終了タグの直後にコメントがなれけば、終了タグは省略可能。