2

我正在尝试编写高质量的语义 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，将样式限定在 inside 并按类或 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
    %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 offer 的部分将成为该网站的主要部分，并且还会有其他类似重要的部分。

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

我不确定一个实际上是否比另一个在语义上更好，特别是如果我在两者中都大量使用 ID。这仍然给我们留下了一个问题，即对于我的用例，h1-h6 还是跨度在语义上更好？

我希望这一切都说得通。让我知道是否需要更清楚。

4

1 回答 1

8

这种东西是非常主观的，但这里有一些评论。

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

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

  • 选项 1 的标题 (h1-h6) 元素不足，而选项 2 的元素太多。例如，price-details 中的标题只能应用于（即作为标题）price-details 的主要内容。但是 price-details 没有任何主要内容。

  • 在选项 2 中，您将 offer-title 作为 h3。这是否真的是一个标题是一个见仁见智的问题，但如果你认为它是，但不认为它适合作为目录中的一行，请考虑将餐厅名称和 offer-title 包装在一个 hgroup 元素中.

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

  • 在 HTML5 中，h1-h6 在每个分节元素内有效地“重置”，因此没有必要在正文级别设置 h1 与每篇文章中的 h1 相同。事实上，它们在定义上是不同的。但是，我建议在一个部分（或正文）内同一级别的所有文章的含义是一致的，这是一种很好的做法。

于 2010-10-14T00:19:08.393 回答