h2. Don't use a heading tag when you want visual styling
If what you want to add emphasis to text that isn't a heading (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-examples}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}
{section}
{column:width=50%}
*CSS*
{code}
.opening-sentence {
font-weight: bold;
color: green;
}
{code}
{column}
{column}
*HTML*
{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}
{column}
{section}
{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:
{section}
{column}
*CSS*
{code}
h1 {
font-style: underline;
color: red;
}
h2 {
font-style: italic;
color: pink;
}
{code}
{column}
{column}
*HTML*
{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}
{column}
{section}
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/]
|