HTML5 semantic elements

Back to Catalog http://hovertree.com/h/bjaf/html5zixueji.htm

A semantic element can clearly describe its meaning to the browser and the developer.
No semantic element instances: <div> and <span>-no need to consider content.
Examples of semantic elements: <form>, <table>, and -clearly define its contents.

<title> is a typical semantic label that defines the title of a document.
：

New semantic elements in HTML5
Many existing Web sites contain the following HTML code: <div id= "Nav", <div class= "header", or <div id= "Footer", to indicate navigation links, headers, and tails.

HTML5 provides a new semantic element to define the different parts of a Web page:
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

It is important to note that

General usage and typesetting:

<section> tags define the sections (section, section) in the document. such as chapters, headers, footers, or other parts of the document. According to the HTML5 Document: section contains a set of content and its title.

Example:
<section>
<p> Self-study ability is very important, especially in computer design and development work, self-study ability is the siege lions to enhance the development of capacity ladder. by Ho Q </p>
</section>

The <article> tag defines independent content.

<nav> tags define the part of the navigation link.
The <nav> element is used to define the navigation links section of the page, but not all links need to be included in the <nav> element!

Example:
<nav>
<a href= "http://hovertree.com/menu/html5/" >HTML5</a> |
<a href= "http://hovertree.com/menu/css/" >CSS</a> |
<a href= "http://hovertree.com/menu/javascript/" >JavaScript</a> |
<a href= "http://hovertree.com/menu/jquery/" >jQuery</a>
</nav>

The effect is as follows: HTML5 | CSS | JavaScript | Jquery

<aside> tags define content outside the main area of the page (such as the sidebar).
The contents of the aside tag should be related to the contents of the main area.

The You can use multiple
Example:

<article><Header><H1>HTML5 Why the Fire</H1><P>< Timepubdate datetime= "2016-05-03"></ Time></P></Header><P>In the past, we just looked at some basic documents on the Web, but now the web is a very rich platform. Unlike previous versions, HTML5 is not just used to represent web content, but it also makes it easy to add video, audio, images, animations, and interactions with the computer on the platform.<BR/><BR/>the point of HTML5 is that it brings a seamless network, whether it's a PC, tablet, or smartphone, and it's easy to browse all kinds of websites based on HTML5. <BR/><BR/>The advantage for users is that our mobile phone app will be less, the game implemented with H5, do not need to download after installation, you can immediately generate an app icon in the phone interface, using the browser to run the phone, the new navigation tag can also better help small screen equipment and the use of visually impaired people. H5 has a server push technology that allows users to have better live chat on the web and faster online gaming experience. by Ho asked Hovertree.com</P></article>

Effect See: http://hovertree.com/h/bjaf/yuyihua.htm

The <footer> element describes the bottom area of the document.
The <footer> element should contain its containing element
A footer usually contains the author of the document, copyright information, link Terms of Use, contact information, etc.
You can use multiple <footer> elements in your document.

Example:
<footer>
<p>posted by: Ho Q </p>
<p><time pubdate datetime= "2016-05-03" ></time></p>
</footer>

The <figure> tag provides separate streaming content (images, charts, photos, code, and so on).
The content of the <figure> element should be related to the main content, but if deleted, it should not affect the flow of the document.
<figcaption> Label Definition <figure> The caption of the element.
The <figcaption> element should be placed in the position of the first or last child element of the "figure" element.

Recommendation: Http://hovertree.com/h/bjaf/ufssanbr.htm

Web effects: http://www.cnblogs.com/roucheng/p/texiao.html

HTML5 semantic elements