2

PSD を HTML5/CSS に変換する必要があります。どの要素を使用するかについて決定的な答えを見つけるのに問題があります。私のレイアウトは、ヘッダー、コンテンツ/サイドバー、およびフッターで構成されています。テンプレートの構造は次のとおりです。

HTML5 で複数のヘッダー/フッター要素を使用できることは理解しています。メインのヘッダー/フッター タグがあります。私が抱えている主な問題は、コンテンツの構造にあります。

メイン コンテンツ エリアとサイドバーがありますが、サイドバーのコンテンツは実際にはコンテンツとは関係ありません。サイドバー内には、複数のコンテンツ ボックスが必要です。

コンテンツ領域にはさまざまなセクションがあり、主にテキスト付きのアイキャッチ画像で、残りはページ テキストです。

私が理解していることから、<section>タグを使用してコンテンツ/サイドバーを定義することは、コンテンツに関連していないためセマンティックではなく、ページ構造/レイアウトです。以下のマークアップは、達成しようとしている構造に対して正しいように見えますか?

    <header>

    </header>

    <div class="wrapper">
        <div class="main">
            <section id="featured-content">
                <img />
                <p>Featured text</p>
            </section>

            <section id="main">
                <header><h2>Title</h2></header>
                <p>The rest of content goes here</p>
            </section>
        </div>

        <aside class="sidebar">
            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>

            <section class="content-box">
                <header>Box title</header>
                <p>Box content</p>
            </section>
        </aside>
    </div>

    <footer>

    </footer>`

ここに画像の説明を入力

4

1 に答える 1

3

一般的に:headerに見出しのみが含まれる場合は、省略できます。

ページのメイン コンテンツが独立している場合 (たとえば、ブログ投稿など)、article代わりにsection.

は#featured-contentメイン コンテンツのある種の要約/要約であるため、 の一部である必要がありarticleます。に含めることは理にかなっていますheader:

<article>

  <header>
    <h2>(article title)</h2>

    <img src="" alt="(article teaser image)">
    <p>(article teaser text)</p>
  </header>

  <p>(article content)</p>

</article>

(ティーザーが本当に複雑な場合 (例: 見出し自体を含む) のみ、独自の を取得できますsection。)

サイドバーの使用asideは正しいです。なぜなら、そのコンテンツはメイン コンテンツだけでなく、ページ全体 (!) に「接線方向に関連している」からです (その場合は、 にも含める必要がありarticleます)。

その中のすべてのコンテンツ ブロックasideがある程度関連している場合、各ブロックに対してsectionその内部を使用することasideは正しいです (ただし、実際のコンテンツによっては、article適切な場合もあります)。ただし、その中のブロックにaside関係がない場合 (簡単なテスト: 全体の見出しを見つけますasideか?)、asideそれぞれに個別の を使用することを検討できます。

<div class="sidebar">
  <aside>
    <h2>…&lt;/h2>
  </aside>

  <aside>
    <h2>…&lt;/h2>
  </aside>
</div>

したがって、構造は次のようになります。

<body>
  <h1>…&lt;/h1> <!-- maybe with header -->

  <article>
    <h2>…&lt;/h2>
  </article>

  <aside> 
    <h2>…&lt;/h2> <!-- omit it or hide it visually -->

    <section> <!-- or article -->
      <h3>…&lt;/h3>
    </section>

    <section> <!-- or article -->
      <h3>…&lt;/h3>
    </section> 

  </aside> <!-- resp. use 1 aside for each block -->

  <footer></footer>

</body>
于 2013-05-26T17:25:41.123 に答える