Web design for the standard of the Consortium

The requirements of the Consortium
There must be doctype.
Character encoding must be specified
Language
HTML tags for each page to specify the lang attribute,< html xml:lang= "en" lang= "en" >
Linear reading
Do not use a table as a layout
When positioning, CSS removal, to see the content of the reading order is consistent with meaningful
Title
The page must contain a TITLE element and should not be empty
Content in title should be less than 60 words
Title should contain the name of the site and the theme of the page
The page must contain at least one H1 and cannot be empty
H1 and title should contain the same vocabulary
H1 and title should use the same word order (word order) Link link ... Link this kind of bar)
H1 content should not only come from the Alt attribute value of the picture
Hn
All HN should be properly nested behind the H1.
Starting from H2, each HN has at least one H (n-1), for example: H3 front at least one h2;h5 front has at least one H4
At least one H1 can be included in the page. (multiple hn are already advocated in HTML5)
H1.. H6 elements should be used in the page to build information
H1.. H6 or function equals (heading|region|main|secondary|navigation|banner|contentinfo|definition|note|seealso| Search) elements should be used in the page to build the information
Each h1...h6 must have textual content
The contents of HN are usually less than 65 words.
In addition to the IMG alt attribute in H2...h6, you should include text content
The title content of the same level should be unique. (For example: cannot have two H1 content all is "Baidu")
Menus and navigation
UL is used as the most suitable element of navigation, followed by OL
Recommended navigation structure:

< h2 class= "offscreen" >

< ul >

< a href= "#" > Column 1
< a href= "#" > column 2
</ul >

/*css style*/

. offscreen {
Position:absolute;
Top: -30em;
Left: -300em;
}

Most Web pages should contain at least one navigation bar
each Map,ul,ol element not before the last H1, if there must be a navigation before the title, please use H2. (see recommended navigation structure)
Each nested table, hotspot area, ol,ul as a navigation, their head to have a H2 (or H2~H6, see recommended navigation structure)
Text style
do not use blink (flash, Flash) and marquee (MOBILE)!!! can cause epilepsy and visual impairment.
prohibit the use of font and center elements, use CSS to implement
Italic style to disable I element, title with H1...h6, words, phrases and sentences to emphasize, please use EM to implement
Bold font style to disable B element, title with H1...h6, To emphasize the words, phrases and sentences, please use EM to implement
underline style to disable the U element, title with H1...h6, words, phrases, and sentences to emphasize, please use strong to implement
list
If you put p in order, you should consider whether you should use an ordered list (OL)
If you arrange P line by row, you should consider whether you should use an unordered list (UL)
If the list nesting depth is greater than 5 layers, you should consider using elements such as H1...H6 to convert. In particular, screen reader users
list nesting more than 5 layers
Link
Avoid using text links that are not understandable from the article context (such as the most commonly used "verbose" text)
If a link contains a picture and text, and the content in alt matches the text (same), Then the ALT attribute should be empty
avoid using pictures less than 16*16 as a link
avoid putting the links together (meaning
ensure that different link addresses are in different text (that is, it's best to avoid duplicate anchor (link) text)
Make sure that the same link address uses the same link text (if multiple links are pointing to http://www.hblangnuo.com, then these links should all use the same anchor (link) text.) If there is a "card sleeve connector", some "stainless steel card sleeve joints", some "card-sleeve joints", so that is not appropriate, and also not suitable for SEO)
to avoid text links less than four words (this is difficult to avoid in Chinese web site)
Internal anchor point to the goal of tabindex= "-1 "。 This is because when an internal link is activated, IE can move the focus
if the anchor target is a or a form that can get focus, if using tabindex= "1", use TAThe B-key switch will be skipped when the
safest TabIndex property is 0
Picture
width or height less than 8px or no alt picture (especially decorative picture) should be removed, CSS technology can be used to control the style
Alt is used to describe the picture, Not just a headline or a noun. The
Alt property should not contain the file name of the picture
the ALT value should not contain lengthy information
each img has alt
You cannot rely on text information on the picture
banner, the text on the header must be reflected in the code br> Objects
Each applet element should have an ALT value
Each EMBED element should have an ALT value
each object should contain textual content
The form
ID must be unique, especially the form
every fieldset should have a A LEGEND element
each label must have text content
Each legend must have a literal content
each valid label (legend + label) must be unique (that is,
label should not be wrapped in select and Tex Tarea element