60931


毎度初歩的な質問で失礼します。

タイトルの通り、divとsectionとarticleの違いってなんでしょうか？  
いろいろググりましたが、とても曖昧にしか理解できずにいます。

divの中にsectionとarticleがある。  
sectionは前後関係を必要とする要素で  
articleは独自に成立する要素。

とざっくりそんな風に理解しています。

コードを書くときは

[code]

    <div>
      <section>...</section>
    </div>
    
[/code]

または

[code]

    <div>
      <article>...</article>
    </div>
    
[/code]

のどちらかを要素の種類によって使い分けたらいいのかな？と今のところ認識しています。

基本的なことから教えていただけるとありがたく思います。


CC BY-SA 4.0
2019-11-28T23:28:41.800
60930
2019-11-29T13:34:30.700
2019-11-29T00:02:24.873
3060
36630
question
html5
divタグとsectionタグとarticleタグの違いって何でしょう？


`<section>` は章や節、項などの分け方で例えばこの様な感じで使用します、区切りとして使用します。

[code]

    <div>
      <section>
        <h4>記事一覧(章)</h4>
        <section>
          <h5>美味しいメモリー(節)</h5>
        </section>
        <section>
          <h5>オススメCPU(節)</h5>
        </section>
      </section>
    <div>
[/code]

`<article>` の方はその区切りだけで記事としてわかるかどうかです、使う際はタイトルを忘れないで使用してください。

[code]

    .width {
      width: 80px;
      height: 20px;
    }
[/code]

[code]

    <div>
       <article>
        <section>
          <h4>美味しいメモリー(節)</h4>
          <textarea　class="width">
            一番美味しいのはDDR4です
            理由は一番速度が早いから
            
            逆に美味しくないのはDDR1です
            あまり食べたくありません
          </textarea>
        </section>
      </article>
    <div>
[/code]

使う違いはこの様に分かれています。

他には以下の記事が参考になると思います。

[HTML5のお勉強 articleとsectionとか -
Qiita](https://qiita.com/piotzkhider/items/faffbc4a107e7e495998)


CC BY-SA 4.0
2019-11-29T00:37:13.023
60931
2019-11-29T13:34:30.700
2019-11-29T13:34:30.700
32986
35461
60930
answer


仕事や日常的にWebを触っている訳ではないので、資料上の話になりますが、divは特には意味を持たない区切り/区分/かたまりで、使う人が意味や使い方を自由に設定できるもの。section,articleは文書の要素として意味を持たせてあり、推奨される使い方があります。

昔はsection,articleといったものが無かったので、何でもdivで囲んでいたようですが、今は新しい定義が増えてだいぶ時間も経過しているので、それらの意味のある要素に合う内容についてまでdivは使わない方が良いようです。

特に質問記事のようにarticle,sectionとほぼ同じ区切りで単に二重に囲んだだけに見える方法では。

@su3158さん回答のように複数の要素をまとめて扱うとか、あるいは1つの要素の中の特定の部分だけを特別に扱いたい(けれど相応しいタグが無い)とかの場合に使うのだと思われます。

MDNのdivの項目にこんな記述があります。  
[<div>: コンテンツ分割要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)

> 使用上の注意  
>  `<div>`要素は、他に適切な意味的要素（`<article>`や`<nav>`など）がない場合に限り使用してください。

このdivのページの冒頭の定義は以下になります。

> HTML の コンテンツ分割要素 (`<div>`) は、フローコンテンツの汎用コンテナーです。 CSS
> を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。
>
>
> `<div>`要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、`class`や`id`を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を
> (`lang`属性を使用して) 示したりするために使用します。

articleやsectionの記事はこちら。

[<article>:
記事コンテンツ要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/article)

> HTML の`<article>`要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で)
> 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます。
>
>
> ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は`<article>`要素に含まれ、おそらくその中に1つ以上の`<section>`があります。

[<section>:
汎用セクション要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/section)

> HTML の`<section>`要素は、 HTML 文書の中で単独のセクション (区間)
> を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。
>
>
> 例えば、ナビゲーションメニューは`<nav>`要素で表しますが、検索結果の一覧や地図の表示やコントロールには具体的な要素がないので、`<section>`の中に入れることができます。

他にはこんな記事が参考になるのでは？  
[【HTML5入門】どのサイトでも使われている！ページ構造を作る7つのタグ](https://jam25.jp/html/html-lesson-06/)


CC BY-SA 4.0
2019-11-29T02:50:29.727
60937
2019-11-29T02:50:29.727
2020-06-17T08:14:45.997
-1
26370
60930
answer