The innovation of HTML 5--Semantic label (i)

One of the innovations in HTML 5: Semantic Tags section element tags.

Before HTML 5 came out, we used div to represent page chapters, but none of this was div meaningful. (Even if we use the CSS style ID and class to describe the meaning of this piece of content). These tags are just the instructions we provide to the browser, just defining portions of a Web page. But now, those that don't have a "meaning" tag because HTML5 's appearance disappears, that's what we call "semantics".

See no div tag for layout

Layout of the HTML5

Well, if the page structure doesn't have a div, it's all about using the HTML5 semantic tag (which tags depend on your design goals).

But also do not because of the appearance of HTML5 new tags, and casual use, the wrong use will certainly backfire. So some places still have to use Div, because Div does not have any meaning element, he is just a tag, just to build the appearance and structure. It is therefore the most suitable label for containers.

The definition of these semantic tags, it is not possible to fully meet our design goals, like the enactment of the law can not be circulated for 100 years, not to mention it is not long ago, it is impossible to these semantic tags on the design goals of adaptation. Just to a certain extent the "general", our goal is to let the crawler understand important things is enough.

Conclusion: The div cannot be discarded because of the HTML 5 tag, and every thing has its unique function.

node element tags because of the use of different places, I divided them into: section element Tags , text element tags , grouping element tags separate to explain the new semantic tags in HTML5 and use summary.

Header element

Header elements represent headers for "Web page" or "section".
Usually contains an h1-h6 element or hgroup , as the title of an entire page or a block of content. You can also wrap a section of the table of contents, a search box, one nav , or any related logo.

The entire page does not limit the number of header elements, you can have multiple, you can add a header element for each content block

            website title website subtitle          

Example code for header

Header Use Note:

• Can be a "webpage" or the head part of any "section";
• There are no number limits.
• If Hgroup or H1-h6 can work well on their own, don't use the header.

Footer elements

footerThe element represents the footer of "Web page" or "section" and usually contains some basic information about it, such as: Author, related document link, copyright material. If the footer elements contain the entire section, they represent some other similar information, such as appendices, indexes, promotions, license agreements, tags, categories, and so on.

<footer>    [email protected] small North </footer> 

footerThe sample code

Footer Use Note:

• Can be a "webpage" or the bottom part of any "section";
• There are no number limits, except that the contents of the package are different, others are similar to the header.

Hgroup elements

hgroupThe element represents the title of "page" or "section", which can be placed into an element when there are multiple levels of the element, such as a combination of the h1 h6 main title and subtitle of the article

    This is an introduction to HTML 5 semantic tags and a cleaner structure HTML 5< /h2>      

hgroupSample code

Hgroup Use Note:

• If you need only one h1-h6 tag, you don't have to Hgroup.
• If you have multiple H1-H6 labels, use Hgroup
• If there are multiple headings and other article data in succession, the H1-H6 tag is wrapped with hgroup and placed in the header tag along with other article metadata

Nav element

navThe element represents the navigation link area of the page. Used to define the main navigation section of the page.

<nav>    <ul>        <li>HTML 5</li><li>CSS3  </li><li>JavaScript</li></ul></nav>   

navInstance

But I sometimes can't help but want to use it, for example: Sidebar on the table, breadcrumbs, search style, or the next article, but in fact, the norm is that NAV can only be used in the main navigation section of the page. The list of links in the footer area, although pointing to different areas of different sites, such as the terms of service, copyright pages, and so on, these footer elements can be used.

Nav Use NOTE:

• Used in the main navigation section of the entire page, do not use the nav element is inappropriate;

Aside elements

asideElements are included in the article element as the main content of the subsidiary Information Section, wherein the content can be related to the current article relevant information, tags, rankings interpretation. (Special section)

Use the Subordinate Information section as a page or site global outside of the article element. The most typical is the sidebar, where the content can be a log concatenation, other groups of navigation, and even ads, these content related pages.

<article>    <p> content </p><aside>author profile 
<p> small north, one front </p></aside></article>    

asideInstance

Aside use summary:

• Aside of the main content within the article,
• Outside the article can do the sidebar, there is no article corresponding to it, it is best not to.
• In the case of ads, other log links or other classified navigation can also be used

Section element

sectionElements represent "sections" or "segments" in a document, and "segments" can refer to sections in an article by topic; "section" can refer to a group in a page.

Sections are usually also titled, although sections in HTML5 automatically downgrade the title H1-h6, but it's a good idea to downgrade them manually. As follows:

<section> section what is it?  <article> about Section<p>section introduction </p> <section>  about other  <p> about other sections span class= "tag" ></p> </section></article></SECTION>       

sectionSample code

Section Use NOTE:

A page can be divided into sections as profiles, article entries, and contact information. However, in the article pages, it is best to use article. section is not a container element in the general sense, and you can use div if you want to be convenient for styling and scripting.

• Represents a section or segment in a document;
• Article, Nav, aside can be understood as a special section, so if you can use article, NAV, aside do not use section, no practical meaning with div

Article elements

articleElements are easiest to section div be confused with, in fact, article represent a self-contained in a document, a page, or a website, and are designed to be developed or reused independently by developers. such as forum posts, blog articles, a user's comments, an interactive widget gadget. (Special section)

In addition to its content, article there will be a title (usually in the header inside), and there will be a footer footer. Let's give some examples of article to better differentiate article, section, Div.

<article>    an article <p> article content: </p><footer><p><small> Copyright: Html5jscss Network, small North </small></p ></footer></article>           

Article sample code for a simple article

The above example is the best simple article label usage, if nested inside the article article, that means that the embedded article is associated with its external content, such as the comments below the blog post, as follows:

<article>            An article <p><time pubdate Datetime="2012-10-03">2012/10/03</time></p>  <p>Article content:</p> <article> Comments <article>  Commented by: XXX <p><time pubdate Datetime="2012-10-03t19:10-08:00">Hour ago</time></p>  <p>Ha ha haha</p> </article> <article>  reviewers: Xxx<p><time pubdatedatetime= "2012-10-03t19:10-08:00" >< Span class= "PLN" >~1 hour ago</time></p> </ Header> <p> huh? Ha? Ha? </p> </article></article></ARTICLE>        

Comments in the article, an instance of article nested article to represent

Article internal nested article, there may be comments or other content related to the article. What is the general condition of the article internal nesting section? As follows:

<article>    Front-end Technology <p> front-end technology has those </p> <section>css<p> style: </p> </section><section> js  <p> script </p> </section></ARTICLE>              

Chapter in the article, an example of a section in a article

Because the section part of the article is also an independent part, but it can only be regarded as a part of the whole , subordinate relations, article is a large body, section is a part of this large body. All articles on this site are article nested section sections, which makes it easier for browsers to distinguish between sections.

What about nested article inside the section, as follows

<section>        Introduction: Website Production members equipped <article> Designer <p> design page ... </p> </article><article>  programmer  <p> background Write program: </p> </article><article>  front-end engineer  <p> to the upstairs two handyman. </p> </article></SECTION>              

An instance of article in a section

Designers, programmers, front-end engineers are all an independent whole, they make up the basic equipment of website production, of course, there are other members ~ ~. Designers, programmers, front-end engineers like article, are independent of the whole, and section will these self-contained article parcel, formed a group.

Article and sections and examples of such a lot of cases, the specific situation of specific analysis, not easy to delve into. Missing div D, in fact, div just want to use to combine elements or add styles to them.

Article Use NOTE:

• Self-contained case: with article
• is relevant: Use section
• No semantics: with Div

HTML5 other Structural element tags

HTML5 section element tags include body article nav aside section header footer hgroup , plus h1-h6 address .

• addressRepresentative block container, must be as contact information appear, postal address, e-mail address, etc., generally appear in footer.
• h1-h6Because of the advent of hgroup,section and article, the H1-H6 definition has changed, allowing multiple H1 to appear on a single page.

HTML5 semantic Tags There is a second innovation in HTML 5-semantic tags (ii). Our choice in structuring semantic and structured tags has also become somewhat less cautious. In other words, we should not misuse the hyper-semantic elements.

The innovation of HTML 5--Semantic label (i) (GO)