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