HTML
2023.02.18(更新)
【図解あり】aタグの入れ子ルールとHTMLの入れ子ルールを覚える方法
aタグの入れ子のルールがイマイチ覚えられない？どうやったら覚えられるの？
こんなお悩みに答えていきます。
本記事の内容
- aタグの入れ子ルールの理解
- HTMLのカテゴリー&コンテンツモデルの概念の理解
本記事を対象とする方
- HTML初学者
- なんとなくaタグルールを覚えている方
- カテゴリー&コンテンツモデルを聞いたことがない方
- フロントエンドエンジニアになりたい方
この記事を書いている僕はプログラミング歴1年8ヶ月です。webエンジニアとして”社内転職”に成功しました。
カテゴリー&コンテンツモデルを理解しよう
カテゴリー&コンテンツモデルって聞いたことありますか？aタグルールを理解する上で重要な概念なので、先に説明します。
カテゴリー&コンテンツモデルとは、HTMLの各要素をカテゴリー分けして扱うために定められたルールです。現行のHTMLは、HTML Living Standardと言いまして、2021年にW3Cが正式な勧告として発表したHTML5の後継バージョンです。
今回紹介するカテゴリー&コンテンツモデルは、HTML5から取り入れられた概念となります。
まずは、カテゴリーから見ていきましょう。
カテゴリーは以下の7つに分けられていて、HTMLの各要素はいずれかのカテゴリーに属します。
- メタデータコンテンツ
- フローコンテンツ
- セクショニングコンテンツ
- ヘディングコンテンツ
- フレージングコンテンツ
- エンベッディッドコンテンツ
- インタラクティブコンテンツ
メタデータコンテンツ
タイトルやメタデータなどの文書情報等を表すコンテンツです。head要素内で使用できる要素がメタデータ・コンテンツに属します。
フローコンテンツ
body内で使用されている要素は基本的にフロー・コンテンツに属します。
セクショニングコンテンツ
文章の区分や節などの、区切りを表すコンテンツです。セクショニング・コンテンツの要素は見出し要素を中に入れますが、asideとnavに関しては性質上必ずしも見出し要素を入れなくてはいけないという決まりはありません。
ヘディングコンテンツ
見出しを表すコンテンツです。
フレージングコンテンツ
文章内で使用するコンテンツです。HTML4やXHTMLで定義されていた「インライン要素」の考え方に共通します。
エンベッディッドコンテンツ
画像や動画、音声など、文書内に埋め込みを行うコンテンツです。
インタラクティブコンテンツ
リンクやフォームなど、ユーザーが操作することできるコンテンツです。
ちょっとまだ分かりにくいと思いますが、次のコンテンツモデルを見ればだいぶ理解が進むかと思います。
コンテンツモデル
その要素をどのカテゴリーのコンテンツに入れていいかを定めたルールです。タグの入れ子ルールはこのコンテンツモデルによって決まっています。
※現在のHTMLにはこのようなカテゴリールールがあります
aタグの入れ子ルール
aタグは少し特殊なルールがあります。それは直近の親要素タグのコンテンツモデルを引き継ぐということです。
【HTML】
- <div>
- <a>
- <h1>入れ子にできる</h1>
- </a>
- </div>
- <span>
- <a>
- <h1>入れ子にできない</h1>
- </a>
- </span>
最初の例は、divのコンテンツモデルを引き継ぐので入れ子にできます。しかし、2番目の例は、spanのコンテンツモデルを引き継ぐので入れ子にできません。
divはセマンティクス的に意味を持たないタグなので、もし迷ったら一旦divを親要素にしておけば間違いではないです
aタグ以外の入れ子ルール
せっかくなので、aタグ以外の入れ子ルールについてもまとめようと思います。
と思ったのですが、ものすごいチートシートを見つけてしまったのでご紹介します。
こちらのチートシート、サイトに明記されていますが、HTML5.2までのルールとなっております。HTML Living Standardのルールは別途ご確認ください。
HTMLの学習 ステップアップための書籍紹介
最後にHTMLのスキルをステップアップさせるための書籍を紹介します。
この本は英文のHTML仕様書を優しく噛み砕いた内容となっており、HTMLで使用される各要素のセマンティクスはもちろんのことアクセシビリティについて学ぶことができます。僕はドットインストールでHTMLの学習をスタートし、その後「模写」したり、実際にWebサイトを制作したりしてHTMLに触れてきました。単純に画面に表示できればサイトが完成するわけではなく、セマンティクスを踏まえると、使用するタグの意味合いを意識せざるを得ません。その点において、ドットインストールで学習した内容だけでは全く物足りませんでした。
本書は著者が言うように、「HTMLの学習をステップアップするための書籍がなかなかお目にかかれない」という問題を解決しており、HTMLの扱いに慣れてきた初学者向けの内容となっております。
僕の経験から言うと、HTMLの最初の入り口としては向いてないです。どちらかというと基礎を終えた初学者が、次にステップアップするのに適している本だからです。逆に言うとステップアップを目的とするならば、必読の書と言えると思います。
まとめ
今回はHTMLのカテゴリー&コンテンツモデルおよび入れ子ルールについて解説しました。最後までお読み頂きありがとうございました。
現行のHTMLにはタグ分けするカテゴリーがある
一定のルールが決められたコンテンツモデルに沿ってタグを分ける
入れ子のルールはコンテンツモデルによって決まる
