Question

我正在更新网站以使用一些HTML5结构元素。

我读过很多文章，但我还不是100％清楚。

我的问题是关于内容，而不是页眉或页脚元素。这是一个典型的例子：

<div id="main-content" class="grid-8">
    <section>
        <h1 class="grey-heading">How It Works</h1>
        // some section content here  
    </section>
</div>
<div id="sidebar" class="grid-4">
    <aside>
        // some related stuff here
     </aside>
</div>

如您所见，它是一个简单的主要内容/侧边栏设置。问题是，我是否正确保留结构div（因为他们所做的一切），或者是否可以在内容中添加结构内容？换句话说，删除div并将类/ id添加到section和asides？

感谢。

Answer 1

如果你的风格允许，你可以替换它们，它们为浏览器提供了额外的语义含义，这对辅助技术和网络爬虫特别有用。您的标记非常好，但如果您不需要它们来设置样式，请随时删除<div>。此外，如果要导航，您可能需要在侧栏使用<nav>。

我想强调一下，你是否保留<div>是否取决于你，如果你提供HTML5语义标签，那么你就不会因为内部<div>而失去意义。如果您希望它们用于样式或组织，则为您的布局。 HTML5语义标签就像<div>一样，除了它们带有额外的语义之外。

以下是HTML5布局示例：

<header></header>
<nav></nav>
<section>
   <header></header>
   <article></article>
   <article></article>
   <footer></footer>
</section>
<aside></aside>
<footer></footer>

如果您使用的是HTML5代码，请确保使用modernizr等库作为旧版浏览器的填充。

参考

Smashing magazine - HTML5 and The Future of the Web

Answer 2

你的包装纸应该换成新的标签，就像Kolink说的那样。

例如，您的class="main-wrapper"可以替换为<main>标记。同样，当<aside>可以完全自定义时，为什么要包装侧边栏？

<main>
    <section>
        <p>content</p>
    </section>
<main>

<aside>
    <p>content</p>
</aside>

所有这些都可以为他们制定特定的CSS布局，使您的标记“可读”且易于理解。显然，您可能需要课程，但这可以通过使用新的和预先存在的标签而不是任意<div>来帮助您的工作量

Answer 3

http://html5doctor.com/element-index

在这里你可以阅读有用的资源

div元素根本没有特殊含义。它代表了它儿童。它可以与class，lang和title属性一起使用标记一组连续元素共有的语义。

和

Section代表通用文档或应用程序部分。在这上下文，一个部分是内容的主题分组，通常带有标题，可能有一个页脚。例子包括书中的章节，选项卡式对话框中的各种选项卡式页面或编号的页面论文的各个部分。网站的主页可以拆分为介绍部分，新闻，联系信息。

Answer 4

跨浏览器不完全支持分配了类/ id的HTML5元素。例如，如果aside有一个类，并且您尝试将css添加到该类，则它将无法呈现。如果你使用HTML5 Shiv，它应该解决这个问题，然后你的代码会更清洁，真棒！

如何使用HTML5元素构建网页？

4 个答案:

参考