デザイナーから受け取ったpsdデータをコーディングしているのですが
<section>
<h1>見出し</h1>
<p>キャッチコピー</p>
<section><!-- 2-1 -->
<!-- ここに見出しが無い -->
<p>概要</p>
<section>
<hn>2-2内h3と同じデザイン・同レベルにあるだろう内容</hn>
<p>内容</p>
</section>
</section>
<section><!-- 2-2 -->
<h2>見出し</h2>
<p>概要</p>
<section>
<h3>見出し</h3>
<p>内容</p>
</section>
</section>
</section>
こういった階層になってしまうデザインが多く、<hn>の部分で悩むことが多々あります。
この場合2-1の<section>は<div>にして<hn>は<h2>とするべきなのか、
<!-- ここに見出しが無い -->の部分にそれらしい内容で<h2>を挿入しcssで消すなどするべきなのか、ご教授願います。
みんなの回答 4 件
これ滅茶苦茶あるあるだなぁ。自分も良く陥ります。
基本的には、コンテンツの組み立てやデザインに問題がある時によくなります。
で対応してますが、時と場合で私も迷ってます。
他の人はどうしているんだろうか。
>それらしい内容で<h2>を挿入しcssで消す
こっちで良いんじゃないですか？
要はデザイン的な要素を全て排除して文字だけになった時、
人が理解しやすいのが良いのではないでしょうか？
つまるところ、HTMLの論理構造の重要性を理解している人が社にいないってことですね。いや、トピ主だけってことか。
会社が悪いとも言ってられないので、そこはトピ主が見出しをを整える役を担うしかないんじゃないかな。時間があるときにでも、その重要性を会議して、役を決めたらいいよ。コーダーがやってもいいけど、どちらかといえば、もっと上流のお仕事だね。
HTML5でなぜhタグに悩むの？
全部h1でいいよ。
<!-- ここに見出しが無い -->の部分は、実際に見出しないのであればsectionで囲っちゃダメよ。
関連するトピックス