The <aside> elements and <article> elements in html5.
<Aside> Elements
The HTML <aside> element indicates a part of a page. Its content is not correlated with other content on the page, or is not associated and exists independently. The <aside> element is usually displayed as a sidebar or some inserted supplementary content. It is usually used to display some definitions on the sidebar, such as directories, indexes, and glossary. It can also be used to display related advertisement, author's introduction, Web applications, and links, the content of the current page.
<Aside> element usage considerations:
Do not use the <aside> element to mark the text in parentheses, because this type of text is considered part of the main content.
Example:
Copy XML/HTML Code to clipboard
- <Article>
- <P>
- The Disney movie <em> The Little Mermaid </em> was
- First released to theaters in 1989.
- </P>
- <Aside>
- The movie earned $87 million during its initial release.
- </Aside>
- <P>
- More info about the movie...
- </P>
- </Article>
<Article> element
An alias for an Article element (<article>) indicates a forum post, magazine or news Article, blog, comments submitted by users, interactive components, or other independent content items. Its main syntax is to express itself as an independent content structure. The internal structure of each <article> element should be similar, such as containing a header (h1-h6 element.
<Article> element usage:
When the <article> element is nested for use, the element represents an article related to the parent element. For example, the <article> element representing a blog comment can be nested in the <article> element representing a blog article.
The information of the author in the <article> element can be expressed by the <address> element, but it is not applicable to nested <article> elements.
The publishing date and time of an article in the <article> element can be expressed by the pubdate attribute of the <time> element.
Sample Code
Copy XML/HTML Code to clipboard
- <Article class = "film_review">
- <Header>
- <H2> Jurassic Park
- </Header>
- <Section class = "main_review">
- <P> Dinos were great! </P>
- </Section>
- <Section class = "user_reviews">
- <Article class = "user_review">
- <P> Way too scary for me. </p>
- <Footer>
- <P>
- Posted on <time datetime = ""> May 16 </time> by Lisa.
- </P>
- </Footer>
- </Article>
- <Article class = "user_review">
- <P> I agree, dinos are my favorite. </p>
- <Footer>
- <P>
- Posted on <time datetime = ""> May 17 </time> by Tom.
- </P>
- </Footer>
- </Article>
- </Section>
- <Footer>
- <P>
- Posted on <time datetime = ""> May 15 </time> by Staff.
- </P>
- </Footer>
- </Article>