-1

我的问题是：

  1. 我是否正确使用了 HTML5 页眉、页脚、导航、文章和旁白标签？
  2. 我是否过度使用 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>
4

2 回答 2

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-holderdiv 不应该在那里。

<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工作了。

于 2013-04-22T08:09:08.800 回答
1

我会建立这样一个计划。

<!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>
于 2013-04-22T08:15:20.550 回答