If you need a heading to look bigger or smaller or to match some specific style requirements, use CSS to override the default styles. A variety of helper classes can be applied to achieve the desired styling without altering the programmatic hierarchy.
.h1 = Same styling that is applied to <h1>
.h2 = Same styling that is applied to <h2>
.h3 = Same styling that is applied to <h3>
.h4 = Same styling that is applied to <h4>
.h5 = Same styling that is applied to <h5>
.h6 = Same styling that is applied to <h6>You need to code an h3 because of the document hierarchy but your design needs it to look like an h4
<h3 class="h4">I'm an h3 but look like an h4</h3>ALWAYS use a heading tag if your text is used as a heading. If your text is not used as a heading but the design dictates that it styles similarly to a heading you can apply the heading helper classes to other elements besides headings. But again, if the text is serving the purpose of a heading use a semantic heading tag!
<div class="h3">I'm text that is not used as a heading but I look like an h3</div>
<!-- .h1 -->
<h6 class="h1">Heading 6 styled like heading h1 using .h1 class</h6>
<!-- .h2 -->
<h6 class="h2">Heading 6 styled like heading h2 using .h2 class</h6>
<!-- .h3 -->
<h6 class="h3">Heading 6 styled like heading h3 using .h3 class</h6>
<!-- .h4 -->
<h6 class="h4">Heading 6 styled like heading h4 using .h4 class</h6>
<!-- .h5 -->
<h6 class="h5">Heading 6 styled like heading h5 using .h5 class</h6>
<!-- .h6 -->
<h5 class="h6">Heading 5 styled like heading h6 using .h6 class</h5>
<!-- element.helper -->
<div class="h4">Div styled like heading h4 using .h4 class</div>