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 回答