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

Semantic structure in HTML - Subtitles (Pre-HTML5)

提问by Jono

I'm new to HTML and want to make semantically correct HTML, however I'm finding it hard to work with what seems to be only headings, lists and paragraphs.

我是 HTML 的新手，想要制作语义正确的 HTML，但是我发现很难处理似乎只有标题、列表和段落的内容。

Particularly, I can't find a place that makes sense for subtitles. I'm writing a blog site so lets use that as an example:

特别是，我找不到对字幕有意义的地方。我正在写一个博客网站，所以让我们以它为例：

A BLOG TITLE
the best blog in the world

A BLOG TITLE
世界上最好的博客

post_title1
post_title2
post_title3

post_title1
post_title2
post_title3

Semantically 'A BLOG TITLE' is h1. It makes sense to me that the post_titleX are h2, but it doesn't feel right for the subtitle - 'the best blog in the world' to be classed at the same level as them.

语义上的“博客标题”是 h1。对我来说 post_titleX 是 h2 是有道理的，但是将副标题 - “世界上最好的博客”归入与它们相同的级别感觉不合适。

回答by You

The specification has changed quite a bit since the working draftthat was up-to-date when this answer was first posted five years ago. As @Andre Figueiredorighly points out in the comments, the published HTML5 specificationis very clear on this specific use case (emphasis added):

自从五年前首次发布此答案时最新的工作草案以来，规范已经发生了很大变化。正如@Andre Figueiredo在评论中正确指出的那样，已发布的 HTML5 规范对这个特定用例非常清楚（添加了重点）：

h1–h6elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

h1–h6元素不得用于标记副标题、副标题、替代标题和标语，除非打算作为新章节或小节的标题。

In short, use an appropriately classified pelement inside a headerelement:

简而言之，在p元素内使用适当分类的header元素：

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

---

---

In HTML5, there's an obvious solution:

在 HTML5 中，有一个明显的解决方案：

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

When using HTML4 I personally tend to replace the h2with p class="tagline", or something similar.

Edit:To motivate the use of h2in HTML5, think of the title of Dr. Strangelove:

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

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

使用 HTML4 时，我个人倾向于替换h2withp class="tagline"或类似的东西。

编辑：为了激发h2在 HTML5 中的使用，想想Strangelove 博士的标题：

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

Does a pelement make sense here? Not really — it's not a paragraph, it's a title. Does h2work as-is? No, we might confuse it with subtitles of the text itself. So what do we do? We use h2and group it with h1using a headerelement, thereby getting rid of the ambiguity concerning the subtitles in the text.

难道一个p在此元素有意义吗？不是真的——它不是一个段落，而是一个标题。不h2工作的，是什么？不，我们可能会将它与文本本身的字幕混淆。那么我们该怎么办？我们使用h2和组它h1使用header元素，从而摆脱关于文本字幕的模糊性。

回答by BoltClock

I would just use a paragraph element, it doesn't feel as odd to me as using a heading element:

我只会使用一个段落元素，它对我来说并不像使用标题元素那么奇怪：

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

You's answer("your answer", "his answer"?) would certainly be the way to go if you're marking up using HTML5.

如果您使用 HTML5 进行标记，那么您的答案（“您的答案”、“他的答案”？）肯定是要走的路。

回答by Christian Ziebarth

There may be a SUBLINEor SUBHEADelement coming soon that will be most appropriate:

可能即将推出最合适的SUBLINEorSUBHEAD元素：

http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/

http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/

Until it becomes available we are left with trying to make H2's (or some other Hxelement) or P's or Q's act as sublines/subheads/subtitles, etc. When it becomes available the structure of the content suggested in the original post will, I believe, be as follows (let's assume the SUBHEADelement is what it ends up being):

在它可用之前，我们只能尝试使H2's（或其他一些 H x元素）或P's 或Q's 充当副线/副标题/副标题等。当它可用时，原始内容中建议的结构我相信，帖子将如下（让我们假设SUBHEAD元素是它最终的样子）：

<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>

Although I would prefer it to be:

虽然我更喜欢它是：

<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>

The mere fact that a particular SUBHEADelement follows a particular Hxelement in my mind would semantically pair those two elements together, just as an H2(as a subsequent sibling, rather than as a child or other such descendant) following an H1associates those two elements.

在我的脑海中，特定SUBHEAD元素跟随特定的 H x元素这一事实将在语义上将这两个元素配对在一起，就像一个H2（作为后续兄弟姐妹，而不是作为孩子或其他此类后代）跟随 anH1关联这两个元素。

In a world where the vast majority of web developers are clamoring to be allowed to make every single Hxelement on their page be an H1the OP here gets some credit for being concerned with proper heading structure and even going beyond that and recognizing that subtitles are not the same as headers.

在一个绝大多数 Web 开发人员都要求允许他们页面上的每个 H x元素都成为一个世界中的世界中，H1这里的 OP 因关注正确的标题结构，甚至超越该结构并认识到字幕是与标题不同。

Since I can't show rendered code here the Codepen at http://codepen.io/WebDevCA/pen/wzyIHshows a test of the SUBHEADelement and shows that, in my mind, the preferred positioning of it in the DOM is as an immediately subsequent sibling selector to its associated Hxelement rather than as a child element inside the Hxelement.

由于我无法在此处显示呈现的代码，因此http://codepen.io/WebDevCA/pen/wzyIH 上的 Codepen显示了对SUBHEAD元素的测试，并表明在我看来，它在 DOM 中的首选定位是紧随其后的兄弟选择器指向其关联的 H x元素，而不是作为 H x元素内的子元素。

回答by unor

If you'd use a heading for the subtitle, a wrong document outline would be created.

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

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

Here all following content (until a next h1/h2, if any) would be in the scope of the tagline instead of the actual blog title. Which is notwhat we want for a subtitle.

此处所有以下内容（直到下一个h1/ h2，如果有）将在标语的范围内，而不是实际的博客标题。这不是我们想要的字幕。

in HTML5

在 HTML5 中

(UPDATE: The hgroupelement got removed from HTML5. See my answer to another question about how to mark up subheadings in HTML5now.)

（更新：该hgroup元素已从 HTML5 中删除。请参阅我对另一个有关如何现在在 HTML5 中标记副标题的问题的回答。）

For HTML5, there is a new element especially for this use case: hgroup

对于 HTML5，有一个新元素特别适用于这个用例： hgroup

The element is used to group a set of h1–h6elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

当标题具有多个级别（例如副标题、替代标题或标语）时，该元素用于对一组h1–h6元素进行分组。

By using hgroup, only oneof the child headings counts for the document outline.

通过使用hgroup，文档大纲中只有一个子标题计数。

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

in HTML 4.01

在 HTML 4.01 中

There would be two ways

会有两种方式

1) Include the subtitle in the main heading, probably separated by a colon.

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

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

2) Use a p(or if it's not a paragraph, div) for the subtitle:

2) 使用 a p（或者如果它不是一个段落，div）作为副标题：

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

(if the immediately following content would consist of paragraphs, too, you could think of using the hrelement after the tagline)

（如果紧随其后的内容也由段落组成，您可以考虑hr在标语之后使用该元素）

回答by srcspider

I think the solution should answer the following question: "What would make sense to a screen reader?"

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

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