Question

有一段时间我一直在使用HTML5构建网站，我喜欢使用它提供的新标签。在div之后避免使用div的能力是一件很棒的事情，它可以让你更清晰，更容易阅读。让我有点困惑的是当使用div标签在语义上正确时。我理解div是一个语义标记内容的集合，可能需要组合在一起，但我已经看到了很多编写HTML5的方法以及程序员如何使用div，我只是不确定什么是正确的方法和错误的方式或换句话说，好的方式和更好的方式。

例如：

<div id="header">
    <header>
        <h1>Here is a header!</h1>
    </header>       
</div>

<header id="header">
    <h1>Here is a header!</h1>
</header>

两种方法都是编写html的方法，但是另一种语法更正确吗？最好的做法是在页眉，页脚，导航或旁边标记中添加id或类并对其进行样式设置，还是div标记的？或者我可能只是在想这个？如果有人可以帮助我放心并给我一个很好的理解，那就太棒了！

Answer 1

使用标签并使用Modernizr.js，以便获得IE支持。

Answer 2

我认为编写标题的语义方式类似于

<header>
    <h1>This is the page heading!</h1>
    <!-- extra header information -->
    <p>A paragraph explaining the page</p>
    <!-- navigation can go into the header, but it doesn't have to -->
    <nav>
        <ul>
            <li><a href="/example-page">Example page</a></li>
        </ul>
    </nav>
</header>

关键点是header元素不应该在div＃header元素中，因为这是多余的。由于同样的原因，header元素也不需要id。

HTML5标签和div标签

2 个答案: