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

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

HTML5のセクション~セクション関連のタグ~

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

セクション関連

以下のタグをセクショニングコンテンツ内で使用した場合、それらのセクション内の情報として認識され、
セクショニングコンテンツがないところで使用した場合、ドキュメント全体の情報として認識される。

h1 h2 h3 h4 h5 h6要素(ヘッディング要素)

それぞれのセクションの見出しを表す。
最上位の見出しはh1で最下位の見出しはh6となる。
見出しを使用してドキュメントのアウトラインを生成する。

セクショニングコンテンツのないヘッディング要素があった場合、暗黙のセクションが生成される。
セクショニングコンテンツ内にある最初のヘッディング要素は、そのセクションの見出しとなる。
2つ目以降のヘッディング要素が1つ目のヘッディング要素と同じか上位ランクのヘッディング要素ならば、新しい暗黙のセクションが生成される。
2つ目以降のヘッディング要素が1つ目のヘッディング要素より下位ランクのヘッディング要素ならば、暗黙のサブセクションが生成される。
2つ目以降のヘッディング要素がセクショニングコンテンツに囲われていたら、ランクに関係なくサブセクションとなる。

セクショニングルート内にある最初のヘッディング要素は、そのセクショニングルートの見出しとなる。

<body>
<h1>body要素の見出しh1</h1>
<section>
    <h2>body要素の1つ目のサブセクションの見出しh2</h2>
    <p>もじゃもじゃもあじゃもじゃ</p>
</section>
<section>
    <h2>body要素の2つ目のサブセクションの見出しh2</h2>
    <p>あばばばばばばばば</p>
</section>
<blockquote>
    <h2>blockquote要素(body要素からは独立して)の見出しh2※body要素のアウトラインには影響しない</h2>
</blockquote>
</body>

カテゴリ
・フローコンテンツ
・ヘッディングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

header要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのヘッダー情報を表す。

<body>
    <header>body要素のヘッダー情報だよ</header>
    <article>
        <header>article要素のヘッダー情報だよ</header>
    </article>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

fotter要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのフッター情報を表す。
著者や関連文書へのリンク、著作権データなどのセクションに関する情報や、
付録、索引、ライセンス情報などのドキュメント全体の情報をマークアップすることもできる。

<body>
・・・・・・・省略
    <article>
        <fotter>article要素のフッター情報だよ</fotter>
    </article>
    <fotter>body要素のフッター情報だよ</fotter>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

HTML5のセクション~セクショニングコンテンツのタグ~

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

セクショニングコンテンツのタグ

article要素

<article>
    <header>
        <h2>記事のタイトルだよん</h2>
     </header>
     <p>記事の内容だよんだよんだよん</p>
</article>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
 

  • 雑誌、新聞、技術または学術論文、エッセイまたはレポート、ブログ、または他のソーシャルメディアの投稿のようなそれだけで完結しているコンテンツをマークアップする。

section要素

<section>
    <h2>りんご</h2>
    <p>りんごは美味しいよねーー!!</p>
</section>
<section>
    <h2>いちご</h2>
    <p>いちごは美味しいよねーー!!</p>
</section>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
 

  • ドキュメントやアプリケーションの一般的なセクションのコンテンツをマークアップする。
  • 完結型のコンテンツはarticle要素でマークアップすることが推奨されている。
  • それぞれのセクションは、section要素の子要素としてヘッディング要素含めて識別すべきである。

nav要素

<nav>
    <ul>
        <li><a href="/">TOP</a></li>
        <li><a href="/page1/">page1</a></li>
        <li><a href="/page2/">page2</a></li>
    </ul>
</nav>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
 

  • 外部ページへのリンクやナビゲーションのコンテンツをマークアップする。

aside要素

<aside>
    <h2>広告とか</h2>
    <p>広告の内容だよん</p>
</aside>

カテゴリ
・セクショニングコンテンツ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・main要素を除いたフローコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所
 

  • 関連情報やメインコンテンツから分離させたいコンテンツをマークアップする。
  • 本文からの抜粋を使ったリード文やサイドバー、広告、nav要素のグループなどに使うことができる。

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要素は別のところで記載。

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要素の子要素として記述。またはフレージングコンテンツを配置できる場所に記述。
  • 他リソースを記述。


続きは次回の記事で。

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要素の終了タグの直後にコメントがなれけば、終了タグは省略可能。

HTML5の基礎知識~グローバル属性~

素人が書く備忘録(基本的にはHTML5.2を元に記載。

グローバル属性

すべての要素に共通で指定できる属性。

accesskey
要素を実行またはフォーカスを当てるキーボードショートカットを指定する。印刷可能な文字を1つ指定可能。
class
クラス名を指定。要素が属する種類を表すトークンを設定する。スペース区切りで複数指定可。
contenteditable
trueまたは空文字ならば要素の編集が可能、falseならば編集不可能。(列挙型属性)
dir
要素のテキストの方向を指定。ltrは左から右、rtlは右から左、autoは自動判別。(列挙型属性)※autoは本当に不明な場合にのみ使用することを推奨。
draggable
要素がドラッグ可能かどうかを指定。trueはドラッグ可能、falseはドラッグ不可能。(列挙型属性)
hidden
現在の状態に直接関連がない、または、存在しないもの、または、ページの他の部分でコンテンツが再利用されることを宣言するために指定。(論理属性)
id
要素の一意の識別子を指定。空白文字は使用できず1文字以上指定する必要がある。
lang
要素の言語の種類を指定。有効なBCP 47言語タグまたは空文字列を指定。
spellcheck
スペルチェックの有効無効を指定。trueは有効、falseは無効。(列挙型属性)
style
インラインのスタイルの指定。
tabindex
Tabキーによる選択順序を指定。
title
補助的な情報を指定。
translate
翻訳を可能か不可能かを指定。trueは翻訳可能、falseは翻訳不可能。(列挙型属性)

参照元
https://www.w3.org/TR/html52/dom.html#global-attributes

HTML5の基礎知識~コンテンツモデル(その他のカテゴリー)~

素人が書く備忘録
HTML5のカテゴリとコンテンツモデルについて(基本的にはHTML5.2を元に記載。)

以下の前回記載したコンテンツモデルで定義されている7つのメインカテゴリのほかにも、
その他のカテゴリーがある。
chooringo.hatenablog.com

その他のカテゴリー

パルパブルコンテンツ(Palpable content)

基本的には、コンテンツモデルがフローコンテンツまたはフレージングコンテンツの要素は、
hidden属性を含まない要素を1つ以上含む必要がある。
ただし、スクリプト等で後から内容が挿入される場合もあり、その場合は空でもOKなのでそこまで厳しい条件ではない。

a、abbr、address、article、aside、audio(controls属性が指定されている時)、b、bdi、bdo、blockquote、button、canvas、cite、code、data、details、dfn、div、dl(子要素に1つ以上のname-valueグループが含まれている時)、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、i、iframe、img、input(typeがhidden以外の時)、ins、kbd、label、main、map、mark、math、meter、nav、object、ol(子要素に1つ以上のli要素が含まれている時)、output、p、pre、progress、q、ruby、s、samp、section、select、small、span、strong、sub、sup、svg、table、textarea、time、u、ul(子要素に1つ以上のli要素が含まれている時)、var、video、要素間がスペースでない文字列

  

スクリプトサポート要素(Script-supporting elements)

それ自体は表示されないが、ユーザに機能を提供する。

 script、template

  

トランスペアレントコンテンツモデル(Transparent content models)

透過的な要素。これに属する要素のコンテンツモデルは、親要素と同じになる。
つまり、親要素と同じ要素を内包することができる。

a、ins、del、object、audio、video、canvas、map、noscript

  

セクショニング・ルート

独立したアウトラインを持ち、親要素のアウトラインには影響を与えない。

blockquote、body、details、dialog、fieldset、figure、td