Home > Developer > Web Develop
1.article elements
Explanation: Represents a separate, complete, self-referencing content in documents, pages, and applications.
Main uses: Blog articles, comments, post posts in the bar, or independent plug-ins and so on.
Article can contain a variety of elements such as:
<article> <Header>Diary Essays</Header> <P>Published Date:< Timepubdate= "pubdate">2014/09/18</ Time> </P> <P>It's raining this morning, it's cold, we need to add clothes</P> <Footer>My blog</Footer></article>
Article can also be embedded in article:
<HTML> <Head></Head> <Body> <article> <H1>Log list</H1> < Section> <article> <Header>Diary Essays</Header> <P>Published date:< Timepubdate= "pubdate">2014/09/18</ Time> </P> <P>It rained this morning, the weather was cold and I needed to add clothes ...</P> </article> <article> <Header>Diary Essays</Header> <P>Published date:< Timepubdate= "pubdate">2014/09/18</ Time> </P> <P>It rained this morning, the weather was cold and I needed to add clothes ...</P> </article> </ Section> </article> </Body></HTML>
2.section elements
Explanation: Used for content in a Web site or application to be chunked. A section element is usually composed of headings and content.
Purpose: Partition different content blocks.
A section is a fragment used for content, such as:
<article> <H1>NBA Team</H1> <P>There are 30 teams in the NBA.</P> < Section> <H2>Golden State Warriors</H2> <P>Golden State Warriors are located in the United States Oakland ...</P> </ Section> < Section> <H2>Los Angeles Lakers team</H2> <P>Los Angeles Lakers are located in the American entertainment center of Los Angeles ...</P> </ Section></article>
NBA Team Introduction is a separate piece of content, so use the article element, and each team's introduction is to use the same side of each other, so use section separation.
In fact, the article and section here even if used interchangeably (article can be regarded as a specialsection), mainly to see this element in your current Web page to emphasize what, emphasizing the independence of the use of article, Emphasize segmentation using section.
You can access https://gsnedders.html5.org/outliner/to check your code structure for parts that do not have section headings, and do not use the Sections tab for content chunks that do not have headings .
Note: section is not an ordinary container element, and when a container element needs to be defined directly by a style or script definition behavior, it is recommended to use a div.
3.nav elements
Explanation: Link groups for page navigation
Purpose: Page navigation
The nav element is used to wrap the page navigation elements, for example:
<nav> <ul> <Li>Home</Li> <Li>My blog</Li> <Li>Forum</Li> ..... </ul></nav>
Note: Do not use the menu element instead of Nav
4.aside elements
Explanation: A portion of the subsidiary information used to represent the current page and article
Purpose: Used for references related to the current page, sidebar, ads, and navigation bar.
There are two main uses of aside:
1. The part of the information which is included in the article as the main content, which can be the reference material and the noun explanation related to the current article.
For example:
<Header> <H1>HTML5 new elements</H1> </Header> <article> <H1>Use of aside tags</H1> <P>The aside tag, like article, is the newly added element in the HTML5, but is typically used for elements related to the principal content. such as noun explanation, citation, etc...</P> <aside> <H1>noun explanation</H1> <DL> <DT>Article</DT> <DD>HTML5 new element for representing independent elements</DD> </DL> </aside> </article>
2. Used outside of the article element, as part of a page or site-wide affiliate information. For example, links, ads, and other articles lists.
<aside> <H1>Top Articles of the week</H1> <ul> <Li> <span>0</span><ahref="....">IPhone6 back to the most technologically advanced mobile phone yet?</a> </Li> <Li> <span>1</span><ahref="....">Git Workflow guide: Centralized workflow</a> </Li> <Li> <span>2</span><ahref="....">Graphical KMP algorithm (JavaScript implementation)</a> </Li> ... </ul> </aside>
Structural learning of HTML5 (1)---new body 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
