セクションをdivで囲むと見出しのランクは下がるの

締切済

質問者：satsumaimoboy
質問日時：2013/07/03 21:48
回答数：1件

例えば
<body>

<header>
<h1>サイトタイトル</h1>
</header>

<section>
<h2>ページタイトル</h2>
</section>

</body>

をdivで囲むと

<body>

<div>
<header>
<h2>サイトタイトル</h2>
</header>

<section>
<h3>ページタイトル</h3>
</section>
</div>

</body>

に書き換えるべきですか？
それともdivで囲んでもdivが存在しないものとして振舞いますか？

ちなみにスタイルシートを無効にして実際に書き換えずにやってみるとh1の大きさが変わりませんでした
やっぱり書き換えなくてもいいんでしょうか？
ご回答よろしくおねがいします

ここから下は関係ないですけど
html5とcssってホントにややこしいですね。見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうｋど)、cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので結局シマンティックセクションとか関係なくdivで囲まざるを得ない。html5のセクションはユーザーじゃなくてロボットに対して役に立つもの
なんでもっと柔軟に直感的なレイアウトができるようにしなかったんでしょうね？
じゃあhtml4使えよってのはなしで
あとjavascriptで各セクションの高さを取得して足し合わせたものを左サイドバーの高さに代入してレイアウトを綺麗にするのとかもどれか1つのセクションにposition:absoluteがあるとおかしくなるしブラウザによってはいけたりするし本当に頭がおかしい

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2013/07/03 23:35

＞ここから下は関係ないですけど

　のほうが重要で、それがわかると、その前の質問の答えが見えてくるでしょう。
＞じゃあhtml4使えよってのはなしで
　HTML4.01を復習されることを強く勧めます。HTML5はHTML4.01の反省の元で作られたのですら・・。
　実はHTML4.01にも随所にHTML5とまったく同じことが書かれています。
A) 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
B) DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
C) スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　など、特にDIVやSPANは文書構造を補完するために使用し、その文書構造を元にスタイルシートでプレゼンテーションを指定していく・・・ということ。
　HTML4.01には、文書構造を補完するためにDIVを使わざるを得ませんでした。すなわち
<body>
　<div class="header">
　　<h1>見出し</h1>
　　<div class="nav">
　　</div>
　</div>
　<div class="section">
　　<h2>本文見出し</h2>
　　<p>・・・・</p>
　　<div class="section">
　　</div>
　　<div class="aside">
　　</div>
　</div>
　<div class="footer">
　</div>
</body>
　のようにマークアップしろと書かれています。上記(B)に!!明確に!!
　しかしながら、現実には理解できる人は少なく、相変わらず形は変わっても(C)で例示されているのと、内容的には変わらない使われ方がされてきました。
<div class="content">
　<div id="leftMenue">
とかね。HTMLをデザイン(プレゼンテーション)のためのものと思われてきたのが最大の原因だと思います。
　その反省から「HTML5 では、文書をよりよく構造化するために、・・・要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
　そのため、上記は
<body>
　<header>
　　<h1>見出し</h1>
　　<nav>
　　</nav>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<p>・・・・</p>
　　<section>
　　</sectin>
　　<aside>
　　</aside>
　</section>
　<footer>
　</footer>
</body>
　と書けるようになりました。これは、著者にとってもとってもメンテナンスが容易になり、スタイルシートもずっと簡単に書けるようになりました。

★最初の質問
　HTML5では、DIVは安易に使えません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )］より
　---著者は、 div 要素を、他により適切な要素がないときなど、最後の最後手段として使用することを強く推奨します。DIVでないより適切な要素を使うことは、読者にとってはアクセシビリティ向上に、ウェブ制作者にとってはメンテナンス性の向上につながる。---

　もし、質問に書かれた場面で使うなら、<article></article>(header,section,fooerをもつであろう完結した記事を示す)で囲うべきです。
　
Q＞それともdivで囲んでもdivが存在しないものとして振舞いますか？
　『DIV要素とSPAN要素は、・・・【中略】・・・他のプレゼンテーション的語彙を示すことはない。 ( HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) 』

Q＞セクションをdivで囲むと見出しのランクは下がるの
　HTML5でsectionは、文書のアウトライン(階層)を示すために使われますから、sectionの階層で見出しレベルを知ることが出来ます。
html
└body
　　├ header
　　├ section
　　│　├ h1 または h2
　　│　└ section
　　│　　　├ h1 または h3
　　｜　　　└section
　　│　　　　　├ h1 または h4
　　├ section
　　　　　├ h1 または h2

　そのために、h1⇒h6で階層を示す必要がなくなったために
・sectionでアウトラインを示し、すべてh1を使う
・sectionと見出しのレベルを併用する。
　のいずれかに統一することになります。示されたような書き方は間違いです。

　この文書構造を利用してスタイルシートが書けますから
section{margin-left:1em;font-size:0.9em;}
section h1,section h2,section h3,section h4,section h5,section h6{font-size:1.2em;}
だけで、視覚系ブラウザには、階層を明示して表示されます。

＞見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうｋど)、
　それは、あくまで視覚系ブラウザだけですよ。HTMLは、『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。以下略・・・( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

★HTMLはデザインのためではなく、様々なユーザーエージェント(検索エンジンも含む)のために、また再利用のために文書構造をマークアップする言語
★スタイルシートは、その文書構造を利用してプレゼンテーションを指定するもの
　このふたつを明確に区別し活用してください。

＞cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので
　HTMLやCSSに対して誤解されていること、よくご存じないことがそのような感想になるのだと思います。決してそんなことはありません。従来は、視覚系ブラウザのために、本文とは関係のないナビゲーションをページの最初に書く必要がありましたが、absoluteがあるために、footerに書いたナビゲーションをページトップに表示できるようになりました。

★HTML4.01の仕様書はHTML5のそれの十数分の一しかありません。一度全文に目を通して置かれることをお勧めします。
★CSSも古い仕様ですが、CSS2の邦訳があります。これもよく読むこと
　たぶん、誤解が解消されると思います。
　