HTML5中的h2-h6标题有什么用途? [英] Is there any purpose for h2-h6 headings in HTML5?

查看:181
本文介绍了HTML5中的h2-h6标题有什么用途?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对在html5中使用h1-h6标题和section感到困惑. 这两个例子中哪一个是正确的?

I'm confused with using h1-h6 headings and section in html5. Which of these two examples is correct?

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h2>Introduction</h2>
      <p> ... text ... </p>
    </section>
    <section>
      <h2>The problem itself</h2>
      <p> ... text ... </p>
    </section>
  </article>
</body>

对我来说,这很自然,将文章分成多个部分,并根据整个文章标题层次结构给它们指定标题,但是

This seems natural to me, separate article into sections and give them headings according to whole article heading hierarchy, but

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h1>Introduction</h1>
      <p> ... text ... </p>
    </section>
    <section>
      <h1>The problem itself</h1>
      <p> ... text ... </p>
    </section>
  </article>
</body>

我已经看到这花费了很多时间,并且阅读到每个部分都应该具有自己的标题层次结构.

I've seen this used lot of time and read that every section should have it's own heading hierarchy.

如果第二个示例是正确的示例,那么从h2h6的标题的目的是什么?如果每个h2都可以被分隔为新的section,并且应该具有以h1开头的自己的标题层次结构,那么是否应该使用比h1更低的标题(因为它们都可以拥有自己的带有标题的部分) ?

If the second example is the right one, what is the purpose of having headings from h2 to h6? If every h2 can be separated in new section and should have it's own heading hierarchy starting with h1 again, should there ever be used lower headings than h1 (because they all can have it's own section with heading)?

推荐答案

HTML 5规范说:

The HTML 5 spec says:

部分可以包含任何级别的标题,但强烈建议作者仅使用h1元素,或将适当级别的元素用于该部分的嵌套级别.

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

还鼓励作者在节内容的元素中显式包装节,而不是依靠节内容中的一个元素具有多个标题而生成的隐式节.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

http://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

因此,我认为您的两个示例都不错:

So I think both your examples are fine:

  • 在第一个示例中,每个<section>的标题都有一个<h2>标记,由于每个部分都嵌套在文章的第二级,因此该标记是适当的.
  • 在第二个示例中,每个<section>都使用<h1>标记,因为<section>标记为
  • In your first example, each <section> has an <h2> tag for its heading, which is appropriate as each section is nested at the second level within the article.
  • In your second example, each <section> uses an <h1> tag, which is appropriate as the <section> tag is sectioning content.

在这两种情况下,您都将文章部分明确包装在<section>标记中.

And in both cases, you’ve explicitly wrapped the article sections in a <section> tag.

我认为<h2>-<h6>保持向后兼容和灵活性.允许使用<h2>-<h6>进行HTML4样式的分段,这意味着不必更改现有的HTML4内容即可使其符合HTML5的分段规则.这也意味着,无论出于何种原因,如果在给定的情况下使用旧版分节更为理想,那么作者可以.

I think <h2>-<h6> are kept around for backwards-compatibility and flexibility. Allowing HTML4-style sectioning with <h2>-<h6> means that existing HTML4 content doesn’t have to be altered to fit in with HTML5’s sectioning rules. It also means that if, for whatever reason, in a given situation it’s more optimal to use old-style sectioning, then authors can.

HTML供全球通用使用.一点灵活性确实可以帮上忙.

HTML is intended for worldwide general-purpose use. A bit of flexibility really helps with that.

这篇关于HTML5中的h2-h6标题有什么用途?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆