Don't use a heading tag when you want visual styling

If you just want to add emphasis to something (such as an introductory sentence to a paragraph), don't use a heading tag. Instead, create a CSS class and use it with a span or div, as shown below:

CSS

HTML

.opening-sentence {
    font-weight: bold;
    color: green;
}

<p><span class="opening-sentence">Don't use headings for
emphasis.<span> Save the headings for real headings.
Use CSS classes for visual stylings.</p>

Don't use visual styling when you want a heading

If your text really is a section heading, then use a heading tag. If the default styling for a given heading level is not to your liking, just override it with a CSS rule, as shown below:

CSS

HTML

h1 {
    font-style: underline;
    color: red;
}
h2 {
    font-style: italic;
    color: pink;
}

<h1>What Not To Do</h1>
<h2>Don't Use Styles Instead Of Headings</h2>
<p>If something really is a heading, use a heading tag.</p>

Don't skip heading levels

If you have a section that is a sub-section of an <h2>, then use <h3> for the heading, not <h4>. If the visual styling for <h3> is not to your liking, then just override it with a CSS style (see above).

See Also

WebAIM's guidelines for creating sematic structure

Browser not supported