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