html中<h1>是指什么语义,在编写语义HTML时，这是更好的：使用＆lt; h1＆gt;进行范围设定。到＆lt; h6＆gt;使用id属性和＆lt; span＆gt;标记或作用域标签？...

我正在尝试编写高质量的语义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？

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