css - html 语义/css

Question

在设置样式时遇到了一个小问题，所以我停止考虑我的语义标记。这是我目前的状态。

H1 - site logo 
H2 - page title - eg: contact page
H3 - title of each shop
H4 - Description title

现在是我不确定的部分: H4 - 重复并用于，

1) "Open Close" title
2) "Services" title
3) "Location" title
4) "Ratings" title 
5) "Comments" title 

1 到 5 都是信息的标题，你可以看到我目前每个商店有 6 个 H4 元素， 2 3 4 和 5 具有相同的样式，1 具有不同的样式，描述标题的 H4 也具有不同的样式。

一种方法是使用最多 H6，但“打开关闭”的 H5 字体大小较小，这意味着 H5 将小于 H6。与其简单地围绕当前代码设置样式，我更愿意编辑元素以改进我的代码的语义。谢谢

Answer 1

如果您愿意进入 HTML5 领域，可以将内容放入 <hgroup>像这样:

<header>
<hgroup>
    <h1>Site Title</h1>
    <h2>Sub Heading</h2>
  </hgroup>
</header>

<section>
  <hgroup class="shop">
    <h1>Shop Name/Title</h1>
    <h2>Description</h2>
    <h3>Open/Close</h3>
    <h3>Services</h3>
    <h3>Etc.</h3>
  </hgroup>
</section>

使用 <hgroup>将允许您重复使用您的 <h>语义元素。