Question

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

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

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

post_title1
post_title2
post_title3

语义上'博客标题'是h1。对我来说，post_titleX是h2是有意义的，但是对于副标题感觉不合适 - “世界上最好的博客”被归类为与他们相同的级别。

Answer 1

自从the working draft这个答案于五年前首次发布以来，该规范发生了很大的变化。正如 @Andre Figueiredo 在评论中高度指出的那样，the published HTML5 specification对这个特定用例非常清楚（强调增加）：

h1 - h6元素不得用于标记副标题，字幕，替代标题和标语，除非打算作为新章节或小节的标题。< / p>

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

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

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

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

使用HTML4时，我个人倾向于将h2替换为p class="tagline"或类似内容。

修改：为了激发在HTML5中使用h2，请考虑博士的标题。奇爱博士：

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

p元素在这里有意义吗？不是真的 - 这不是一个段落，它是一个标题。 h2按原样工作吗？不，我们可能会将它与文本本身的字幕混淆。那么我们该怎么办？我们使用h2并使用h1元素将其与header分组，从而消除了与文本中字幕相关的歧义。

Answer 2

我只想使用一个段落元素，对我来说，使用标题元素并不奇怪：

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

You's answer（“你的回答”，“他的答案”？）如果你使用HTML5进行标记，那肯定是要走的路。

Answer 3

可能会有一个最适合的SUBLINE或SUBHEAD元素：

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

在可用之前，我们只会尝试制作H2（或其他一些H x 元素）或P或Q当它变得可用时，原始帖子中建议的内容结构我将相信如下（让我们假设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>

虽然我更喜欢它：

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

在我的脑海中，特定的SUBHEAD元素遵循特定的H x 元素的这一事实将在语义上将这两个元素组合在一起，就像H2一样（作为后来的兄弟，而不是作为一个孩子或其他这样的后代）H1跟随这两个元素。

在绝大多数网络开发人员都要求允许他们的页面上的每个单独的H x 元素都是H1的世界中，OP在这里获得了一些荣誉关注正确的标题结构，甚至超越它，并认识到字幕与标题不同。

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

Answer 4

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

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

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

HTML5中的

（更新：已将hgroup元素从HTML5中移除。请参阅我现在关于how to mark up subheadings in HTML5的另一个问题的回答。）

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

当标题有多个级别时，该元素用于对一组h1 - h6元素进行分组，例如子标题，替代标题或标语。

使用hgroup时，只有一个的子标题会计入文档大纲。

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

HTML 4.01中的

有两种方式

1）在主标题中加入字幕，可能用冒号分隔。

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

2）使用p（如果不是段落，div）作为副标题：

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

（如果以下内容也包含段落，您可以考虑在标语后使用hr元素）

Answer 5

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

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

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

5 个答案: