HTML基礎 コンテンツモデルについて理解しよう 2025 11/25 HTML基礎 </noscript><iframe data-src="https://player.vimeo.com/video/677157674?h=1d50981c2a" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > sectionとdivの使い分けで悩まれる方が多いです。シンプルにお伝えすると、・見出しのあるコンテンツは、sectionでくくる・見出しのないコンテンツは、divでくくるこのようにしておくと、使い分けも簡単ですね！参考：https://jam25.jp/html/how-to-sectioningtag/ ◎セクショニングコンテツのチートシートhttps://htmlls.docs-share.com/https://webgoto.net/html5/ コンテンツモデルのドキュメントhttps://developer.mozilla.org/ja/docs/Web/HTML/Content_categories 記事の内容コンテンツモデルのNGパターンを覚えておこう！ </noscript><iframe data-src="https://player.vimeo.com/video/839428098?h=076f2a7bdd" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > 動画内のチートシートのサイトhttps://webgoto.net/html5/ 入れ子の関係で覚えてほしいこと 親要素⇒子要素について覚えておきましょう。他にも、祖先要素・子孫要素・兄弟要素があります。 <html lang="ja"> --祖先要素 <head> <meta charset="UTF-8"> <title>HTML講座</title> <meta name="description" content="サイトの説明が入る"> </head> <body> --祖先要素 <h1>タイトル</h1> --兄弟要素 <p>段落が入ります</p> --兄弟要素 <dl> 👈ここを基準に <dt>説明タイトル</dt> --子要素 <dd><p>説明の内容がはいります</p></dd> --子要素 </dl> </body> </html> 講座を完了したらクリックしてね！ レッスン完了 次のページへ HTML基礎