I have noticed a popular trend in web design which involves sections of content being started with what looks to be smaller sub heading something like <h3>, <h4> or <h5> and then followed by a bigger heading <h2>.
My question is, what is the best way to deal with this visual structure and will having a structure like this hurt your SEO?
<h5>Contact Us</h5>
<h2>Get started with your next project in minutes!<h2>
<p>Some text here ...</p>
Here are some examples where the header structure is similar to above (smaller before bigger):
If that structure is bad for SEO, then it seems like a simple solution is to make it purely visual, mimicking a sub header with styling on a span or paragraph like these sites do:
- https://www.andrejilderda.nl/
- https://nightwatch.io/
- https://www.swingvy.com/
- https://www.figma.com/
My only concern with that approach is because your section sub heading is no longer an actual header you will miss out on ranking important and relevant keyword information for that section. Is this correct something to be worried about?
There is one last solution I stumbled upon that involves using headings for both but in reverse hierarchy so a <h3> is first but styled to be smaller, followed by a visually bigger <h4> which provides the addition context.
Anyone have thoughts, expertise or resources on the matter?
