-
ID:nNOobS さんの質問

HTML/CSSのコーディングをする時に、デザイン上では文書構造的に重要な要素よりも上に重要度の低い要素が配置されていることが多くあると思います。デザインをそのままHTML化すると以下のようになる場合、これはちゃんとh1を上にHTML上では登場させるべきですか？（CSSのpositionで出現順序を調整）
<div><p>質問</p></div>
<h1>Q.初めて〜したのはいつですか？</h1>
↓
<h1>Q.初めて〜したのはいつですか？</h1>
<div><p>質問</p></div>

むしろ、こういうことは当たり前にコーディング時にやるべきレベルのことなのでしょうか？

みんなの回答 5 件

ID:IAEqG9 さんの回答

<h1>質問</h1>
<h2>Q.初めて〜したのはいつですか？</h2>


  • たくさん反復が続くなら、質問はh1のcontentに
    <h1>Q.初めて〜したのはいつですか？</h1>
ID:3JPryV さんの回答

デザイン(見た目)と構造(アウトライン)は関係ないです。
htmlでアウトラインを正しく書いて、CSSで見た目を整えるのです。
ID:nNOobS

どのレベルまで構造を追求すべきなのでしょうか？単純にアウトライン化するツールでHTMLソースを見た時にちゃんと情報が階層化されていれば十分ですか？それとも全体的に、または部分的にさえもより重要な情報はよりHTMLソースで上に表示されるようにした方が良いのでしょうか？

ID:A5loKT さんの回答

h1とh2なら登場順序に文章構造は関係するけど
、質問文のdivとh1は順序とか特に関係ないです
ID:nNOobS

回答ありがとうございます。最初のh1が出現する前にそのページにとってはサブ的な情報がHTMLソース上に沢山出現しているのは問題ないですか？

ID:A5loKT

seoの観点から言えばh1の前に余計なソースが沢山あるよりはすっきりしていたほうがいいけど、あくまで程度問題。
多少位なら全然seoに関係しないし、すごく沢山あれば影響する。
seoは関係なくて、技術的に他のページとの統一性やメンテナンス性を考えているのであれば、それを伝えていじってもいいとは思う。
もちろん見た目のデザインが変わらずに実装できることが前提だけど。

ID:FKGbkO さんの回答

HTML仕様書 4.3.11 Headings and sectionsには次のように書いてあります。
“The first element of heading content in an element of sectioning content represents the heading for that section.”
したがって、h1と本文の順番が前後しても、ちゃんとsection要素で囲めばセマンティクス上は問題ありません。
ID:FNeS0a さんの回答

sectionなりarticleなりで括られていれば順序は問題ないと思うけど、そもそもビジュアルとして順序を逆転させるようなものはグラフィックデザインの文法から見て間違ってる。
ID:hr.pnJ

エディトリアルデザインを勉強すればいいと思うよ
グラフィックデザインの文法って何だよ

最終更新日:2016-02-12 (1,696 views)

関連するトピックス

ページ上部に戻る