正确使用HTML5元素&；结构
我需要将PSD转换为HTML5/CSS。我很难找到关于使用哪些元素的明确答案。我的布局由页眉、内容/侧边栏和页脚组成。模板结构如下所示 我知道你可以在HTML5中使用多个页眉/页脚元素，我有主页眉/页脚标记。我遇到的主要问题是内容的结构 我有一个主内容区，然后是一个侧边栏，侧边栏内容与内容没有真正的联系。在侧边栏中，我需要有多个内容框 内容区域有不同的部分，主要是带有文本的特色图像，然后剩下的就是页面文本 据我所知，使用正确使用HTML5元素&；结构,html,semantic-markup,Html,Semantic Markup,我需要将PSD转换为HTML5/CSS。我很难找到关于使用哪些元素的明确答案。我的布局由页眉、内容/侧边栏和页脚组成。模板结构如下所示 我知道你可以在HTML5中使用多个页眉/页脚元素，我有主页眉/页脚标记。我遇到的主要问题是内容的结构 我有一个主内容区，然后是一个侧边栏，侧边栏内容与内容没有真正的联系。在侧边栏中，我需要有多个内容框 内容区域有不同的部分，主要是带有文本的特色图像，然后剩下的就是页面文本 据我所知，使用标记来定义内容/侧边栏不是语义性的，因为它与内容无关，而是页面结构/布局。我
<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>`
一般情况下：如果标题仅包含标题，则可以省略它
如果页面的主要内容可以独立存在（如博客文章或类似内容），则可以使用文章
，而不是部分
由于#特色内容
是对主要内容的某种抽象/总结，因此它应该是文章
的一部分。将其包含在标题中是有意义的：
<article>
<header>
<h2>(article title)</h2>
<img src="" alt="(article teaser image)">
<p>(article teaser text)</p>
</header>
<p>(article content)</p>
</article>
因此，结构可能看起来像：
<body>
<h1>…</h1> <!-- maybe with header -->
<article>
<h2>…</h2>
</article>
<aside>
<h2>…</h2> <!-- omit it or hide it visually -->
<section> <!-- or article -->
<h3>…</h3>
</section>
<section> <!-- or article -->
<h3>…</h3>
</section>
</aside> <!-- resp. use 1 aside for each block -->
<footer></footer>
</body>
…
…
…
…
…
1）特色内容
和主内容
有什么关系吗？特色内容的作用是什么？在这方面，一个真实的例子可能会有所帮助。2） 您能包括您使用的所有标题（h1
-h6
）吗？（或者是h2
是唯一的一个？）是的-它们是相关的。在#main
中是页面内容，#特色内容几乎是页面内容的摘要。进一步研究HTML5元素，我认为我应该用
替换#main
，然后在该元素中，对实际页面内容使用
，在该元素中，对特色元素使用
，然后对侧边栏使用
，显然应该用于内容框？或者-在我的侧边栏中，我应该使用或类似的吗？类似这样的东西？干杯，谢天谢地，这和我最后的结果非常相似。我在
中使用
，因为每一行的内容只有几行，经过一点研究，我认为这篇文章不合适。在你对
中标题标签的评论中，当通过HTML5大纲视图运行我的代码时，我得到了未定义的部分，这是为了这个目的吗（我假设我不知道还有其他目的，SEO？）。我可以把边栏
或类似的东西隐藏在CSS中吗？@RyanPilbeam:每个分区元素（部分
，文章
，放在一边
，导航
）在文档大纲中生成一个条目。如果在剖切元素内部提供标题，则只需使用第一个标题。如果您不提供任何标题，它将创建一个“未定义”条目。现在，不明确地指定任何标题是有效的（通常不可取，但在某些情况下是适当的）。您还可以指定一个并将其可视化隐藏，这样屏幕阅读器用户仍然可以读取它。谢谢，这很有意义。在大纲视图上，第一部分为空，站点名称是否应为主
元素中的
？@RyanPilbeam:是，站点名称应为h1
（无论是否在标题中）。因此，以下所有标题和分段元素都在本网站标题的范围内。
<body>
<h1>…</h1> <!-- maybe with header -->
<article>
<h2>…</h2>
</article>
<aside>
<h2>…</h2> <!-- omit it or hide it visually -->
<section> <!-- or article -->
<h3>…</h3>
</section>
<section> <!-- or article -->
<h3>…</h3>
</section>
</aside> <!-- resp. use 1 aside for each block -->
<footer></footer>
</body>