HTML 用于将页面标题显示为选定子菜单项的结构

Question

在类别存档中，我想使用以下布局：

CATEGORY NAME

[All] - Subcategory 1 - Subcategory 2 - Subcategory 3

List of all posts from 'CATEGORY NAME'

突出显示全部。

当有人点击子类别时，该类别会突出显示，他们会看到来自该子类别的帖子：

CATEGORY NAME

All - [Subcategory 1] - Subcategory 2 - Subcategory 3

List of all posts from 'Subcategory 1'

用户非常清楚这意味着什么，后者意味着您在该子类别的页面上。

让搜索引擎清楚这一点的最佳方式是什么？

按照标准做法，'page title' 应该是一个 h1 标签。对于第一种情况，这显然是类别名称。但是，在后一种情况下，它应该是子类别。在导航列表中添加 h1 没有任何意义；但是将 h1 标签保留在顶级类别名称上并不能真正给人留下正确的印象。

Answer 1

我假设您有这样的标记：

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<div><!-- List of all posts --></div>

您说得对，change/add 标题不适合 nav，因为这只会影响 nav 元素本身的轮廓，而不影响 nav 元素的轮廓parent.

一种解决方案可能是相应地更改 h1（例如，"CATEGORY NAME: Subtitle 1"）。但是，只要 nav 是小节，这就没有意义。

另一个解决方案（我认为这个更合适）：添加反映所选页面的 h2：

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<section>
  <h2>Subcategory 1</h2>
  <div><!-- List of all posts from 'Subcategory 1' --></div>
</section>

如果选择 All，你当然可以使用 h2 和 "All posts" 之类的东西，但这可能不是很优雅；相反，您可以考虑在这种情况下省略 section 并使用上面第一个代码段中的标记。

HTML 用于将页面标题显示为选定子菜单项的结构

HTML structure for showing page title as a selected submenu item

html

seo

semantic-markup