h1 是否需要成为标头标记中的第一个语义元素?

发布于 2024-12-26 01:23:29 字数 845 浏览 4 评论 0原文

我正在使用 Chrome 大纲扩展程序来检查页面的语义。在文档主标题标签中的 h1 之前有任何结构元素似乎是一个问题。我以为顺序并不重要,但显然它确实如此:

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

轮廓是这样的:

Untitled Body
  Main Navigation
  MyPage
  etc...

但是当 h1 是我的标题中的第一个元素时:

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

它的轮廓是这样的:

MyPage
  Main Navigation
  etc...

为什么会这样?是大纲有问题,还是我对 HTML5 语义的理解有问题? W3C 规范似乎没有提到它: http://dev .w3.org/html5/spec/Overview.html#the-header-element

I am using a Chrome outliner extension to check the semantics of my page. It seems to be a problem to have any structural element before the h1 in the document main header tag. I was thinking the order does not matter, but apparently it does:

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

Does outline like this:

Untitled Body
  Main Navigation
  MyPage
  etc...

But when the h1 is the first element in my header:

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

it does outline like this:

MyPage
  Main Navigation
  etc...

Why is that? Is the outliner buggy, or did I understand something wrong in HTML5 semantics? The W3C Specification does not seem to mention it: http://dev.w3.org/html5/spec/Overview.html#the-header-element

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

樱娆 2025-01-02 01:23:29

重新审视规范后,我同意 h1 不必是第一个元素。我怀疑问题出在您使用的 chrome 扩展上。

我通过这个 HTML 大纲工具运行了以下两个场景,并收到了相同的结果(“我的导航”出现在“我的导航”下)标题):

标题下带有 h1 第二个元素:

<body>
<header>
<h1>My Header</h1>
<nav><h1>My Navigation</h1></nav>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

标题下带有 H1 第一个元素:

<body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

After revisiting the specs, I agree that the h1 does not have to be the first element. I suspect the issue is with the chrome extension you are using.

I ran the following two scenarios through this HTML outlining tool and received the same results (My Navigation appears under My Header):

With h1 second element under header:

<body>
<header>
<h1>My Header</h1>
<nav><h1>My Navigation</h1></nav>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

With H1 first element under header:

<body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>
ˉ厌 2025-01-02 01:23:29

为什么要在页面标题之外定义另一个

标记?大纲视图为您的页面挑选了两个相互竞争的标题,这可能就是被抛弃的原因。从语义上讲,页面的主标题可以存在于页面的

部分中的任何位置,只要其唯一并定义您的主标题即可,尽管这不是

的专有属性。 code>

部分或

标记(意见与该描述不同,但更合理)。正确的大纲在这里定义 http://www.w3.org/TR/html5/ sections.html#outline

您可以使用任何您想要的组合来编写主标题部分,只要正确理解即可。所以;

<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>

很好,因为可以正确理解页眉和页面标题的各个部分。

这是一个在线大纲,您可以用它来测试您的设计。您的标题部分应该首先高于其他所有内容。

Why are you defining another <h1> tag outside of your title of your page? The outliner is picking up two contending titles for your page and is probably why is being thrown off. Semantically speaking, the main title of a page can exist anywhere inside your <header> section of your page as long as its unique and defines your main title, though that is not an exclusive property of the <header> section or the <h1> tag (and opinions vary to that description but it is more sound). Proper outline is defined here http://www.w3.org/TR/html5/sections.html#outline.

You can write your main heading section using any combination you want, as long as it is properly understood. So;

<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>

Is fine, because it is properly understood what the sections of your header and title of your page are.

Here is an online outliner that you can use to test your design. Your title section should be first above everything else.

星星的軌跡 2025-01-02 01:23:29

根据规范

不需要以

开头。

标题元素通常包含该部分的标题
(h1–h6 元素或 hgroup 元素),但这不是必需的。这
header 元素还可以用于包装节的目录,
搜索表单或任何相关徽标。

According to the specs a <header> doesn't need to start with an <h1>.

A header element is intended to usually contain the section's heading
(an h1–h6 element or an hgroup element), but this is not required. The
header element can also be used to wrap a section's table of contents,
a search form, or any relevant logos.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文