Versions Compared

Old Version 6

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Michelle D'Souza

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

classa11y-checks

...

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

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

...

 Code Block
html
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>

...
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
 Code Block
h1 {
    font-style: underline;
    color: red;
}
h2 {
    font-style: italic;
    color: pink;
}

...
 Code Block
html
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>

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