如何在 html5 中的标题、部分、文章等中使用 h1 到 h6？

发布于 2024-09-27 06:52:50 字数 912 浏览 7 评论 0原文

在 xhtml 1.0 中，hn（h1 到 h6）必须表示文档结构，如书中的章节，并且它们都源自 body。 html5中有section、article、header、hgroup，而且好像hn 标签源自这些标签之一，并且与 body 元素无关。就像

<html>
<body>
<h1>My personal homepage</h1>
<section id="resume">
<header>
<h1>My resumre</h1>
<p>A brief description of my skills</p>
</header>
<!-- bla bla bla -->
</section>
</body>

在 xhtml 1.0 中我会这样做：

<html>
<body>
<h1>My personal homepage</h1>
<div id="resume">
<h2>My resumre</h2>
<p>A brief description of my skills</p>
<!-- bla bla bla -->
</div>
</body>

这有意义吗？或者我应该遵循与 xhtml 1.0 中相同的规则并忽略部分、标题等...并使 hn 标签相对于 body 元素？

有关语义和 SEO 的建议和答案对我来说最有价值。

原文

In xhtml 1.0 hn (h1 to h6) must represent document structure, like chapters in a book, and they all descend from the body.
In html5 there are section, article, header, hgroup, and it seems that hn tags descend from one of these tags, and then are not relative to the body element.
like

<html>
<body>
<h1>My personal homepage</h1>
<section id="resume">
<header>
<h1>My resumre</h1>
<p>A brief description of my skills</p>
</header>
<!-- bla bla bla -->
</section>
</body>

In xhtml 1.0 I would have done:

<html>
<body>
<h1>My personal homepage</h1>
<div id="resume">
<h2>My resumre</h2>
<p>A brief description of my skills</p>
<!-- bla bla bla -->
</div>
</body>

Does it make sense? Or should I follow the same rules as in xhtml 1.0 and disregard section, header, etc... and make hn tags relative to the body elements?

Advises and answers concerning semantics and SEO are the most valuable for me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱我好吗 2024-10-04 06:52:50

最好的SEO就是拥有好的内容，就这么简单！从语义上讲，您在这里所说明的内容很好。 HTML5 中的新功能是像

、

和 < 等容器。可以说，article> 有自己的内部结构。所以你的第一个例子的大纲是：

我的个人主页
1. 我的简历

如果您将标记更改为：

<html>
  <body>
    <h1>My personal homepage</h1>
    <h2>Introduction</h2>
    <p id="intro">...</p>
    <h2>About me</h2>
    <section id="resume">
      <header>
        <h1>My resume</h1>
        <h2>Overview</h2>
      </header>
      <p>...</p>
    </section>
  </body>
</html>

大纲将是：

我的个人主页
1.  简介
2.  关于我
    1.  我的简历
       1.  概述

参见草案第4.4.11节的解释。 Geoffrey Sneddon 做出了 HTML 5 Outliner 工具，用于检查页面的轮廓。

The best SEO is to have good content, simple as that! Semantically what you have illustrated here is fine. What is new in HTML5 is that containers like <footer>, <header>, <section> and <article> have their own internal structure, as it were. So the outline of your first example would be:

My personal homepage
1. My resume

If you were to change the markup to this:

<html>
  <body>
    <h1>My personal homepage</h1>
    <h2>Introduction</h2>
    <p id="intro">...</p>
    <h2>About me</h2>
    <section id="resume">
      <header>
        <h1>My resume</h1>
        <h2>Overview</h2>
      </header>
      <p>...</p>
    </section>
  </body>
</html>

The outline would be: