HTML5 semantic elements

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

HTML5 semantic elements

semantics = meaning.

Semantic elements = the meaning of elements.

What is a semantic element?

A semantic element can clearly describe its meaning to browsers and developers.

And like < div > and elements are part of no semantic element.

Examples of semantic elements: < form < T Able>, and < IMG >-clearly describes what the elements represent.

Browser support for semantic elements

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support semantic elements.

Note: Internet Explorer 8 and earlier versions of IE do not support this semantic element, but a compatible workaround is provided at the bottom of the article.

New semantic elements in HTML5

Many existing Web sites contain the following HTML code: < div id= "Nav",

, or, to indicate the navigation link, the head, and the tail.

HTML5 provides new semantic elements to identify different parts of a Web page:

< header >

< NAV >

< section >

< aspires >

< aside >

< figcaption >

< figure >

< footer >

HTML5 element

< section > label defines the sections in a document (a segment, section). such as chapters, headers, footers, or other parts of a document.

According to the HTML5 Document: section contains a set of contents and their headings.

Instance

< section >

< h1> WWF

< p>the world Wide Fund for Nature (WWF) is ....

</section >

HTML5

element

< aspires > tags define independent content.

< aspires > element usages:

Forum Post

Blog Post

News Story

Comment

Instance

< aspires >

< H1 >internet Explorer 9 </h1 >

< p > Windows Internet Explorer 9 (abbreviated as IE9) was released to

The public is procures at 21:00 PDT ... </p >

</article >

HTML5

element

< NAV > label defines the part of the navigation link.

< NAV > elements are used to define areas of navigation links for a page, but not all links need to be included in the

Element!

Instance

< NAV >

< a href= "/html/" >html </a > |

< a href= "/css/" > CSS </a > |

< a href= "/js/" >javascript </a > |

< a href= "/jquery/" >jquery </a >

</nav >

HTML5

element

< aside > tags define content outside the main area of the page (such as sidebar).

The contents of the aside label should be related to the contents of the primary zone.

Instance

< p >my Accessibility and I visited the Epcot Center this summer. </p >

< aside >

< H4>epcot Center </H4 >

< p>the Epcot Center is a theme park in Disney World, florida.</p >

</aside >

HTML5

element

< header > element describes the header area of the document

< header > element attention is used to define the presentation area of the content.

You can use multiple < header > elements on the page.

The following example defines the head of the article:

Instance

< aspires >

< header >

< h1>internet Explorer 9 </h1 >

< p > < time pubdate datetime= "2011-03-15" > </time > </>

</header >

< p>windows Internet Explorer 9 (abbreviated as IE9) was released to

The public is procures at 21:00 PDT ... </p >

</article >

HTML5

element

The < Footer > element describes the bottom area of the document.

< footer > elements should contain its containing elements

A footer usually contains the author of the document, copyright information, the terms of use of the link, contact information, etc.

You can use multiple < footer > elements in your document.

Instance

< footer >

< p > Posted by:hege refsnes </p >

< p > < time pubdate datetime= "2012-03-01" > </time > </>

</footer >

HTML5

and elements

< figure > tags specify separate streaming content (images, charts, photos, code, and so on).

The contents of the < figure > element should be related to the main content, but if deleted, the document flow should not be affected.

< figcaption > Label definition < figure > element title.

< figcaption > elements should be placed at the position of the first or last child element of the "figure" element.

Instance

< figure >

< img src= "img_pulpit.jpg" alt= "Pulpit Rock" width= "304" height= "228" >

< FIGCAPTION>FIG1. -The pulpit Pock, Norway.

</figure >

Can we start using these semantic elements?

The above elements are block elements (except

).

In order for these blocks and elements to take effect in all versions of the browser, you need to set the properties in the stylesheet file (the following style code allows older browsers to support the block-level elements described in this chapter):

Header, section, footer, aside, nav, aspires, figure

{

Display:block;

}

Compatibility issues in Internet Explorer 8 and earlier versions of IE

IE8 and earlier IE versions cannot render CSS effects in these elements so that you cannot use < header, < section, < footer, < aside, < NAV, < aspires < figure, or HTML5 elements.

WORKAROUND: You can use HTML5 Shiv JavaScript script to solve the compatibility problem of IE. HTML5 Shiv Download Address: http://code.google.com/p/html5shiv/

After downloading, put the following code into the Web page:

<!--[If LT IE 9] >

< script src= "html5shiv.js" ></script >

<! [endif]-->

The above code loads the html5shiv.js file when the browser is smaller than the IE9 version. You must place it in the element because IE browsers need to render the new elements of these HTML5 after the header has been loaded

Reprint Please specify: http://www.w3cschool.cc/html/html5-semantic-elements.html