Home > Developer > Web Develop
The section element depicts a document or a common sections in a program, in general, a part that contains a head and a content block. A section can be represented as a bar, or a tab box block in the tab page. A page can be split into multiple sections, representing introduction, news items, and contact information, respectively.
If the content of an element is set together to display the corresponding meaning, it can be defined as a article element without the need to use a section element.
Section element is not a generic container element, so if an element needs to define the appropriate style or script, then the DIV element is recommended, and the section is used to ensure that the content of the element is clearly displayed in the outline of the document.
The following example code comes from a section of the Apple Web page, which contains 2 short sections:
<Article>
<Hgroup>
<H1>apples</H1>
<H2>tasty, Delicious fruit!</H2>
</Hgroup>
<P>the Apple is the pomaceous fruit of the apple tree.</P>
<Section>
<H1>red Delicious</H1>
<P>these bright red apples is the most common found in many supermarkets.</P>
</Section>
<section>
<H1>granny Smith</H1>
<p>these juicy, green apples make a great filling for apple pies. </P>
</Section>
</Article>
As you can see, the H1 element can be used arbitrarily in the section, regardless of whether the section is top-level or two-or three-level elements.
The following code is a graduation page that contains 2 sections, one that shows the list of people who will graduate, and one that shows the form of a graduation ceremony.
<!DOCTYPE Html>Article
<Html>
<Head>
<Title>graduation Ceremony Summer 2022</Title>
</Head>
<Body>
<H1>graduation</H1>
<Section>
<H1>ceremony</H1>
<P>opening Procession</P>
<P>speech by Validactorian</P>
<P>speech by Class President</P>
<P>presentation of diplomas</P>
<P>closing Speech by headmaster</P>
</Section>
<Section>
<H1>graduates</H1>
<Ul>
<Li>molly Carpenter</Li>
<Li>anastasia Luccio</Li>
<Li>ebenezar McCoy</Li>
<Li>karrin Murphy</Li>
<li>thomas raithli>
<< Span style= "color: #800000;" >li>susan rodriguez</ li>
</ul>
</>
</>
</>
Article represents a separate fragment of a document's content, such as a blog entry or newspaper article, andthe contents of the <article> tag are independent of the rest of the document.
Article is a special section tag that has more explicit semantics than sections and represents a separate, complete block of related content. In general, article will have a title section (usually included in the header) and sometimes include footer. Although section is a subject matter, the article itself is independent and complete, both structurally and content.
When article embedded article, in principle, the content of the internal article is related to the article content of the outer layer. For example, a blog post that contains user-submitted comments should be article to include blog post article.
Aside<article>
<href= "http://www.apple.com">safari 5 released</a></>
7 June 2010. Just after the announcement of the new IPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac ...
</Article>
The <aside> element tags provided by HTML5 are used to represent the subsidiary information portion of the current page or article, and can contain references to the current page or main content, sidebar, ads, nav element groups, and other similar sections that are different from the main content.
According to the current specification,there are two ways to use the <aside> element:
N is included in <article> as a subsidiary information part of the main content, which can be a reference to the current article, a list of words, and so on.
N is used outside of <article> as a subsidiary information part of a page or site; the most typical form is the sidebar (sidebar), where the content can be links, affiliate navigation, or ad units.
The following code example combines these two methods of use:
<Body>
<Header>
<H1>my Blog</H1>
</Header>
<Article>
<H1>my Blog Post</H1>
<P>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Incididunt ut labore et dolore magna Aliqua.</P>
<Aside>
<!--Since this aside was contained within an article, a parser
Should understand the content of this aside is directly related
To the article itself.-
<H1>glossary</H1>
<Dl>
<Dt>lorem</Dt>
<Dd>ipsum dolor sit amet</Dd>
</Dl>
</Aside>
</Article>
<Aside>
<!--This aside is outside of the article. Its content is related
To the page, but not as closely related to the above article-
<H2>blogroll</H2>
<Ul>
<Li><AHref="#">my Friend</A></Li>
<Li><AHref="#">my other Friend</A></li>
<li><a href< Span style= "color: #0000ff;" >= "#" >my best Friend</ a></li>
</ul>
</aside>
</body>
Html5--section,article,aside
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
