语义HTML5的标头 [英] Header in semantic HTML5

问题描述

我正在设计HTML页面的语义标记.该页面包含一个主要内容块和一个侧栏.侧栏中有几个独立的块，例如最新新闻，链接，统计信息等.每个块都有一个带有块名的标题:"Statistics"，"Links"等.

问题.如果我在header标记中放置一个块名，如<section id="News"><header>News</header><ul>...</ul></section>，那么在语义上正确使用标记header.

将节的名称改为放置在<h*>标记中在语义上是正确的吗?

选项之间有什么区别，为什么要使用其中一个选项?

解决方案

在使用切片元素(在您的情况下为section，但您可能希望使用aside)时，这些部分已经具有隐式轮廓项.

您可以使用标题(h1-h6)提供显式条目.

是的，您应该使用标题元素(h1-h6)来指定每个块的标题(→部分).

此外，您可以使用header元素.但这是不需要的(如果标头包含的标题不只是标题，则可以使用它). >

所以我会选择:

<aside>
  <h1>News</h1>
  <!-- content -->
</aside>

<aside>
  <h1>Statistics</h1>
  <!-- content -->
</aside>

对于复杂的标头:

<aside>
  <header>
    <h1>News</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

<aside>
  <header>
    <h1>Statistics</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

I am designing a semantic mark-up of my HTML page. The page consists of a main content block and of a side bar. There are several independent blocks in the side bar like latest news, links, statistics e.t.c. Each block has a header with a block name: "Statistics", "Links" e.t.c.

The question. Is it a semanticly correct usage of the tag header if I put a block name in the header tag like <section id="News"><header>News</header><ul>...</ul></section>.

Is it a semanticly correct to put the name of the section in <h*> tag instead?

What is the difference between the options and why one should use one of the options?

解决方案

As you are using a sectioning element (section in your case, but you might want to use aside), these sections already have an implicit outline entry.

You can provide an explicit entry by using a heading (h1-h6).

So yes, you should use a heading element (h1-h6) for specifying the heading of each block (→ section).

In addition, you may use a header element. But this is not required (it makes sense to use it if your header consists of more than just the heading).

So I’d go with:

<aside>
  <h1>News</h1>
  <!-- content -->
</aside>

<aside>
  <h1>Statistics</h1>
  <!-- content -->
</aside>

And for complex headers:

<aside>
  <header>
    <h1>News</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

<aside>
  <header>
    <h1>Statistics</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

这篇关于语义HTML5的标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！