How to fix your headings
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).