In the previous HTML page, we basically used the div+css layout. and seo/seo.html "target=" _blank > Search engine to crawl the content of the page, it can only guess that one of your div content is the contents of the article container, or navigation module container, or the author introduced the container and so on. That is, the entire HTML document structure definition is not clear, HTML5 in order to solve this problem, specifically added: header, footer, navigation, article content and other structure-related structural element tags.
1.section 2.article 3.aside 4.header 5.hgroup 6.footer 7.nav 8.figure
Before we talk about these new tags, let's look at how a normal page is laid out:
In the picture above we see very clearly, a common page, there will be the head, navigation, article content, as well as attached to the right side of the bar, as well as the bottom modules, and we are distinguished by class, and through different CSS styles to deal with. But relatively speaking class is not a common standard specification, the search engine can only guess a part of the function, and the other is this page program to the vision impaired people to read, the document structure and content will not be very clear. The new layout of the HTML5 new label is the following:
The relevant HTML code is:
| The code is as follows | Copy Code |
<body> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> |
|
With the understanding of the above direct senses, we below Yi Yilai introduce the related structure tags in HTML5.
1.section Label
<section> label to define the section in the document. such as chapters, headers, footers, or other parts of a document. Typically used for section content, a new section is started in the document stream. It is used to represent ordinary document content or application blocks, usually consisting of content and its headings. However, the section element label is not an ordinary container element, it represents a piece of topical content, usually with a title.
When we describe a specific thing, we usually encourage the use of article instead of section, and when we use the section, we can still use H1 as the caption without worrying about where it is and whether it is used in other places. When a container needs to be directly defined or defined by a script, it is recommended that you use a DIV element rather than a section.
| The code is as follows | Copy Code |
What is <article> Introduction to <p>section </p> ... </article> </section> |
|
2.article Label
<article> is a special section label that has more explicit semantics than section and represents a separate, complete block of related content that can be used independently of other pages of the page. For example, a full forum post, a blog post, a user review, and so on. In general, article will have a header section (usually included in the header) and sometimes a footer. Article can be nested, the inner layer of the article outer layer of the article label has a subordinate relationship. For example, a blog post can be displayed with article, and some comments can be embedded in the form of article.
| The code is as follows | Copy Code |
The innovation of <time datetime= "2011-03-20" >2011.03.20</time> <p> article content details </p> </article> |
|
3.nav Label
The Nav tag represents a part of a page that is a link group that can be navigated as a page, where navigation elements are linked to other pages or other parts of the current page, making the HTML code more semantically accurate, and also better for devices such as screen readers.
| The code is as follows | Copy Code |
<ul> <li> de it</li> <li>FlyDragon</li> <li>j Dragon Day Surprise </li> </ul> </nav> |
|
4.aside Label
The aside tag is used to load non body content and is considered a separate part of the page. It contains content that is separate from the main content of the page and can be deleted without affecting the content of the page, the chapters, or the information that the page will convey. such as ads, groups of links, sidebar and so on.
| The code is as follows | Copy Code |
<p> de it</p> </aside> |
|
5.header Label
Typically
| The code is as follows | Copy Code |
6.footer Label
The footer label defines a section or document footer that contains information about a page, article, or part of the content, such as the author or date of the article. As a footer for a page, you typically include copyright, related files, and links. It is the same as the
| The code is as follows | Copy Code |
<footer> copyright@ it </footer> |
|
7.hgroup Label
The hgroup tag is a combination of the title element (H1-H6) of the page or section sections. For example, in a section where you have a sequential H-series LABEL element, you can surround them with hgroup.
| The code is as follows | Copy Code |
The innovation of |
|
8.figure Label
Used to group elements. Used in combination of picture and picture description.
| The code is as follows | Copy Code |
<figcaption> Here is the description information of the picture </figcaption> </figure> |
|
Summarize:
With the new structure of the label standards, so that the HTML document clearer, more readable, more conducive to SEO, but also more conducive to the visually impaired people to read.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
