Home > Developer > Web Develop
One: new main structure element
In HTML5, several structural elements associated with the document structure, such as header, footer content chunks, are appended to make the document more clearly structured.
1.1article elements
The article element represents a document, a page, or an application that is independent of the complete, externally referenced content that can be independently,<article> the contents of the label definition. Article elements can be nested, and the contents of the inner layer need to be associated with the outer content in principle,
Another article element can also be used to represent a plugin.
The <time> tag defines the date or time, or both. pubdate indicates that the date/time in the <time> element is the publication date of the document (or the most recent predecessor <article> Element)
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Untitled Document</title></Head><Body><article> <Header> <H1>Blog</H1> <P>< Timepubdate= "pubdate">2017/3/1</ Time></P> </Header> <P><b>My blog</b>, my blog content</P> <Footer>All rights reserved</Footer></article></Body></HTML>View Code
2.section elements
A section element is used to block content on a page in a Web site or application, and a section element is usually composed of content and its title, but the sections element is not an ordinary container element, and when a container needs to define a style directly or through a script to define the behavior, It is best to use div instead of section.
The role of the section element is to block the content of the page, or to fragment the article.
<article><H1>Element classification</H1>< Section> <H2>Article elements</H2> <P>The role of article elements</P></ Section>< Section> <H2>Section element</H2> <P>The role of section elements</P></ Section></article>example of a article element with a section element
< Section><H1>Element classification</H1><article> <H2>Article elements</H2> <P>The role of article elements</P></article><article> <H2>Section element</H2> <P>The role of section elements</P></article></ Section>example of a section element with a article element
In fact, the article element can be viewed as a special section element of a class, which emphasizes independence more than the section element, section emphasizes fragmentation, and article emphasizes independence.
3.nav elements
The nav element is a group of links that can be used as a page navigation, and NAV is used for navigation.
4:aside elements
The aside element is used to represent the subordinate information portion of the current page or article, as distinct from the part of the subject content. The contents can be reference materials related to the current article, noun interpretation, used outside of the article element, as a part of the subsidiary information of the page or site global.
5:time elements
The <time> element represents a date definition date. When the page is parsed, it gets the value in the attribute datetime, and the content between the tags is only used to display in the page. The optional attribute "pubdate" in the <time> element indicates whether the time is a release date, which is a Boolean value that can be used not only for <time> elements, but also for <article> elements.
6:header elements
Header element is a kind of structure element with guidance and navigation function, the number of header elements is not limited within a Web page, can have more than one, in HTML 5, a header element usually includes at least one heading element (H1-H6).
<Header> <H1>Use of header tags</H1></Header><article> <Header> <H1>Sub-headings</H1> </Header> <P>Content</P></article>use of multiple header elements
7:footer elements
Footer usually includes footnote information about its relevant blocks, such as the author, relevant reading links, and copyright information.
Use CSS styles for these new elements to declare these elements to be block elements.
Two: Outline of the arrangement rulesThe layout of content blocks can be divided into two ways: explicit orchestration and implicit orchestration.
An explicit orchestration
Explicit orchestration is the explicit use of elements such as sections to create a document structure, using headings within each content chunk (H1~h6, Hgroup, and so on)
Implicit orchestration
The so-called implicit orchestration, refers to the use of elements such as section, but based on the page written in the headings (H1~H6, Hgroup, etc.) to the level of content blocks automatically created.
If the newly-appearing title is lower than the previous heading level, a subordinate content chunk is generated.
If the newly-appearing caption is higher than the previous heading level, or if both levels are equal, a new content chunk is generated.
Because implicit orchestration makes it easy to create an entire document structure that is not the same as the document structure you want, and it can easily cause confusion in the document structure, use explicit orchestration as much as possible.
< Section> <H2>Implicit encoding</H2> <P>Content</P> <!--because the heading level below is higher than the previous heading level, new content chunks are created automatically - <H1>Content</H1> <P>Content</P></ Section>< Section> <H2>Explicit encoding</H2> <P>S content</P></ Section>< Section> <H1>Chunking</H1> <P>Content</P></ Section>View Code
--Reference to the authoritative guide of HTML5 and CSS3
HTML5 New structure elements
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
