When writing semantic HTML, which is better: Scoping with <h1> to <h6> tags or scoping with id attributes and <span> tags?

Question

I am trying to write high quality semantic HTML5.

Which of the following two options are better semantically:

---

OPTION 1:

Define the styles by selecting spans using IDs:

%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...

Under this option I would select and style the restaurant-name and offer-title with something like this in SASS:

body {

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

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

---

OPTION 2:

Using h1 to h6 by scoping the styling to within and tags by class or 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...

Under this option I would select and style the restaurant-name and offer-title with something like this in SASS:

body {

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

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

---

With Option 1, I am defining the style using IDs to select the element and style it. With Option 2, I am defining the style by using styles for h1 to h6 again but those styles are scoped to the article and not the entire document. The enclosing page has h1 and h2 tags for the titles and subtitles for the entire.

Are h1 to h6 tags only supposed to be used in one way throughout a whole site? Or is it okay to scope h1 to h6 within major pieces of a site? For example, in the site above the section with id offers is going to be a major piece of the site and there will be other sections of similarly significant importance.

I get the impression that option 1 is more maintainable as it is more descriptive. However, there is nothing keeping me from still using IDs in Option 2 to achieve the same maintainability. Option 2 strikes me as being better insofar as keeping the code lean and my html and css files smaller.

I'm not sure if one is in fact better than the other semantically, especially if I use IDs liberally in both. That still leaves us with the question of which is better semantically for my use case, h1-h6 or spans?

I hope all that made sense. Let me know if I need to be clearer.

Answer 1

This kind of stuff is highly subjective, but here's a few comments.

• If your goal is semantic html, you would do best to forget about styling altogether. Styling happens at a completely different layer, and therefore only serves to confuse the picture. In particular, ids and classes are orthogonal to the element chosen. Choose the element for semantic purposes, then qualify it with id and class to provide the necessary hooks for scripting and styling, or to further refine the semantics with microformats.

• Option 1 has the entire article content in the header. I don't understand what you're trying to achieve there. However, using divs and spans should always be considered a last resort when no other element is available which expresses the semantics you wish to express.

• Whereas Option 1 has insufficient headings (h1-h6) elements, option 2 has too many. For example the headings inside price-details can only apply to (i.e. be a heading to) the main contents of price-details. But price-details doesn't have any main content.

• In option 2, you have offer-title as an h3. It's a matter of opinion whether this is really a heading or not, but if you think it is, but don't think is appropriate as a line in a table of contents, consider wrapping the restaurant name and offer-title in an hgroup element.

• You are also overusing the section element. The idea in HTML5 is that the contents of each sectioning element (including "body") has a header, then the main contents, then a footer. There's no semantic need to wrap the main contents in any element at all, but if for styling or maintenance reasons you want to do so, you should use a "div" element. You shouldn't use "section" in these cases because the "section" element would be expressing the wrong semantics, and in consequence, quite possibly confuse the way that the contents of the "section" are presented to accessibility APIs.

• In HTML5, h1-h6 are effectively "reset" inside each sectioning element, so there is no need to, say, have h1 at the body level mean the same as h1 inside each article. Indeed, they are, by definition different. However, I would suggest that it is good practice that the meanings are consistent for all articles at the same level within a section (or body).