【HTML入門】#05. 要素の配置ルールとカテゴリー

チャンネル名:CreatorQuest
◆概要(引用)
本気で学ぶHTML入門講座5回目は、
要素の配置ルールとカテゴリーについてです。

今回は、記述の演習はないです。
時間がある時にさらっと聞いておいてください。

■目次
・概要と目標 0:22
・要素の配置ルール 1:44
・要素のカテゴリー 2:53
・練習問題 7:55
・解答 8:51
・まとめ 14:43

■配置ルール
HTMLの各要素、自身の中に配置できる要素が決まっています。

HTML5では各要素にコンテンツモデルという名前で、
中に入れれる要素が定義されています。

例えばp要素のコンテンツ・モデルは、
フレージング・コンテンツです。

つまり、p要素の中に入れれる要素は
フレージング・コンテンツのカテゴリに属している
要素のみ配置することができます。

ただ、コンテンツ・モデルはカテゴリばかりじゃないです。
・何も入れれない
・要素が限定されている
・親要素のコンテンツモデルを引き継ぐ
などの例外もあります。

従来(HTML4.01やXHTML1.0)の配置ルール
・ブロックレベル要素の中にはブロックレベル要素や
 インライン要素を入れれる。
・インライン要素にはインライン要素は入れれるが、
 ブロックレベル要素は入れれない。

*一部例外はあります。

○コンテンツ・モデルを調べれるサイト
・W3C HTML5
https://www.w3.org/TR/html5/

・CreatorQuest – HTML要素リファレンス
https://creatorquest.jp/reference/html/element/

■要素のカテゴリー
HTMLの要素は複数のカテゴリに分類されます。
HTML5では以下のカテゴリに分類されます。
・メタデータ・コンテンツ
・フロー・コンテンツ
・セクショニング・コンテンツ
・フレージング・コンテンツ
・エンベッデッド・コンテンツ
・インタラクティブ・コンテンツ

従来(HTML4.01やXHTML1.0)は以下の
カテゴリに分類でされています。
・ブロックレベル要素
・インライン要素
・その他の要素

これらのカテゴリーは要素の配置ルールに使われます。

・CreatorQuest – 要素のカテゴリー
https://creatorquest.jp/reference/html/categories/

■HTML入門講座のHTMLのバージョン
基本的には、HTML 5に対応したレッスンです。
ただし、HTML5.1、XHTML1.0、HTML4.01
に対する補足説明も出来る限り行います。

■本気で学ぶ!HTML入門講座
https://www.youtube.com/playlist?list=PLxmhLTDswFUwaX8i9hAf1Pspo–GswmD1

素材
・CV:さとうささら(CeVIO)
http://cevio.jp/
・CV:タカハシ(CeVIO)
http://cevio.jp/
・BGM:甘茶の音楽工房

コメント

タイトルとURLをコピーしました