Separate headline markup order from visual and conceptual weight?

Question

These 2 images illustrate my markup + the visual weight that clearly emphasizes the most important headline of the page. Sometimes the big headline has a little pre-headline .. or.. subheadline above it?

That's the design; my job is bringing that to life in a web browser. The site is live. Now comes the SEO guy, slaps my face and says:

You use h3, then h1, then h3 again. That's just not right and that'll lower our Google rank.

(I highly question that and my feeling kinda was confirmed reading this stack-fred: Do HTML header tags need to go in order)

But let's just assume she is totally right on that for a sec. How would you solve this in markup and css?

What I did in orange in the second picture... it just feels wrong...

You can visit the website here: www.natursteinwerk-villmar.de/

Answer 1

I think this is a great illustration of the difference between semantics and style. Basically: it's too easy to get attached to the idea that h1 should be big, h2 should be smaller, and h6 should be smallest.

Any of these tags can have any font size you want. The difference between them is in the purpose of the content they're introducing.

When designing a blog-ish webpage, I might do something like this:

nav h1{
    font-size:18px;
}

main h1{
    font-size:32px;
    color:black;
}

main h2,
main h1 + p{
    font-size:24px;
    color:grey;
}

I have two h1 of different sizes. You could argue that the main h1 should actually be an h2. But I like h1 because the nav and the main are really separate areas of content.

I also have an h2 and a p that end up the same size. You could argue that p should just be an h2. But I like to use h2 when it's introducing something by itself, rather than having it always stuck to an h1, which feels like wasting HTML tags.

At the end of the day, I'd say just try really hard to completely forget about how things are going to look when you write your HTML.

When I taught web design an exercise I really enjoyed was giving my students a "reset" stylesheet that removed all default browser styles, and asking them to design and write a webpage using only HTML and no CSS. It forced them to really consider what their HTML tags mean without getting hung up on things like, "Oh, if something's going to be bold it has to be in a strong tag."

Thinking that way is really, really hard, but makes for intuitive design and intuitive code.

---

To your case specifically (keeping in mind that I don't speak German):

• I would assume there are several "Seit über 35 Jahren" pages. So even though the font is small, it should be an h1: it's introducing content across multiple pages.
• "Naturstein - Leidenscha" introduces the content on this page specifically, so should be an h2.
• "Das Unternehmen" seems to introduce one particular section on this page, so should be an h3. I would expect there to be other sections on this page introduced the same way.

Plus, having .weight3 and .weight2 and stuff gets all crazy. How are you supposed to remember what the difference is between them? That's the reason we don't use the <big> or <center> tags anymore -- saying a piece of text is "big" or "center" doesn't give you any clue about what that text does.

Answer 2

The orange solution you've noted is definitely worse from a SEO standpoint. Setting a single h1 on the actual main headline is important. If the SEO person insists, it might be best to use something like <span class="h3">Seit...</span> instead of using a heading tag for that at all.

Google itself is also ignoring the order of headings, for example here:

<div class="col-6 section-intro-content">
  <h4 class="section-sub-heading border-blue">
    Advertise
  </h4>
  <h2>
    Advertise with Google.
  </h2>
</div>

If you're unsure, ask the SEO person for a best practice in his/her opinion.

Answer 3

Let’s consider what is useful for your visitors (especially those that rely on the headings/outline, e.g., screen reader users), and forget about "SEO rules".

Whether you want to follow HTML5’s outline algorithm (see tools), or if you just rely on the heading elements (without taking sectioning content element into account), it makes sense to think of it like a ToC.

Your homepage has this outline currently:

1. Document
  1.1 Navigation
2. "Seit über 35 Jahren"
3. "Naturstein – unsere Leidenschaft."
  3.1 "Das Unternehmen"
  3.2 "So arbeiten wir"
  3.3 "Referenzen"
  3.4 "Weitere Objekte"

Is this helpful? I’d say the "Seit über 35 Jahren" section shouldn’t be there. If a user navigates to this heading, there is nothing there -- no content, no sub-headings. It should be part of the content; it should not be a heading. Adding it to the following heading might be possible, but it seems to be more appropriate to make it a subtitle/tagline, e.g.:

<header>
  <p>Seit über 35 Jahren</p>
  <h1>Naturstein – unsere Leidenschaft.</h1>
</header>

That said, is "Naturstein – unsere Leidenschaft." really a useful heading? It seems to be a slogan, or an introduction, but wouldn’t it be more useful to have the actual name ("Natursteinwerk Villmar") as heading? If I’d mark up this site, I’d go for one of these outlines for the homepage:

If using the site name (which could also be the logo with alt) as document heading (for every page; see also):

1. "Natursteinwerk Villmar"
  1.1 Navigation
  1.2 "Das Unternehmen"
  1.3 "So arbeiten wir"
  1.4 "Referenzen"
  1.5 "Weitere Objekte"

(Where the last four sections could be part of the main element. The visual design could stay the same, so "Naturstein – unsere Leidenschaft." could still be in that big font size; the only difference being that it’s now a p.)

If not using a document heading:

1. Document
  1.1 Navigation
2. "Natursteinwerk Villmar"
  2.1 "Das Unternehmen"
  2.2 "So arbeiten wir"
  2.3 "Referenzen"
  2.4 "Weitere Objekte"

If you know which outline you want to have, choosing which heading elements (h1-h6) to use is easy: the first level gets h1, the second level gets h2, … -- headings represent rank, not importance.