logo标签列表

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

htmlsemantics
3

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

这个是正确的吗：

<!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是“<!DOCTYPE html>”，其中html小写。如果您愿意，您可以使用<meta charset="utf-8">替换Content-Type元标记，这样做的效果完全相同（即使在旧版浏览器中也是如此）。 - Simon White
6个回答
7

在 <body> 中，任何元素都不应该有一个“起始”布局。

<article> 和 <section> 标签并非强制要求的开销，你可以根据需要适当地将高级块分离为合适的标记块，以便于大纲算法的制定。如果你的页面只有一个文章，这是常见的情况，那么将其全部包装在 <article> 标记中没有任何好处。

目前，在您的示例中的 <section> 元素并没有起到实际作用。除非需要它们，否则就将其保留。

(而且可以说，在浏览器支持更好之前，仍然可以将其省略。对于 IE，你需要使用 HTML Shiv 才能使其正常工作，但它仍然存在问题。对于更多用户案例，它还不值得这么做，因为带来的实际好处很小。另外，为了 XML 的有效性，请将 doctype 中的 HTML 更改为小写，以匹配实际的根元素。)

2

我认为你应该将导航与页眉分开，因为您不能总是假定导航栏位于页眉上（如果您的导航栏在侧边栏上会怎么样呢？）

除此之外，我认为这是一个很好的布局框架。（除非您正在创建新闻或博客站点，否则我认为您不应在基本布局中包括“article”标签）

1

这是我通常的起点：

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

  </body>
</html>

为了简化，我使用HTML5文档类型和更短的字符集，并将body留空，因为我可能不会在“完整”的HTML5项目上工作。也就是说，该项目可能要求我避免使用新的HTML5分区元素，但这样设置项目可以更容易地过渡到以后的日期，并允许我使用一些小的HTML5特色（例如从我的样式表链接中省略type）。

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

问题在于空的body标签不是有效的HTML。最好从以下内容开始放置在body中：<h1>标题</h1> <p>段落</p> - Simon White
如果在正文中有<!-- content here -->，那么这是否仍然算作“空的body标签”呢？ - iamnotsam
1

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

1

我建议看一下《深入HTML5》这本书，里面有一些例子。这里有一个HTML4博客和一个HTML5版本的相同内容。

还有一个章节介绍了新的语义化标记。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接