HTML5 Semantic Tag Usage

Before HTML5 out, we used div to represent the page chapters, but none of these div's actually 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 tags that don't have "meaning" have disappeared because of the HTML5, which is what we call "semantics".

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6C/F1/wKiom1VXL7nxlaX6AACj7nTJuI4773.jpg "title=" 1.jpg " alt= "Wkiom1vxl7nxlax6aacj7ntjui4773.jpg"/>

If the page structure does not use a div, it is using HTML5 semantic tags (which tags, depending 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 HTML5 tag, and every thing has its unique function.

Headers element Header element represents "page" or "section", usually contains h1-h6 element or Hgroup, as the entire page or a content block title, can also wrap a directory part, a search box, a 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;

Header Sample code:

Header Use Note:

Can be a "webpage" or the head part of any "section";

No number limit;

If Hgroup or h1-h6 can work very well, then do not use the header;

The sections element section element represents the document in "Stanza" or "segment", "paragraph" can refer to an article in accordance with the topic of the paragraph, "section" can refer to a page in the grouping; the sections are usually also titled, although sections in HTML5 automatically downgrade the title H1-h6 , but it's best to downgrade them manually;

Section Sample code:

<section>

<article>

Introduction to <p>section </p>

<section>

<p> Introduction to other sections </p>

</section>

</article>

</section>

Section Use NOTE:

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

The article element is easiest to confuse with sections and Div, in fact article represents a document, page, or self-contained content in a Web site for developers to independently develop or reuse. such as forum posts, blog articles, a user's comments, an interactive widget gadget. (Special section) in addition to its content, article will have a title (usually in the header), and there will be a footer footer. We give a few examples of article, good better distinguish between article, section, Div;

Article sample code for a simple article:

<article>

<p> article content: </p>

<footer>

<p> Copyright:cssue.com</p>

</footer>

</article>

The above example is the simplest article label usage, if nested inside the article article, that means that the embedded article is related to its external content, such as the comments under the blog post;

The comments in the article, a sample code for nesting article in a article:

<article>

<time datetime= "2012-12-06" >2012/12/06</time>

<p> article content: </p>

<article>

<article>

<time datetime= "2012-12-06t19:10" >~1 hour ago</time>

<p> Wahaha. </p>

</article>

<article>

<time datetime= "2012-12-06t19:10" >~1 hour ago</time>

<p> haha ...</p>

</article>

</article>

</article>

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:

The chapter in the article, a sample code for a nested section in a article:

<article>

<p> front-end technology has those </p>

<section>

<p> Tags: </p>

</section>

<section>

<p> Style: </p>

</section>

<section>

<p> script: </p>

</section>

</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 is the case for nested article inside the section, as follows:

Example code for nesting article in a section:

<section>

<article>

...</p> of the <p> Design Web page

</article>

<article>

<p> Writing programs for: </p>

</article>

<article>

<p> to the upstairs two-bit handyman. </p>

</article>

</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, is a separate whole, and section will these self-contained article package, the formation of a group, more content See web design training.

Examples of article and section are cited so much, the specific situation of specific analysis, not easy to delve into. Missing Div, in fact div is just want to use to combine elements or give them style when used.

Article Use NOTE:

In case of self-independence: use article;

is relevant: Use section;

No semantics: use of div;

The Nav element nav element represents the navigation link area of the page. Used to define the main navigation section of the page.

Nav Sample code:

<nav>

<ul>

<li>HTML5</li>

<li>CSS3</li>

<li>JavaScript</li>

</ul>

</nav>

But I sometimes can't help but want to use it, such as: The table of contents on the sidebar, breadcrumb navigation, or the next article, but in fact, the standard 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:

Use the main navigation part of the whole page, do not use the nav element if it is inappropriate;

The aside element aside element tag is used to represent the subordinate information portion of the current page or article, and can contain references to the current page or main content, sidebars, ads, nav element groups, and other similar sections that are different from the main content.

<article>

<p> Front-end technology includes: HTML, CSS, JavaScript, etc. ...</p>

<aside>

<dl>

<dt>HTML</dt>

<dd>html is a Hypertext Markup language used to describe a Web page document. </dd>

</dl>

</aside>

</article>

Aside use note:

A subsidiary information part that is included in the article element as the primary content, which can be a reference to the current article, a list of words, and so on.

Used outside of article, as part of a page or site-wide subsidiary information, the most typical form is the sidebar (sidebar), where content can be links, affiliate navigation, or ad units.

The footer element footer 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 element contains the entire section, then they represent some other similar information such as appendices, indexes, promotions, license agreements, tags, categories, and so on.

Footer Sample Code:

<footer>

<p> Copyright:cssue.com</p>

</footer>

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.

HTML5 Semantic Tag Usage