2

我正在更新一个网站以使用一些 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 添加到部分和边上？

谢谢。

4

4 回答 4

5

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

我想强调的是，是否保留<div>s 取决于您，如果您提供 HTML5 语义标签，那么<div>如果您希望它们用于样式或组织，则为您的布局设置 20 个内部 s 并没有任何意义。HTML5 语义标签就像<div>s 一样，除了它们带有额外的语义含义。

这是一个 HTML5 布局示例：

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

如果你使用 HTML5 标签，还要确保你使用像modernizr这样的库作为旧浏览器的 polyfill。

参考

于 2013-03-27T13:19:55.250 回答
2

Your wrappers should be replaced with the new tags, like Kolink said.

For example, your class="main-wrapper" could be replaced with the <main> tag. Likewise, why are you wrapping your sidebar when <aside> would be fully customisable?

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

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

All of these can have specific CSS layout ruling for them, making your markup 'readable' and easy to understand. Obviously, you may need classes, but this may help your workload by using new and pre-existing tags instead of arbitrary <div>s

于 2013-03-27T13:17:34.193 回答
2

http://html5doctor.com/element-index

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

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

和

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

于 2013-03-27T13:20:32.640 回答
1

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

于 2013-03-27T13:21:05.720 回答