CODEWITHSUNDEEP
htmlsemantic-markup
BlueCaret
BlueCaret

Reputation: 5030

Semantic HTML: Which is the heading, which is the sub-heading?

I have a situation where I will have a lot of content that has a heading in small text, and directly below it will be a longer heading (sometimes even a sentence) in much larger text, followed by the standard paragraph text. Here is an example of what I'm talking about:

body {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
h2 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.tagline {
  margin: 0 0 20px 0;
  font-size: 24px;
}
<h2>Section Title</h2>
<p class="tagline">A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>

My initial instinct is to make the first part the heading element via <h2> and make the second section into a paragraph (as you can see in my example). But would this be correct? The larger text is definitely what people will most likely read first, but the smaller text is a better title for the section.

My question is am I good with this or should I swap it and make the small text a paragraph and the large text the heading tag?

In addition, I'm wondering if I should also be wrapping these two "headings" into a <header> tag as well?

Upvotes: 0

Views: 403

Answers (3)

Ace of Cookies
Ace of Cookies

Reputation: 13

Reading the HTML spec on whatwg.org, this seems to be exactly what the hgroup element is for. In your case, the "correct" markup would be something like:

<hgroup>
    <h2>Section Title</h2>
    <h3>A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</h3>
</hgroup>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>

The hgroup tag basically lets you write more than one header element while only "counting" the first one for document outline purposes. The subsequent ones are only aesthetic. Example use cases according to the spec are "subtitles", "taglines" etc.

Upvotes: 1

aditya
aditya

Reputation: 333

Why not use hierarchy of headings? In your example, if tag line is a heading you should put that behind h3.

Screen readers don’t present CSS to users so ask yourself, “does the content ‘structure’ still make sense when css is reduced?” If you use proper semantics then the structure will be preserved but with mocking styles (like heading style applied to a p tag) will lose its meaning when CSS is removed. Meaning screen readers would just present the tag line as paragraph text vs. presenting it as a sub heading. People navigate or jump through headings using screen readers so p tag tag line will not be in their heading navigation.

Does that make sense? Happy to clarify anything confusing.

Upvotes: 0

Nithin Suresh
Nithin Suresh

Reputation: 380

Main Rule when dealing with HTML semantics is never work on the presentation part with HTML. That's the reason why we do have CSS.

Present days all websites are modifying there HTML semantics to meet WCAG standards. In simple words, those are some standards which when followed by developers helps people with accessibility problems access the web with ease.

For more details : https://www.w3.org/WAI/standards-guidelines/wcag/

So I suggest keeping the heading and sub-heading in the right way with right semantics. Think of a presentation in terms of CSS.

I'm not sure if this is the answer you are looking for, but I hope this helps to make a decision..

Upvotes: 1

Related Questions