在编写语义HTML时,哪个更好:使用<h1>到<h6>标签进行范围设定或使用id属性和<span>标签进行范围界定？

Question

我正在尝试编写高质量的语义HTML5.

以下两个选项中的哪一个在语义上更好:

---

选项1:

通过使用ID选择跨度来定义样式:

%body
  %header#global-header
    %h1
      My Startup Name
    %h2
      Home of the best offers in the Motor City

  %section#offers
    %h1
      Today's Offers
    %h2
      Here are the current offers for your city:

    %article.offer
      %header.offer-header
        %span.restaurant-name 
          Some Burger Joint
        %span.offer-title 
          80% off a burger
        %section.price-details
          %ul
            %li.original-price
              %p
                Original Price
              %p
                $30
            %li.offer-price
              %p
                Price
              %p
                $10
        %section.offer-description
          %p
            Some burger joint is the most popular burger joint in the Motor City. Buy a big burger or a bunch of belly bombers.

    %article.offer
      ...another offer...

在这个选项下,我会在SASS中选择并设置类似这样的餐馆名称和商品名称:

body {

  h1 { font-size: 3em; }
  h2 { font-size: 2em; } 

  article {
    .restaurant-name { font-size: 1.25em; }
    .offer-title { font-size: 1.5em; }
  }
}

---

方案2:

使用h1到h6通过将样式限定在内部并按类或标记标记:

%body
  %header#global-header
    %h1
      My Startup Name
    %h2
      Home of the best offers in the Motor City

  %section#offers
    %h1 
      Today's Offers
    %p
      Here are the current offers for your city:  
    %article.offer
      %header.offer-header
        %h2.restaurant-name 
          Some Burger Joint
        %h3.offer-title 
          80% off a burger
      %section.price-details
        %ul
          %li.original-price
            %h4
              Original Price
            %h4
              $30
          %li.offer-price
            %h4
              Price
            %h4
              $10
      %section.offer-description
        %p
          Some burger joint is the most popular burger joint in the Motor City. Buy a big burger or a bunch of belly bombers.

    %article.offer
      ...another offer...

在这个选项下,我会在SASS中选择并设置类似这样的餐馆名称和商品名称:

body {

  h1 { font-size: 3em; }
  h2 { font-size: 2em; } 

  article {
    %h1 { font-size: 1.25em; }
    %h2 { font-size: 1.5em; }
  }
}

---

使用选项1,我使用ID定义样式以选择元素并设置样式.使用选项2,我通过再次使用h1到h6的样式来定义样式,但这些样式的范围是文章,而不是整个文档.封闭页面包含整个标题和副标题的h1和h2标签.

h1到h6标签是否只应该在整个网站中以一种方式使用？或者可以将h1范围扩展到网站主要部分中的h6吗？例如,在上面的网站中,带有id优惠的部分将成为网站的主要部分,并且还会有其他部分同样具有重要意义.

我得到的印象是选项1更易于维护,因为它更具描述性.但是,没有什么能阻止我在选项2中使用ID来实现相同的可维护性.选项2让我觉得更好,因为保持代码精益,我的html和css文件更小.

我不确定一个实际上是否比其他语义更好,特别是如果我在两者中都使用ID.这仍然留给我们的问题是哪个在语义上更好用于我的用例,h1-h6或spans？

我希望所有这些都是有道理的.如果我需要更清楚,请告诉我.

Answer 1

这种东西非常主观,但这里有一些评论.

• 如果您的目标是语义html,那么您最好完全忘记样式.样式发生在完全不同的层,因此只会混淆图片.特别是,id和类与所选元素正交.选择用于语义目的的元素,然后使用id和class对其进行限定,以便为脚本和样式提供必要的钩子,或者使用微格式进一步细化语义.

• 选项1在标题中包含整篇文章内容.我不明白你想要在那里实现什么.但是,当没有其他元素可用来表达您希望表达的语义时,使用div和span应始终被视为最后的手段.

• 选项1的标题(h1-h6)元素不足,选项2的数量太多.例如,价格细节内的标题只能适用于价格细节的主要内容(即标题).但价格细节没有任何主要内容.

• 在选项2中,您将要约标题作为h3.这是一个关于这是否真的是一个标题的问题,但是如果您认为它是,但不认为适合作为目录中的一行,请考虑将餐馆名称和商品名称包装在hgroup元素中.

• 您也过度使用了section元素.HTML5中的想法是每个分区元素(包括"body")的内容都有一个标题,然后是主要内容,然后是页脚.根本没有语义需要将主要内容包装在任何元素中,但如果出于样式或维护的原因,您应该使用"div"元素.在这些情况下你不应该使用"section",因为"section"元素将表达错误的语义,因此,很可能会混淆"section"的内容呈现给可访问性API的方式.

• 在HTML5中,h1-h6在每个切片元素中被有效地"重置",因此不需要,例如,在身体水平上的h1与每篇文章中的h1相同.实际上,根据定义,它们是不同的.但是,我认为,对于一个部分(或正文)内同一级别的所有文章,其含义是一致的,这是一种好的做法.