The understanding of HTML5 semantic tagging __html

introduce

HTML is the context structure and meaning that provides the content of a Web page document; HTML itself is not expressive, we see for example <H3> is bold, font size is 2em;<strong> bold, do not think these are HTML performance, This is the default style of HTML at work, so we need to know HTML and the performance of the page are not related, the performance is the thing of CSS. The role of HTML in the page is the structure, meaning, the white is to divide the content, here put what, we put what.


of Structured

A page is compared to a house, that HTML is a reinforced concrete wall, the same shelf as the house roof, and the CSS is the decorative material, the floor paint a kind of thing. A good page structure is in the absence of CSS decoration, the page structure is still clear, housing can still be present. And people often say that the div+css, just popular saying, not the entire Div, remember: div is not God.


of Semantics

HTML is a supplement to the textual content and meaning (i.e. semantics). It will tell us: "This line is a title, these lines constitute a paragraph, this is a list of items, that is a link." Instead of telling us: "These words are blue, those are red, this part is on the right, these are italic." "These are the jobs of CSS. Anyway: HTML tells us what a piece of content is (or what it means), not what it looks like.



Copy code code as follows:

--> of <!--not semantically
<div id= "Header" >
<div class= "H3" > Front brick Siege Division </div>
<div class= "H2" > Building blocks also play art </div>
</div>
After the semantic--> of <!--
<div id= "Header" >
<H3> Front Brick Siege Division </H3>
</div>




the benefits of semantics.

Removing styles makes the page structure appear clear. Screen readers will "read" your Web page as a sign to help SEO facilitate team development and maintenance attached: HTML5 new elements

Label	Meaning	Comparison with HTML4
<article>	The label defines the external content. For example, a new article from an external news provider, or text from a blog, or text from a forum. or from other external source content	HTML5:<article></article> HTML4:<div></div>
<section>	The label defines the sections (section, section) in the document. such as chapters, headers, footers, or other parts of a document.	HTML5: <section></section> HTML4: <div></div>
<aside>	The label defines content other than article. The content of the aside should be related to the content of article.	HTML5:<aside>aside content is independent, but should be relevant to the document content. </aside> HTML4:<div>aside content is independent, but should be relevant to the document content. </div>
	The label defines the header for the section or document.	HTML5: HTML4: <div></div>
<footer>	The label defines the footer for the section or document. Typically, it contains the creator's name, the document's authoring date, and/or contact information.	HTML5: <footer></footer> HTML4: <div></div>
	Labels are used to group the headings of a page or section.	HTML5: HTML4: <div></div>
<nav>	Label defines the part of a navigation link	HTML5: <nav></nav> HTML4:<ul></ul>
<canvas>	Labels define graphics, such as charts and other images. This HTML element is designed for client-side vector graphics. It has no behavior of its own, but presents a drawing API to client JavaScript so that the script can draw what it wants to draw onto a canvas.	HTML5:<canvas id= "MyCanvas" width= "height=" ></canvas> HTML4:<object data= "inc/hdr.svg" type= "Image/svg+xml" width= "" "Height=" ></object>
<video>	A label defines a video, such as a movie fragment or other video stream.	HTML5: <video src= "Movie.ogg" controls= "Controls" > your browser does not support video labels. </video> HTML4:<object type= "Video/ogg" Data= "MOVIE.OGV" ><param "src" name= "value=" MOVIE.OGV Object>
<audio>	Labels define sounds, such as music or other audio streams.	HTML5:<audio src= "Someaudio.wav" > your browser does not support audio labels. </audio> HTML4:<object type= "Application/ogg" Data= "someaudio.wav" ><param "src" name= "value=" "></object>
<embed>	Tags define embedded content, such as Plug-ins.	HTML5: <embed src= "Horse.wav"/> HTML4: <object data= "flash.swf" type= "Application/x-shockwave-flash" ></object>
<source>	Labels define media resources for media elements such as <video> and <audio>.	HTML5: <source> HTML4: <param>
<datalist>	The label defines the list of optional data. In conjunction with the INPUT element, you can create a drop-down list of input values.	HTML5: <datalist></datalist> HTML4: None
<details>	The label defines the details of the element, which the user can view or hide by clicking. Use with <legend> to make detail headlines. The title is visible to the user and can be turned on or off when clicked on detail.	HTML5: <details></details> HTML4: <dl style= "Display:hidden" ></dl>
<summary>	The label contains the title of the details element, which is used to describe the details of the document or document fragment. The "Summary" element should be the first child element of the "details" element.	HTML5: <details><summary>html 5</summary>this document teaches you everything to Learn about HTML 5.</details> HTML4: None
<figure>	Tags are used to group elements. Use the <figcaption> element to add a caption to the group of elements.	HTML5: <figure><figcaption>prc</figcaption><p>the People ' s Republic of Born in 1949...</p></figure> HTML4: <dl>
<figcaption>	The label defines the caption of the figure element. The "figcaption" element should be placed at the position of the first or last child element of the "figure" element.	HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: None
<mark>	It is mainly used to visually present to the user the text that needs to be highlighted. A more typical application of <mark> tags is to highlight search keywords to users in search results.	HTML5: <mark></mark> HTML4: <span></span
<meter>	Label defines weights and measures. A metric that is used only for known maximum and minimum values. You must define the scope of the measure, either in the text of the element or in the Min/max property.	HTML5: <meter></meter> HTML4: None
<output>	Labels define different types of output, such as the output of a script.	HTML5: <output></output> HTML4: <span></span>
<progress>	The process in which the label is running. You can use the <progress> tab to display the process of a time consuming function in JavaScript.	HTML5: <progress></progress> HTML4: None
<time>	The label defines the date or time, or both.	HTML5: <time></time> HTML4: <span></span>
<keygen>	Labels are used to group titles of pages or sections (section)	HTML5: <keygen> HTML4: None
<command>	A label defines a command button, such as a radio button, check box, or button.	HTML5: <command onclick=cut () "Label= cut" > HTML4: None