HTML5 语义：主要内容标题属于哪里？

发布于 2024-12-01 10:17:00 字数 1151 浏览 0 评论 0原文

每次创建 HTML5 页面时，我都会为主页标题的放置位置而烦恼。每个人处理这个问题的方式似乎都不同......

情况如下：

假设我有一个名为“Meo 的前端冒险”的网站。在这个网站上，有一个名为“Abracadabra Semantics”的页面，其子标题并不重要，例如“lorem ipsum delor”。

网站顶部还有一个导航、页脚和一些内容。

在 HTML 4.0 中，我会这样做：

- div.header
   + div.nav
   + a.siteName:  "Meo's frontend adventures"
- div.contents
   + h1.pageTitle: "Abracadabra Semantics"
   + strong.lead: "lorem ipsum delor"
   - div.cn
     + h2
     + p
     + etc..
+ div.footer 
     +ul.footerNav

现在，在 HTML5 中，基本上每个结构元素都有一个 H1。我应该把实际页面的标题放在哪里？

我会这样做：

- header
   + h1.siteName:  "Meo's frontend adventures"
   + nav
- section.contents
   - header
      -hgroup
        + h1: "Abracadabra Semantics"
        + h2: "lorem ipsum delor"
   - article
     - header
       +h1.ArcticleTitle
     + p
     + etc..
- footer
     + nav

我不确定将实际页面的标题放在主要部分中是否正确，或者是否应该放在文档的标题中。我只是出于我以前的 HTML4 思维而这样做的。

对我来说，将其放在文档的标题中会更合乎逻辑，因为此页面是关于此主题的。但在我发现的每个示例中，页面标题位于主要部分，网站标题位于标题中。

在 HTML 4 中很容易决定：h1 = 主题标题。但在 HTML5 中我就不太清楚了。

Google 或屏幕阅读器如何确定内容的标题是什么？你会使用什么结构？

原文

Every time I create a HTML5 page, I struggle with where to put the main page title. Everybody seams to handle this differently...

Here is the situation:

Let's say I have a website that is called "Meo's frontend adventures". On this site there is a page called "Abracadabra Semantics" with a sub title that is not important, like "lorem ipsum delor"

There is also a navigation that is on top of the site, a footer and some contents.

In HTML 4.0 I would do it this way:

- div.header
   + div.nav
   + a.siteName:  "Meo's frontend adventures"
- div.contents
   + h1.pageTitle: "Abracadabra Semantics"
   + strong.lead: "lorem ipsum delor"
   - div.cn
     + h2
     + p
     + etc..
+ div.footer 
     +ul.footerNav

Now, in HTML5 basically every structural element gets a H1. Where should I put the title of the actual page?

I would do like so:

- header
   + h1.siteName:  "Meo's frontend adventures"
   + nav
- section.contents
   - header
      -hgroup
        + h1: "Abracadabra Semantics"
        + h2: "lorem ipsum delor"
   - article
     - header
       +h1.ArcticleTitle
     + p
     + etc..
- footer
     + nav

I'm not sure if it is right to put the title of the actual page in the main section or if it should be in the header of the document. I just did it like this out of my old HTML4 thinking.

It would be more logical to me to put it in the header of the document, since this page is about this topic. But in every example I found, the page title is in the main section and the title of the website is in the header.

In HTML 4 it is easy to decide: h1 = topic title. But it's not so clear to me in HTML5.

How does Google or a screen-reader determines what the title of the contents is? What structure would you use?

分享到QQ

分享到微博

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

发布评论

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

败给现实 2024-12-08 10:17:00

有趣的问题，我将提出一个反驳观点：您如何看待标题？

假设所质疑的标题是指整个文档。在这种情况下，从语义上讲，我们将该文本放在文档的标题中。然而，页面标题可能是另一回事。如果我们将页面标题视为与内容相关（例如，如果 Abracadabra Semantics 是文章本身的标题），那么它不属于页面的子项，而是属于文章或部分的子项。因此，在这种情况下，我们的 HTML 可能如下所示：

<!-- Head stuff here -->
<body>
  <header>
    <h1>Meo's frontend adventures</h1>
    <h2>Lorem Ipsum Dolor Sit Amet...</h2>
    <nav>
      <!-- ul of navigation items -->
    </nav>
  </header>
  <section>
    <header>
      <h1>Abracadabra Semantics</h1>
      <h2>Lorem Ipsum Dolor Sit Amet...</h2>
      <!-- optional introductory text -->
    </header>
    <article>
      <p>Lorem Ipsum Dolor Sit Amet...</p>
    </article>
    <!-- Other potential related articles -->
  </section>
  <!-- Possible footer -->
</body>

从语义上讲，我们在层次结构中组织页面 – 上面的标签告诉我们此标头（或任何类型的子标签）属于什么。在这种情况下，我们可以有两个标题元素（一个提供网站的介绍，另一个提供该部分的介绍）。

然而，并不是每个人都以相同的方式看待这组语义。例如，他们可能会将单个页面视为相关部分，因此他们可能会在标题中包含其页面标题。或者，他们的部分可能是他们的主导元素，而标题是该部分的第一个子元素。这是关于您对内容的估计的观点。屏幕阅读器将根据您布置文档的顺序来组织站点；然而，并非所有人都会以同样的方式这样做。 HTML4 迫使一些屏幕阅读器开发人员考虑 CSS 定位，但 HTML5 试图通过加入更多语义元素来重新组织网站来纠正这一问题。

无论如何，既然您已经了解了自己可以做什么以及它是如何运作的，那么您就可以做出自己的决定了。考虑一下您如何理解您的内容与其周围内容的关系，并进行相应的组织。

为了进一步帮助您，请查看规范： http:// /www.w3.org/TR/html-markup/header.html

Interesting question, to which I'll pose a counter-point for the answer: How do you view the title?

Let's say that the questioned title is referring to the overall document. In this case, semantically we would put that text in the header of the document. The page title however can be a different matter. If we view the page title to be related to the content (For example, if Abracadabra Semantics is heading the article itself), then it belongs not as a child of the page, but as a child of the article or section. So, in that case, our HTML might look like this:

<!-- Head stuff here -->
<body>
  <header>
    <h1>Meo's frontend adventures</h1>
    <h2>Lorem Ipsum Dolor Sit Amet...</h2>
    <nav>
      <!-- ul of navigation items -->
    </nav>
  </header>
  <section>
    <header>
      <h1>Abracadabra Semantics</h1>
      <h2>Lorem Ipsum Dolor Sit Amet...</h2>
      <!-- optional introductory text -->
    </header>
    <article>
      <p>Lorem Ipsum Dolor Sit Amet...</p>
    </article>
    <!-- Other potential related articles -->
  </section>
  <!-- Possible footer -->
</body>

Semantically, we are organizing the page in a hierarchy – The tag above tells us to what this header (or child tag of any sort) belongs. In this case, we can have two header elements (one which offers an introduction to the site, and another offering an introduction to the section).

However, not everyone views this set of semantics the same way. For instance, they may view the individual page as the section in question, so they may include their page title in the header. Or, their section may be their dominating element, and the heading the first child of the section. It's point of view in regard to your estimation of the content. The screen readers will organize the site based on what order you lay out the document; however, not all will do this the same way. HTML4 forced some developers of screen readers to take CSS positioning into account, but HTML5 seeks to correct this by putting more semantic elements into play to reorganize your site.

Anyhow, now that you've been shown what you can do, and how it works, you can make your own decision. Think about how you understand your content in relationship to the content around it, and organize accordingly.

Just to help you out a little further, take a look at the specification: http://www.w3.org/TR/html-markup/header.html

回复收藏 0 原文