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

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>s ,由你来决定,如果你提供HTML5语义标签,那么<div>如果你想要它们用于样式或组织,你就不会因为你的布局有20个内在而失去意义.HTML5语义标签就像<div>它们带有额外的语义含义一样.

以下是HTML5布局的示例:

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

如果您使用的是HTML5标记,还要确保使用像modernizr这样的库作为旧版浏览器的polyfill.

参考

• 粉碎杂志 - HTML5和网络的未来