Web制作を学ぶ

クリエイター・プログラマーを目指している人のためのメディアくりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア

2021.10.19更新

間違えやすいHTML5の要素とコンテンツモデル、トランスペアレントについて

間違えやすいHTML5の要素とコンテンツモデル、トランスペアレントについて

HTML5を学ぶ上で間違えやすい内容だったり、コンテンツモデルやトランスペアレントといった、少し難解なお話をご紹介しています。
最初はあまり意識しなくてもいいのですが、いずれ理解する必要が出てきます。

学習がある程度進んだ今、いったん内容を確認しておきましょう。

間違えやすいHTML5をまとめて学ぶ

HTML5を正しく理解する必要性を理解したところで、少しでも理解を深めるために、間違えやすいポイントをまとめてみました。

主要なタグを一通り学んだあとに、確認してみてください。

h11ページ内に一つにすることが望ましい。決まりではないが、SEO的にも有効である場合がある。
articleそれだけで完結している記事なので、記事の一部を囲むことはできない
asidemain要素を含むことはできない
navmain要素を含むことはできない
header、footermain要素を含むことはできない。またセクショニングコンテンツの内部に配置されていないheader要素とfooter要素は含むことができない。
ul、ol0個以上のli要素を入れられるので、li要素が0個でも(なくても)よい

HTML5のカテゴリーとブロックレベル要素、インライン要素について

現在のHTML5では、7つのカテゴリーで分類されています。
それぞれ7つのどれかに属する、というわけではなく、要素によっては、このカテゴリーでもあり、別のカテゴリーでもある、といったように、かなり複雑な定義がされています。

ですが、正確にこの7つを今すぐに覚える必要はありません。
タグを学んでいくうちに、自然と覚えることができます。

ここではもっと大まかなグループに分けて理解できるようにしていただくといいと思います。
それはHTML5よりも以前に考えられていた定義です。

HTML5よりも前は、XHTMLやHTML4.01という記述法で、HTMLファイルは作られていました。
この時代は、要素は大きく「ブロックレベル要素」「インライン要素」の2種類に分けて考えられていました。

インライン要素」は、文章の一部分として扱われるものです。span要素などがインライン要素とし以て分類されています。

そして「インライン要素」などと文章がまとまったかたまりを「ブロックレベル要素」と扱われていました。

「インライン要素」は、その前後で自動的に改行されません。ブロックレベル要素は、前後で自動的に改行されます。
改行されるかどうか、で見分けることが可能です。

「ブロックレベル要素」の中に「インライン要素」を含めることは可能ですが、その逆は不可能です。「インライン要素」などの文章の一部の集まりが「ブロックレベル要素」として扱われるからです。文章の一部の中に文章のかたまりが入るのはおかしい、ということです。

「ブロックレベル要素」「インラインレベル要素」の分類法はHTML5ではなくなりましたが、この考え方でコーディングしても、相違がないように定義されています。
なので今でも、この分類を考えながら、コーディングして差し支えありません。

また、CSSの一部では、「ブロックレベル要素」「インラインレベル要素」の考え方が必要なこともあり、現在でもこの分類を意識することは多いです。

ただし、大きく変更された点もあります。
以前はbody要素の直下に配置できるのは「ブロックレベル要素」だけでした。
しかし、現在のHTML5の仕様では「インライン要素」として扱われていたタグも、body直下に配置できるようになっています。

コンテンツモデルとトランスペアレント

ある要素のすぐ直下に配置される別の要素のことを、子要素と呼んでいます。

そして、ある要素の子要素として入れることができるコンテンツが、要素ごとに決められています。
それをコンテンツモデル
と呼んでいます。

コンテンツモデルはとても細かく、すべてを網羅するのはなかなか大変です。
先ほどのブロックレベル要素とインライン要素の分類でコーディングを進めていきましょう。

そして今後の記事で改めてご紹介するW3CのMarkup Validation Serviceを使って、間違いがないかを確認し、エラーが出てきた場合にコンテンツモデルを確認する、という流れで作業を進めます。

さらに、HTML5では親要素のコンテンツモデルをそのまま継承する特別な要素が定義されています。親要素のコンテンツモデルを、自分自身のコンテンツモデルとしてしまう要素です。
この要素をトランスペアレントと呼んでいます。
トランスペアレントの代表格としてはa要素があります。

例えば、以前であればdiv要素で囲まれている部分全体をa要素で囲んでリンクを作るようなことはできませんでした。div要素はブロックレベル要素、a要素はインライン要素だからです。

しかし、HTML5ではa要素はトランスペアレントとして扱われるので、a要素の親要素がdiv要素を囲むことができるのであれば、div要素を囲むことは可能です。

以下のソースの場合、article要素はdiv要素を囲むことは可能なので、a要素でも囲むことは可能です。
article要素のコンテンツモデルをa要素が継承している(a要素が自分自身のコンテンツモデルとしている)ことになります。

HTML5の内容の中でも、少し難しいお話をご紹介しました。
完全に理解するには時間がかかるものもありますが、少しずつ学んで正しいコーディングを行いましょう。