1:ID:zt5lF5 1週間前

#質問 見出しタグとそれにかかるsection要素(若しくはdiv要素)の質問です。
見出しタグとその直下の要素はどこからどこまでを対象として「かかる」のでしょうか。
SEOではh1~h5までの順番を遵守することについてはあちこちの解説サイトで説明されていますが、ではその見出しタグはどこからどこまで、どのようにして「かかる」のかについては説明がほとんどなく、順番が重視されていて適切な方法が述べられていないのでわからなくなってしまいました。極端な話、ファーストビューのヘッダーにh1タグ(企業名など)の前後にロゴ+α(ソーシャルボタンなど)が入るだけのデザインもあったりするので…
ケースバイケースで正解はないと思いますが以下のような書き方の場合、どちらが正しいのか(若しくは主流なのか、それともまったく違うやり方があるのか)、どのように「かかる」のかについてご指導いただければと思います。

<h2>大見出し</h2>
<h3>見出し</h3>
<section class="sect_drink">(内容略)</section>
<h3>見出し</h3>
<section class="sect_food">(内容略)</section>

<h2>大見出し</h2>
<section class="sect_drink">
<h3>見出し</h3>
(内容略)
</section>
<section class="sect_food">
<h3>見出し</h3>
(内容略)
</section>

6 件のコメント

2:ID:cdIRMG 1週間前
かかるって囲うってこと?
sectionって文章のひとまとまりを示すマークアップですよね。
H3の内容がsect_drink内にかかわるものならsect_drink内に書くのが正しいのでは。
そういう意味では、h2の大見出しがヘッダーであれば<section class="header">や<header>だ囲うのがマークアップとして正しいのではないでしょうか。
3:ID: 1週間前
Re:2
かかるというのは「見出しタグの対象となる要素」と表現すべきでした。誤解招く表現で申し訳ありませんorz
当初は<h>要素を置いた直後の要素から次の<h>要素までが対象になるのだろうと思っていたのですが、そこに階層が関わってきたり、ブログサイトなどで前者のコードのように見出しタグが連続で(もしくは連番で)続いていることもあるので、本当に適切にかかっているのか違和感を覚えたのです。そしてこの認識も果たして正しいのだろうかと疑心暗鬼に陥ってしまって…

ご教示頂いた内容としては下記のようになるのでしょうか。

<header><h2>大見出し</h2></header>
<section class="sect_drink">
<h3>見出し</h3>
(内容)
</section>
<section class="sect_food">
(以下略)
</section>

ただ下記の書き方もアリなのかな?と思ってしまうので…

<h2>大見出し</h2>
<article class="art_box1">
<h3>見出し</h3>
<section class="sect_drink">
(内容)
</section>
<h3>見出し</h3>
<section class="sect_food">
(内容)
</section>
</article>
4:ID:teyjHi 1週間前
Re:3
https://gsnedders.html5.org/outliner/

ここで見てみればわかりやすいよ
5:ID: 1週間前
Re:4
なるほどありがとうございます。
過去に製作していたサイトでは前者の書き方も後者の書き方もしていたので両方たしかめてみましたが、どちらも望んだかたちで階層化(順番通りに見出しタグが設置)されていました。

正しい間違いの「べき論」に嵌っていますが、もしかして「かかる」という考えが間違っていて、実はただ設置しているだけということなのでしょうか?若しくは順番通りに設置していれば階層構造は二の次であってブラウザやクローラーが識別してくれるので気にしなくてもよかったりする・・・のでしょうか?
6:ID:Jus45I 1週間前
webに限った話ではないけれど、文章の構造化をアウトラインと呼びます。
また、これもwebに限った話ではないけれど、文章構造は、単語、文節、段落、セクション、改ページの順で構成することができます。その中で、htmlにおける見出しタグ(heading tag)の影響範囲は、セクションによって定義されます。つまり、htmlにおける見出しタグの影響範囲を知るには、セクションが何によって区切られるかに注目すればよいわけです。

(x)html4以前では、セクションは見出しタグでのみ定義されたため、見出しタグを厳密な順序で記述する必要がありましたが、html5からはsectionタグなど特定のタグでも定義できるようになりました。これによって、結果としてhtml5ではすべてh1タグで定義してもアウトラインに矛盾の起きない構成にもできますし、セクションを定義するタグを理解せずにむやみに使うと、見出しのないセクションが発生してしまいます。

また、すでに例に挙がったようなアウトラインを確認するサービスもいくつかありますが、ブラウザから確認できるアドオン・エクステンションもあります。
chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja

これらの情報をwebで集めるのもよいですが、文書構成やhtml5などの専門的な書籍を購入して、学問的に学ばっることを(個人的に)おすすめします。手っ取り早くwebで概要を知るには、「html セクショニング」というキワードを用いるとよいでしょう。

以上、biztterの禁止ワードに萎えるテストでした。
7:ID: 1週間前
Re:6
なるほどありがとうございます。最新情報はWEBからのほうが圧倒的ですが、周回遅れながらもそれらの情報を編纂して体系的にまとめた書籍のほうが今の自分にとって得られるものが大きそうです。
未だに(x)html4(ときどきhtml5)をメインにした仕事なので、この辺りの情報の齟齬に不安を覚えていたのでいま一度基礎に立ち返ってみたいと思います。ありがとうございます。
コメントの受付は終了しました。

一緒に読まれているつぶやき

ページ上部に戻る