HTML中的语义结构-字幕（HTML5之前）_Html_Semantic Markup

HTML中的语义结构-字幕（HTML5之前）

html

HTML中的语义结构-字幕（HTML5之前）,html,semantic-markup,Html,Semantic Markup,我对HTML还不熟悉，想制作语义正确的HTML，但我发现很难处理似乎只有标题、列表和段落的内容特别是，我找不到一个适合放字幕的地方。我正在写一个博客网站，让我们以它为例：博客标题世界上最好的博客后标题1 后标题2 邮政标题3 从语义上讲，“博客标题”是h1。对我来说，这篇文章的标题是h2是有道理的，但把副标题“世界上最好的博客”和它们放在同一个级别上并不合适我只想使用段落元素，它不像使用标题元素那样让我感到奇怪： <p class="subtitle">the best b

我对HTML还不熟悉，想制作语义正确的HTML，但我发现很难处理似乎只有标题、列表和段落的内容

特别是，我找不到一个适合放字幕的地方。我正在写一个博客网站，让我们以它为例：

博客标题
世界上最好的博客

后标题1
后标题2
邮政标题3

从语义上讲，“博客标题”是h1。对我来说，这篇文章的标题是h2是有道理的，但把副标题“世界上最好的博客”和它们放在同一个级别上并不合适

我只想使用段落元素，它不像使用标题元素那样让我感到奇怪：

<p class="subtitle">the best blog in the world</p>

世界上最好的博客

（“你的答案”、“他的答案”？）如果你在使用HTML5做标记，肯定会是一个不错的选择。

自从五年前这个答案首次发布以来，规范已经发生了很大的变化。正如@Andre Figueiredo在评论中严格指出的那样，对于这个特定的用例非常清楚（重点补充）：

h1

–

h6

元素不得用于标记副标题、副标题、备选标题和标语，除非打算作为新章节或小节的标题

简而言之，在

标题

元素中使用适当分类的

元素：

<header>
    <h1>A BLOG TITLE</h1>
    <p class="tagline">the best blog in the world</p>
</header>

元素在这里有意义吗？不是真的-这不是一段，而是一个标题。

h2

是否按原样工作？不，我们可能会把它与文本本身的字幕混淆。那我们该怎么办？我们使用

h2

并使用

标题

元素将其与

h1

分组，从而消除文本中字幕的歧义。

我认为解决方案应该回答以下问题：“什么对屏幕阅读器有意义？”

博客标题
世界上最好的博客

如果您使用标题作为副标题，则会创建错误的文档大纲

<body>
 <h1>John's blog</h1>
 <h2 class="tagline">the best blog in the world</h2>
 <div>…</div>
</body>

在HTML4.01中有两种方法

1）在主标题中包含副标题，可能用冒号分隔

<body>
 <h1>John's blog: <span class="tagline">the best blog in the world</span></h1>
 <div>…</div>
</body>

（如果紧跟其后的内容也由段落组成，您可以考虑在标语后面使用

hr

元素）

可能会有一个最合适的

子行或子标题
元素即将出现：

在它可用之前，我们只能尝试将H2
（或其他一些Hx元素）或p
，或Q
，作为子行/子标题/副标题等。当它可用时，我相信，原始帖子中建议的内容结构如下（假设子标题
元素就是它的最终形式）：
博客标题
世界上最好的博客
邮政标题1
邮政标题2
邮政标题3

虽然我更喜欢：
<h1>A BLOG TITLE</h1>
<subhead>the best blog in the world</subhead>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

博客标题
世界上最好的博客
邮政标题1
邮政标题2
邮政标题3

在我心目中，一个特定的子标题元素跟随一个特定的Hx元素，这一事实在语义上会将这两个元素配对在一起，就像H2
跟随H1
的H2
（作为随后的兄弟姐妹，而不是孩子或其他类似的后代）将这两个元素关联在一起
在一个绝大多数web开发人员都要求允许他们的页面上的每个Hx元素都是H1
的世界里，OP在这里获得了一些荣誉，因为他们关心正确的标题结构，甚至超越了这一点，并且认识到字幕与标题不同
因为我不能在这里显示呈现的代码，所以位于的代码笔显示了对子标题
元素的测试，并表明，在我看来，它在DOM中的首选位置是作为关联Hx元素的后续同级选择器，而不是作为Hx元素中的子元素。
Hmm。这比h更有意义阅读。我同意-因为字幕更多的是一种描述，而不是任何类型的标题。如果你这样想的话，p
标签是非常有意义的。但是字幕（顾名思义）是一个标题，因此应该是一个h2
元素。在HTML4中，我们不能关联（或结合）在一起hX
我们在HTML5中可以使用的元素，我们必须求助于这个语义稍逊的解决方案。对。我猜“段落”的定义有点限制。更像内容？对于HTML5，这确实创建了一个错误的大纲。以下所有内容都属于“世界上最好的博客”的范围，通常不用于字幕。您应该将两个标题都包含在一个中。W3C建议使用W3C为字幕添加的w3cUse标记删除了hgroup，并使用CSS对其进行了样式设置。请阅读此处的更多内容：-正如@jscheel所说，hgroup已根据@AndreFigueiredo:将答案更新为r从规范中删除参考原答案所依据的2010年工作草案之后对HTML5标准的修改。只有当副标题实际上是来自另一个来源的引用时，q的使用才是正确的。
<body>
 <h1>John's blog</h1>
 <h2 class="tagline">the best blog in the world</h2>
 <div>…</div>
</body>

<body>
 <hgroup>
   <h1>John's blog</h1>
   <h2 class="tagline">the best blog in the world</h2>
 </hgroup>
 <div>…</div>
</body>

<body>
 <h1>John's blog: <span class="tagline">the best blog in the world</span></h1>
 <div>…</div>
</body>

<body>
 <h1>John's blog</h1>
 <p class="tagline">the best blog in the world</p>
 <div>…</div>
</body>

<h1>A BLOG TITLE
<subhead>the best blog in the world</subhead>
</h1>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

<h1>A BLOG TITLE</h1>
<subhead>the best blog in the world</subhead>

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>