我用 HTML5/CSS3 开发我的新网站。在将我的 PSD 文件转换为 HTML5 / CSS3 时，我想知道 HTML5 网站的正确标记是什么。
下面是我网站的一个简单线框图，如您所见，我希望网站至少在不同区域内全宽。
这是布局：
正如你在这里看到的，我想在我的主页上有一些不同的部分来获取信息。
我想出了这个标记：
因为当我复制所有列表时不再可见，我已经省略了这段代码中的内容、文本和图像。图像或文本将面对下面的评论。
<!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>-标记处使用 a classof<article class="container_12">以便能够使用网格 960。在那个<article>-标记内我将设置文本、图像等。
很高兴知道，我在某些栏目中经常使用文章标签，我这样做是因为要针对特定栏目中的几篇文章进行区分。与文章之间确实有联系，但在一篇文章中发布时有所不同。
我很想听听您对我的标记到目前为止的意见以及您将如何处理。
谢谢你。