Question

我无法理解HTML标题的正确用法。我正在使用书籍和在线资源进行自学，但在如何使用它们方面存在细微的差异。

[1]“请注意，h1标记仅使用一次，作为网页的主标题。h2到h6但是，可以根据需要经常使用，但它们应该按照预期的顺序使用。例如，h4应该是h3的子标题，它应该是{{1}的子标题。 }}“。

OR

[2]“逻辑标题级别反映了它与主要内容的重要性。”

所以问题是：我是否按顺序使用它们h2必须是h4的子标题，h3应该是h2的子标题，依此类推或使用标题水平根据其与主要内容的重要性？

虽然，我已经看到使用这两种方法。然而，第二种方法与文件大纲混淆。只想对此得到一些其他意见。

Answer 1

如果您不遵循order或有超过1个h1标签，您的网页不会中断，但肯定会看起来很难看。

您提到的第1点和第2点不是强制性的，但主要针对search engine optimization(seo)。这是白帽技术之一，它将有助于您的搜索引擎爬虫网页排名。其次，您的网页会更加semantically correct并且会有better looking outline。

Answer 2

对于HTML5：

确定您的文档应该有哪个outline。
使用heading elements (h1-h6)和sectioning content elements (section, article, aside, nav)来完成此大纲。

您引用的两个陈述都不正确或完整：

关于[1]：h1不必每个文档只使用一次（并且不必用于“主标题”）。
关于[2]：规范定义了标题 rank ，它不一定必须是 important 。

当您始终在切片内容元素中包含部分时（规范鼓励这样做），因此每个部分最多只有一个标题then it doesn’t matter which heading rank you choose，但是：

[...]强烈建议作者使用适当等级的标题来表示该部分的嵌套级别。

如果您不总是在适当的时候使用切片内容元素，那么一个部分有多个标题，跳过标题级别（或使用它们来指定“重要性”）可能会导致错误的轮廓。

Answer 3

你使用它们的顺序并不重要。他们说按顺序使用它们的原因可能是因为如果文档正文中的文本比标题大，那看起来会很奇怪。

它与更改font-size和font-weight基本相同，因为除了padding之外，它就是这样做的。

Answer 4

经验法则：如果没有任何CSS看起来很好，那很好。当然，丰富的内容在没有样式的情况下永远不会起作用，但努力使其在没有CSS的情况下看起来尽可能好。

字体大小的级别之间的主要区别。你应该没事，不管你做什么，只要你不这样做

<h6>Page heading</h6>
<h5>Section heading</h5>
<h4>Subsection heading</h4>

或者像这样奇怪的东西。 h1应该是最大和最重要的，而h6（或其他内容，例如<bigheading></bigheading>（是的，CSS将适用于任何标记））如果你设计它们可能会有效对，它们不推荐或语义正确。

Answer 5

对于Lighthouse accessibility audits，标题级别应按降序排列，并使用CSS根据需要以视觉方式对标题进行样式化。而不是跳过标题级别以获得所需的视觉样式。

例如：

import random
def runGame():
    random_number = random.randrange(0, 500)
    chosen_number = int(input("Please pick a number: "))
    running = True

    while running:
        if chosen_number == 500 or chosen_number <= 0 :
            print("Number must be below 500 and above 0.")
            print(random_number)
            chosen_number = int(input("Please pick a number: "))
            continue
        if chosen_number > random_number:
            print("Too high")
            chosen_number = int(input("Please pick a number: "))
        elif chosen_number < random_number: 
            print("Too low")
            chosen_number = int(input("Please pick a number: "))
        else:
            print("Congratulations, you guessed right. The number was " + str(chosen_number) + ".")
        break

    
while gameOn == 1:
    runGame()
    answer = input("Do you want to play again? Y/N ")
    if answer.lower() != "y" or answer.lower() != "yes":
        gameOn = 0

您可以在官方文档中获得有关structured headings的详细信息。

Answer 6

HTML 标题是用 <h1> 到 <h6> 标签定义的。

<h1> 定义了最重要的标题。 <h6> 定义了最不重要的标题。

标题很重要，搜索引擎使用标题来索引您网页的结构和内容。

用户经常通过标题浏览页面。使用标题来显示文档结构很重要。

<h1> 标题应该用于主要标题，然后是 <h2> 标题，然后是不太重要的 <h3>，依此类推。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Answer 7

除非您正在进行一些搜索引擎优化，否则您无需担心使用HTML H1.....H6标题的顺序。但建议首先使用H1标题，但一般情况下，它可以按任何顺序使用。

以下顺序只是按特定顺序显示它们。

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

以下是SnoopCode http://www.snoopcode.com/html/html-headings的一个很好的参考资料以及如何使用它们。

正确使用HTML标题标签

7 个答案: