Question

我的问题是：

我正在使用HTML5页眉，页脚，导航，文章和旁边标签吗？
我是在使用div标签吗？

任何建议将不胜感激。感谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>
        Simple Blog!
    </title>
    <link rel="stylesheet" type="text/css" href="simple_blog.css" />
</head>
<body>

<!-- Menu navigation -->
<div id="header">
<nav id="centerDiv">
    <ul class="centerUL">
        <li id="blog"><a href="">Blog</a></li>
        <li id="projects"><a href="">Projects</a></li>
        <li id="about"><a href="">About</a></li>
    </ul>
<nav>
</div>

<!-- Main content -->
<div id="column-holder">
<div id="main-content">

<article>
    <header>
        <h1>Main Content!</h1>
        <p>Published date</p>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. Mauris nec urna et tellus sodales pellentesque. Duis consequat porta urna eu sagittis. Nulla rhoncus, eros nec feugiat iaculis, tortor nibh molestie metus, nec fringilla augue lectus non justo. Nullam id tellus magna. Phasellus sit amet mi felis. Donec tempor cursus dignissim.</p>

    <p>Nunc semper enim vitae sem fringilla quis scelerisque tortor mollis. Vivamus ac nibh vitae ipsum adipiscing rutrum sit amet scelerisque dui. Curabitur interdum enim vitae nibh sollicitudin consectetur. Fusce venenatis, diam eu accumsan hendrerit, justo nisi egestas leo, ac vehicula sapien velit et mi. Mauris vehicula metus non lacus sodales feugiat. Praesent felis magna, interdum in consectetur vel, imperdiet vitae libero. Curabitur sed neque non enim eleifend pharetra ac a ante. Phasellus viverra auctor nulla, vitae placerat felis semper at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus felis, vehicula id pharetra sed, fermentum nec ligula. Maecenas pulvinar tristique quam, sed porttitor ligula ullamcorper eget. Aliquam at felis ante, sit amet faucibus nibh. Aliquam metus ante, ultrices quis dapibus non, placerat et mauris. Donec at ligula dolor. Phasellus non orci arcu.</p>

    <p>Mauris ut mi ipsum, eget rutrum nibh. Nulla et arcu in diam tristique ultricies eget non lectus. Praesent sit amet leo nisl, in suscipit metus. Mauris sapien eros, lobortis vel lacinia id, pretium sit amet tortor. Aliquam pretium mollis erat, aliquet fermentum velit placerat dictum. Nullam mattis convallis molestie. Aenean ullamcorper faucibus congue. Sed sem erat, bibendum id pulvinar ac, rhoncus sed velit. In posuere erat sit amet leo volutpat eleifend. Ut a odio sit amet nisl viverra euismod.</p> 
    <footer>
        <p><small>Creative Commons...</small></p>
    </footer>   
</article>  
</div>

<!-- Side article -->
<aside>
    <div id="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>    
</aside>


</div>
</div>
</body>
</html>

Answer 1

这还不错，但有一些方面需要改进，以使其更具语义性。

<div id="header">
<nav id="centerDiv">
    ...
<nav>
</div>

nav本身就是一个块元素。不需要将它嵌套在另一个div中。我可能会将导航放在全局header标记内，因为导航可能是网站导航的一部分。还会有徽标或东西。

<div id="column-holder">
<div id="main-content">

<article>
    ...
</article>  
</div>

使用一个div来标记“主要”区域通常很好。你应该给它更简单的id main。更好的是使用main标签，它还带有必要的语义角色。

除此之外，我不认为column-holder div应该在那里。

<footer>
    <p><small>Creative Commons...</small></p>
</footer>

如果你只是嵌套这样的多个东西，那已经表明你做得不好了。 footer可以直接保存文字，因此如果它只是一个简短的文字，您就可以<footer>Creative Commons...</footer>。如果您还有更多要显示的内容，可以使用其他段落。样式不应该通过small标签发生（通过css为整个页脚设置样式）。

<aside>
    <div id="sidebar">
    <p>...</p>
    <p>...</p>    
</aside>

div没有关闭。也与上面的标题相同：无需进一步将其嵌套在div中。 aside已经可以完成这项工作了。

Answer 2

我会建立这样一个计划。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>
        Simple Blog!
    </title>
    <link rel="stylesheet" type="text/css" href="simple_blog.css" />
</head>
<body>

<!-- Menu navigation -->
<header>
 <nav class="centerUL">   
    <ul>
        <li id="blog"><a href="">Blog</a></li>
        <li id="projects"><a href="">Projects</a></li>
        <li id="about"><a href="">About</a></li>
    </ul>
</nav>
</header>

<!-- Main content -->
<section  id="wrapper">
<article >
        <h1>Main Content!</h1>
        <p>Published date</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. Mauris nec urna et tellus sodales pellentesque. Duis consequat porta urna eu sagittis. Nulla rhoncus, eros nec feugiat iaculis, tortor nibh molestie metus, nec fringilla augue lectus non justo. Nullam id tellus magna. Phasellus sit amet mi felis. Donec tempor cursus dignissim.</p>

    <p>Nunc semper enim vitae sem fringilla quis scelerisque tortor mollis. Vivamus ac nibh vitae ipsum adipiscing rutrum sit amet scelerisque dui. Curabitur interdum enim vitae nibh sollicitudin consectetur. Fusce venenatis, diam eu accumsan hendrerit, justo nisi egestas leo, ac vehicula sapien velit et mi. Mauris vehicula metus non lacus sodales feugiat. Praesent felis magna, interdum in consectetur vel, imperdiet vitae libero. Curabitur sed neque non enim eleifend pharetra ac a ante. Phasellus viverra auctor nulla, vitae placerat felis semper at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus felis, vehicula id pharetra sed, fermentum nec ligula. Maecenas pulvinar tristique quam, sed porttitor ligula ullamcorper eget. Aliquam at felis ante, sit amet faucibus nibh. Aliquam metus ante, ultrices quis dapibus non, placerat et mauris. Donec at ligula dolor. Phasellus non orci arcu.</p>

    <p>Mauris ut mi ipsum, eget rutrum nibh. Nulla et arcu in diam tristique ultricies eget non lectus. Praesent sit amet leo nisl, in suscipit metus. Mauris sapien eros, lobortis vel lacinia id, pretium sit amet tortor. Aliquam pretium mollis erat, aliquet fermentum velit placerat dictum. Nullam mattis convallis molestie. Aenean ullamcorper faucibus congue. Sed sem erat, bibendum id pulvinar ac, rhoncus sed velit. In posuere erat sit amet leo volutpat eleifend. Ut a odio sit amet nisl viverra euismod.</p> 

</article>  
<!-- Side article -->
<aside id="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra aliquam dolor non egestas. </p>    
</aside>
</section>
<footer>
    <p><small>Creative Commons...</small></p>
</footer> 

</body>
</html>

我的HTML5语义是否正确？

2 个答案: