HTML5のsectionなどへのclass付与、スタイリングについて

HTML5から導入されたsectionタグって、基本的には「スタイリングのために用いない」がルールだと思うのですが、この「スタイリングのため」というのがいまだによくわかりません。

たとえば私はこういうhtmlで、横並びにしたい場合sectionにclassを振るの間違っていると思っていました。

html5
1<section>
2<h2>見出し1</h2>
3<p>テスト記事1</p>
4</section>
5<section>
6<h2>見出し2</h2>
7<p>テスト記事2</p>
8</section>

そのような場合はこういう風にdivで囲ってそちらにclassを付けます。

html5
1
2<div class="test">
3<section>
4<h2>見出し1</h2>
5<p>テスト記事1</p>
6</section>
7</div>
8<div class="test">
9<section>
10<h2>見出し2</h2>
11<p>テスト記事2</p>
12</section>
13</div>

これはこれで間違えでは無いのですが、煩雑になるため<section class="test">としたいなと思っています。
実際そういうサイトも多いです。

で、調べるのですが、「スタイリングのためにclassを付けるのはだめ！！！classを振るのは間違い！」派と「スタイリングのためって言うのは、空sectionとかそういう関係ない所に見た目だけのために使うのがだめなのであって文章構造があっているところへのスタイリング（今回で言う横並びにさせる）はOK！
という意見が二分している気がしました。

実際私は前者なのですが、これってどうなのでしょうか？
もちろん、管理のためだったらdivでラッパーした方が楽、とかそういうのはあるのですが、そうじゃなくてhtml5の仕様上どうなのか、というお話です。

是非皆さんの意見をお聞かせいただけないでしょうか？

think49

2021/02/23 07:12

> sectionタグって、基本的には「スタイリングのために用いない」がルールだと思うのですが初耳です。そう判断した情報源を引用してもらえませんか。

think49

2021/02/23 08:04

> html5の仕様上どうなのか、というお話です。ということは、仕様を読んだのでしょうか。

ousia

2021/02/23 08:08

わからないから「仕様上どうなのか」と聞いているのですが・・・

ousia

2021/02/23 08:10

あと、初耳ということですが、常識では？ http://xn--lcki7of.jp/1558/ https://www.mdn.co.jp/di/contents/4040/50876/ いくらでも出てきます。この解釈について質問しているので・・・

ousia

2021/02/23 08:12

「スタイリング」が何を指すのか、という質問をしているので、その認識が無いなら回答されない方がいいと思います。

think49

2021/02/23 08:45

マウントをとられても困るのですが、「仕様を知りたいなら仕様書をあたる」のは至極当然の発想で「html 仕様」で検索すれば仕様書が見つかります。私の回答にも書きました。二次情報よりも仕様書をあたるべきでしょう。 > あと、初耳ということですが、常識では？「常識」ではなく、情報ソースが信頼に値するかで私は判断します。信頼性でいえば、仕様書が最上位です。

行動規範の内容に同意します

回答2件

MDNには下記注意書きがありました。

<section> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは <div> の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください。

｢スタイル付けのみ｣でないなら問題ないと思います。

投稿2021/02/23 07:12

meg_

総合スコア10755

ousia

2021/02/23 08:14

なるほどです。ありがとうございます。

行動規範の内容に同意します

section要素

4.3.3 section要素 - HTML Standard 日本語訳

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。

...中略...

Note: 要素のコンテンツを配給することが理にかなう場合、著者はsection要素の代わりにarticle要素を使用するよう推奨される。

Note: section要素は包括的なコンテナ要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section要素が適切であるというのが一般的なルールである。