code is as follows:

<! - not semantic - >
<Div id="header" >
<Div class="H3 >" Former brick siege division </div>
<Div class="h2 >" Building blocks to play art </div>
<! - after the semantic - >
<Div id="header" >
<H3 >Former brick siege division </h3 >
<H2 >Building blocks to play art </h2 >

semantic benefits?

  1. remove styles can let the page structure with clear
  2. screen readers will according to the tags &other; Read &throughout; Your website is
  3. good for SEO
  4. easy team to develop and maintain

add: new elements in the HTML5

The labelmeaningComparing with html4<Article>The tag defines the content of external. Such as from an external news provider of a new article, or text from a blog, or the text from the BBS. Or from an external source other contentHTML5: <Article> </article>
HTML4: <Div> </div><Section>Tags defined in the document section (section, section). Such as chapter, header, footer, or other parts of the document.HTML5:   <Section> </section>
HTML4,   <Div> </div><Aside>Tags defined outside of the article content. Value of content should be related to the content of the article.HTML5: <Aside> Value is independent of the content, but should be associated with the document content. </aside>
HTML4: <Div> Value is independent of the content, but should be associated with the document content. </div><Header>Label definition section or the document header.HTML5:   <Header> </header>
HTML4,   <Div> </div><Footer>Label definition section or the footer of the document. Typically, it contains the name of the creator, document creation date, and/or contact information.HTML5:   <Footer> </footer>
HTML4,   <Div> </div><Hgroup>Labels for the title of the page or section (section).HTML5:   <Hgroup> </hgroup>
HTML4,   <Div> </div><Nav>The tag defines the part of the navigation linksHTML5:   <Nav> </nav>
HTML4: <Ul> </ul><Canvas>Label definition graphics, such as diagrams and other images. The HTML element is designed to client vector graphics. Itself does not have works, but to show a drawing API to the client-side JavaScript to enable script to want to draw things are drawing to a canvas.HTML5: <Canvas id=" MyCanvas" Width=" 200 " Height=" 200 " ></canvas>
HTML4: <The object data=" Inc/HDR. Svg" Type=" Image/SVG + xml" Width=" 200 " Height=" 200 " ></object><Video>Label definition video, such as movie clips, or other video streaming.HTML5:   <Video SRC=" Movie. Ogg" Controls=" Controls" >Your browser does not support the video tag. </video>
HTML4: <The object type=" Video/ogg" data=" Movie. Ogv" ><Param name=" Src" Value=" Movie. Ogv" ></object><Audio>Label definition sounds, such as music or other audio streams.HTML5: <Audio SRC=" Someaudio. Wav" >Your browser does not support the audio tag. </audio>
HTML4: <The object type=" Application/ogg" data=" Someaudio. Wav" ><Param name=" Src" Value=" Someaudio. Wav" ></object><Embed>Tag defines embedded content, such as plug-ins.HTML5:   <Embed SRC=" Horse. Wav"/>
HTML4,   <The object data=" Flash. Swf"   Type=" Application/x - shockwave - flash" ></object><Source>Element (label for medium <video> and <audio>) Define media resources.HTML5:   <Source>
HTML4,   <Param><Datalist>The tag defines the list of optional data. Used with input element, you can create a drop-down list of the input value.HTML5:   <Datalist> </datalist>
HTML4,   None<Details>Tag defines the details of elements, the user can view, or by clicking on the hide. With <Legend> Used together, to make the title of the detail. This title is visible to the user, when click on it to open or close the detail.HTML5:   <Details> </details>
HTML4,   <Dl style=" Display: hidden" ></dl><Summary>The title of the label containing the details element that &throughout; Details” Element is used to describe the detailed information about the documents or document fragments. Throughout the &; Summary” Elements should be &other; Details” The first child of the element.HTML5:   <Details> <Summary> HTML 5 </summary> This document teaches you everything you have to learn about HTML 5. </details>
HTML4,   None<Figure>Labels used in combinations of elements. Use <Figcaption> Add the title element to element group.HTML5:   <Figure> <Figcaption> PRC

<P> The People 's Republic of China was born in 1949... </p> </figure>
HTML4,   <Dl> <H3 >PRC The People 's Republic of China was born in 1949... </p> </dl><Figcaption>The tag defines the title of figure elements. Throughout the &; Figcaption” &other elements should be placed in a Figure” Elements of the position of the first or last child element.HTML5:   <Figure> <Figcaption> PRC

HTML4,   None<Mark>Is mainly used to visually present that need to highlight the text to the user. <Mark> Label is a typical application in highlighting the search keywords in the search results to users.HTML5:   <Mark> </mark>
HTML4,   <Span> </span<Meter>Tag defines weights and measures. Only for a known maximum and minimum value of the measurement. Must define the scope of the measure can be either in the element's text, can also be defined in min/Max attribute.HTML5:   <Meter> </meter>
HTML4,   None<Output>Tag defines the output of different types, such as the output of the script.HTML5:   <Output> </output>
HTML4,   <Span> </span><Progress>Label the running process. You can use <Progress> Tag to display the time consuming in the JavaScript function process.HTML5:   <Progress> </progress>
HTML4,   None<Time>Tags defined date or time, or both.HTML5:   <Time> </time>
HTML4,   <Span> </span><Keygen>Labels for the title of the page or section (section)HTML5:   <Keygen>
HTML4,   None<Command>Label definition command buttons, such as radio buttons, check boxes, and buttons.HTML5:   <The command id="art580"> # 0 - #

This concludes the body part