Question

我用HTML5 / CSS3开发我的新网站。将我的PSD文件转换为HTML5 / CSS3时，我想知道HTML5网站的正确标记是什么。

下面是我网站的简单线框，您可以看到我希望网站的全宽，至少在不同的区域。

这是布局：

正如您在此处所见，我希望在我的主页上有一些不同的部分来获取信息。

As you can see here, I want to have some different section on my homepage for the information

我想出了这个标记：

因为当我复制所有列表不再被看到时，我就有了此代码中的内容，文本和图像被省略。图像或图像文字将面临以下评论。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>

<!-- Meta Tags -->

<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">

<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

<!-- Start container website -->
<header id="header">
    <div class="container_12">
            <div class="grid_12">

 <!-- // Here will be position the logo with a link \\ -->

                <nav id="primary-navwrapper">
                 <!-- // Here will be an unordered list with menu items \\ -->

            </nav>

        </div><!-- End .grid_12 -->

    <div class="clear"></div><!-- End .clear -->
    </div><!-- End .container_12 -->
</header><!-- End header -->

<section id="hero">
    <div class="sliderbox">

         <!-- // An list of image for a slider \\ -->

    </div><!-- End .sliderbox -->

</section><!-- End section#hero -->

<section id="introduce">
    <article class="container_12">

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->


    </article><!-- End article.container_12 -->


    <article class="container_12">
        <div class="grid_12">

          <!-- // A image tag \\ -->

        </div><!-- End .grid_12 -->

    </article><!-- End article.container_12 -->

</section><!-- End section#introduce -->

<hr class="dark-grey"> <!-- Divider for the section -->

<section id="work" class="alt">
    <article class="container_12">

           <!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->

    </article><!-- End article.container_12 -->

</section><!-- End section#work.alt -->

<hr> <!-- Divider for the section -->

<section id="blog" class="even">
    <article class="container_12">
        <aside class="grid_4">

            <!-- Sidebar with some text -->

        </aside><!-- End aside.grid_4 -->

        <ul class="recentbox">

             <!-- List of 2 latest blog items -->

        </ul><!-- End ul.recentbox -->

    </article><!-- End article.container_12 -->

    <article class="container_12">
        <div class="grid_12">

            <!-- Contact banner -->

        </div><!-- End .grid_12 -->
    </article><!-- End article.container_12 -->

</section><!-- End section#blog.even -->

<footer id="footer">

     <!-- Footer markup here -->

</footer><!-- End footer -->


</body>
</html>

一些额外的信息。正如您所看到的，我从头部的<header> - 标记开始，之后我在内部设置了<section> - 标记我将<article> - 标记 class <article class="container_12">，以便能够使用网格960.在<article> - < strong>标签我将设置文字，图片等。

很高兴知道的是，我在某些部分经常使用标签文章，我这样做是因为对于特定部分中的几篇文章进行区分。与文章确实有相互联系，但在一篇文章中有所不同，以便发布。

我喜欢听到你对我的标记到目前为止的意见以及你将如何处理。

谢谢。

Answer 1

你的标记是完全可以接受的。我建议也许不会对id标签这么沉重，而是为你的CSS提供更多的OO方法。有关信息，请访问：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

否则你的加分就好了。

HTML5网站的正确标记？

1 个答案: