【问题标题】:Is it ok to use Headings beyond H6 in HTML and CSS? [duplicate]可以在 HTML 和 CSS 中使用 H6 以外的标题吗? [复制]
【发布时间】:2016-08-06 20:19:42
【问题描述】:

标题一直是 H1 到 H6,但 H7、H8...H137 等呢?令我惊讶的是,它们都有效!您可以根据需要设置任何标题编号的样式。我在几个现代浏览器中尝试过它们,没有任何问题。你问我为什么要使用它们……好吧,我可以输入<span class="h7">Hello World</span> 之类的东西,而不是输入<h7>Hello world</h7> 并得到相同的结果。有没有地方写过这个?这样做有错吗?是否有比 IE8 更新的浏览器不支持它?

【问题讨论】:

  • 六级标题对任何人来说都足够了。如果您有更多级别的真实用例,您应该在github.com/w3c/html/issues 处提出问题

标签: html css html-heading


【解决方案1】:

没有。只有前 6 个是标准的。

The h1, h2, h3, h4, h5, and h6 elements

请注意,不需要额外的,因为它们代表各自部分的标题。因此,您可以使用嵌套部分,而不是使用排名较低的标题。

就它们各自的文档大纲(它们的标题和节结构)而言,这两个 sn-ps 在语义上是等价的:

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
  <h2>Canvas coordinates</h2>
  <h3>Canvas coordinates diagram</h3>
  <h2>Paths</h2>
</body>
<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
  <section>
    <h1>Canvas coordinates</h1>
    <section>
      <h1>Canvas coordinates diagram</h1>
    </section>
  </section>
  <section>
    <h1>Paths</h1>
  </section>
</body>

【讨论】:

  • “语义等价” 是的,也许。但辅助工具不会对它们一视同仁,因此最新的 HTML 5 草案建议反对这种做法,所以我们也应该劝阻它。
【解决方案2】:

标题的主要目的是它们的语义,因为它们指示网站的简短而重要的部分,我使用屏幕阅读器用户来快速了解网站内容并浏览它。尤其是后者对于屏幕阅读器用户很重要。

由于 h1-h6 表示不同的重要性,并且作为基本规则,您应该尝试使用尽可能少的级别(h1-h3,最大为 h4),使用 h7-hxxx 没有意义。

h7-hxxx 不是有效的 html 标题元素,仅仅因为浏览器试图将它们解释为无语义的 divs 而不会中断,这并不意味着它们“工作”。他们没有,因为他们没有语义

TLDR:绝对不要使用它们。

编辑:您提到,IE9+ 不会“中断”。这主要是因为 html5 导致浏览器将未知元素解释为无意义和无语义元素(就像普通的 divs 一样)。

【讨论】:

    【解决方案3】:

    这可能不是根据标准,但您可以定义自己的元素。它与h7-h200无关,但与任何词有关。您可以使用例如blablahouhouhou。代码在这里:

    <style type="text/css">
        houhouhou   {color: green}
        blabla { color: blue}
    </style>
    
    <houhouhou>Hello</houhouhou>
    <blabla>World</blabla>
    

    Code for testing here.

    但与其他人一样,我也建议使用带有 divspan 的经典 css 类:

    <style type="text/css">
        .houhouhou   {color: green}
        .blabla { color: blue}
    </style>
    
    <div class="houhouhou">Hello</div>
    <div class="blabla">World</div>
    

    【讨论】:

      【解决方案4】:

      Html 规范指定 H1 和 H6(含)之间的标题标签。除此之外的任何东西都可能在浏览器中按预期工作,但由于它不是 html 规范的一部分,浏览器可以按照他们想要的方式解释(可能不同),所以我不会完全依赖它。这将适用于不属于 html 规范的任何内容。但是,H 标签很容易理解,因此我认为浏览器应该以类似的方式正确解释 H6 以上的标签。

      【讨论】:

      • “我相信浏览器应该以类似的方式正确解释 H6 以上的那些标签。”他们不会。它们会以不同的方式解析、不同的样式,最重要的是,将以不同的方式呈现给可访问性 API,
      • 我说相似,不一样
      【解决方案5】:

      拥有诸如 &lt;h7&gt;&lt;/h7&gt; 之类的自定义标签将被视为内联 div 元素并会呈现,但我建议不要这样做,因为它们是用于描述标题层次结构的非标准标签,因此屏幕阅读器和解析器可能没有意义其中。坚持使用标头标签的标准语义元素。具有非常深的标题标签层次结构通常表明您在语义上构建布局的方式存在问题。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-06-30
        • 1970-01-01
        • 1970-01-01
        • 2011-01-11
        • 1970-01-01
        • 1970-01-01
        • 2017-04-11
        相关资源
        最近更新 更多