Page Comparison

{div:class=a11y-checks}
h2. 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:

{div2:class=two-col-example}
||CSS||HTML||
|{code}
.opening-sentence {
    font-weight: bold;
    color: green;
}
{code}| {code:html}
<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>
{code}|
{div2}

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

{div2:class=two-col-example}
||CSS||HTML||
|{code}
h1 {
    font-style: underline;
    color: red;
}
h2 {
    font-style: italic;
    color: pink;
}
{code}|{code:html}
<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>
{code}|
{div2}

h2. 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).
h2. See Also
[WebAIM's guidelines for creating sematic structure|http://webaim.org/techniques/semanticstructure/]
{div}