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 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.
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.
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
h6 main title and subtitle of the article
This is an introduction to HTML 5 semantic tags and a cleaner structure HTML 5< /h2>
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
navThe element represents the navigation link area of the page. Used to define the main navigation section of the page.
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;
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>
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
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>
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
articleElements are easiest to
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>hahaha</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.