HTML5 semantic elements

HTML5 semantic elements

Meaning = meaning.

Meaning of semantic element = element.

What is a semantic element?

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

The elements such as <div> and <div> are non-semantic elements.

Semantic element example: <form>, <t able>, and -clearly describes the content represented by the element.

Browser support for semantic elements

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

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

New semantic elements in HTML5

Many existing websites contain the following HTML code: <div id = "nav">,

, Or, to specify the navigation link, header, and tail.

HTML5 provides new semantic elements to define different parts of a web page:

<Header>

<Nav>

<Section>

<Article>

<Aside>

<Figcaption>

<Figure>

<Footer>

HTML5 Elements

<Section> label defines sections (sections and sections) in the document ). For example, a section, header, footer, or other part of the document.

According to W3C HTML5 document: section contains a set of content and its title.

Instance

<Section>

<H1> WWF

<P> The World Wide Fund for Nature (WWF) is ....

</Section>

HTML5

Element

<Article> the tag defines independent content ..

<Article> element usage example:

Forum post

Blog post

News story

Comment

Instance

<Article>

<H1> Internet Explorer 9

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

The public on March 14,201 1 at PDT... </p>

</Article>

HTML5

Element

<Nav> the tag defines the navigation link.

<Nav> elements are used to define part of the navigation link area of a page. However, not all links must be included in

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> the tag defines content outside the main area of the page (such as the sidebar ).

The content of the aside tag should be related to the content of the main region.

Instance

<P> My family and I visited The Epcot center this summer. </p>

<Aside>

<H4> Epcot Center

<P> The Epcot Center is a theme park in Disney World, Florida. </p>

</Aside>

HTML5

Element

<Header> the element describes the header area of the document.

<Header> element Note: It is used to define the presentation area of the content.

You can use multiple

The following example defines the header of the article:

Instance

<Article>

<Header>

<H1> Internet Explorer 9

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

</Header>

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

The public on March 14,201 1 at PDT... </p>

</Article>

HTML5

Element

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

<Footer> An element should contain its contained elements.

A footer usually contains the author of the document, copyright information, Terms of Use of links, and contact information.

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

Instance

<Footer>

<P> Posted by: Hege Refsnes </p>

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

</Footer>

HTML5

And Element

<Figure> labels define independent stream content (images, charts, photos, code, and so on ).

<Figure> the content of the element should be related to the main content, but if it is deleted, it should not be affected by document abortion.

<Figcaption> label defines the title of the <figure> element.

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

Instance

<Figure>

<Figcaption> Fig1.-The Pulpit Pock, Norway.

 

</Figure>

Can we start to use these semantic elements?

The above elements are all block elements (

).

To make these blocks and elements take effect in all versions of browsers, you need to set attributes in the style sheet file (the following style code allows the old browser to support the block-level elements described in this chapter ):

Header, section, footer, aside, nav, article, figure

{

Display: block;

}

Compatibility issues in Internet Explorer 8 and earlier IE versions

IE8 and earlier IE versions cannot render CSS effects in these elements, so you cannot use

Solution: You can use the HTML5 Shiv Javascript script to solve IE compatibility issues. HTML5 Shiv: http://code.google.com/p/html5shiv/

After the download, add the following code to the webpage:

<! -- [If lt IE 9]>

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

<! [Endif] -->

The above code will load the html5shiv. js file when the browser is earlier than IE9. You must place it in the element, because the IE browser needs to render these HTML5 new elements after loading the header.

Reprinted Please note: http://www.w3cschool.cc/html/html5-semantic-elements.html