html5 的最佳语义默认/起始布局是什么？答案

【问题标题】：Whats the best semantic default/starting layout for html5?html5 的最佳语义默认/起始布局是什么？
【发布时间】：2011-02-24 04:22:10
【问题描述】：

我对新标签应该如何使用有点困惑。

这是否正确：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>

    <section>
        <header>
            <nav></nav>
        </header>
        <section>

        </section>
        <footer>

        </footer>
    <section>

</body>
</html>

或者其中一个部分应该是<article>？起始布局应该是什么？

【问题讨论】：

HTML5 DOCTYPE 是“”，带有小写的 html。如果你愿意，你可以用替换 Content-Type 元数据，它的作用完全相同（即使在旧浏览器中也是如此。）

标签： html semantics

【解决方案1】：

我会看看 Dive into HTML 5，其中有一些示例。这是相同内容的HTML4 blog 和HTML5-ified version。

还有a chapter关于新的语义标记标签。

【讨论】：

【解决方案2】：

这是我通常开始的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/css/screen.css" rel="stylesheet" />
  </head>
  <body>

  </body>
</html>

为了简单起见，我使用 HTML5 文档类型和较短的字符集，并将正文留空，因为我可能不是在处理“完整”的 HTML5 项目。也就是说，该项目可能要求我避免使用新的 HTML5 分段元素，但这为项目设置了以后更容易过渡的条件，并允许我使用 HTML5 的一些小好处（比如从我的样式表中省略 type @ 987654325@)。

如果您仍然对分割元素感到困惑，这里有几篇关于 section 和 article 的文章。

【讨论】：

这个问题是空的body标签不是有效的HTML。最好从正文开始：
Heading

paragraph
如果在正文中你有我想知道这是否仍然算作“空正文标签”

【解决方案3】：

或者查看我的writing a valid html5 document。

【讨论】：

【解决方案4】：

<body> 中的任何内容都不应该有“起始”布局。

<article> 和 <section> 标签不是您必须填写的强制性开销，它们用于为大纲算法适当地分隔高级标记块，如果和当你需要这样做时。如果您的页面上只有一篇文章（这很常见），那么将整篇文章包装在 <article> 中没有任何好处。

目前，您示例中的 <section> 元素什么都不做。在您需要它们之前，不要使用它们。

（在浏览器支持更好之前，无论如何都可以将它们排除在外。对于 IE，您将需要使用 HTML Shiv 才能使任何这些工作，但仍然存在问题。对于更多用户案例，这只是'不值得，因为它带来的实际好处很少。另外，为了 XML 的有效性，将 doctype 中的 HTML 更改为小写以匹配实际的根元素。）

【讨论】：

【解决方案5】：

恕我直言，我确实认为您应该将导航栏与标题分开，因为您不能总是假设导航栏位于标题上（如果您的导航栏在侧面怎么办？）

除此之外，我确实认为它是一个很好的布局骨架。（除非您正在创建新闻或博客网站，否则我认为您不应该在基本布局中包含标签

【讨论】：

【解决方案6】：

您包含的内容取决于您拥有的内容。当然，您并不总是需要所有语义块标签。就个人而言，在我重写我的网站之前，我现在坚持使用我的 <div> 元素。

【讨论】：

Heading