Detailed <aside> elements in HTML5 and <article> elements

<aside> elements
HTML<aside> elements represent a part of a page whose content is not related to the rest of the page, or is not associated, and exists alone. <aside> elements are usually displayed as sidebar (sidebar) or some insert supplemental content. Usually used to display some definitions in the sidebar, such as table of Contents, index, glossary, etc., can also be used to display relevant advertising, the author's introduction,Web applications , related links, the current page content introduction and so on.

<aside> element Usage Precautions:

Do not use the <aside> element to mark the text in parentheses, because this type of text is considered part of the main content.

Examples of Use:

xml/html Code copy content to clipboard

2. <article>
4. <p>
6. The Disney movie <em>the Little Mermaid</em> was
8. First released to theatres in 1989.
10. </P>
12. <aside>
14. The movie earned $87 million during its initial release.
16. </aside>
18. <p>
20. More info about the movie ...
22. </P>
24. </Article>

<article> elements
The article element (<article>) is named Incredibles, which can represent forum posts, magazines or news articles, blogs, user-submitted comments, interactive components, or other independent content items. Its main semantics is to express itself as an independent content structure. Each <article> element internal structure should be similar, for example, should include a header (h1-h6 element) and so on.

<article> element Usage:

When a <article> element is nested, the element represents an article related to the parent element. For example, the <article> element that represents a blog comment can be nested within the <article> element that represents the blog post.
The information for the author of the article in the <article> element is represented by the <address> element, but does not apply to nested <article> elements.

The release date and Time of an article in the <article> element can be represented by the Pubdate property of the <time> element.

Code sample

xml/html Code copy content to clipboard

2. <article class="Film_review">
4. <header>
6. <h2> Jurassic Park </H2>
8. </Header>
10. < section class="Main_review">
12. <p>dinos were great! </P>
14. </Section>
16. < section class="User_reviews">
18. <article class="User_review">
20. <p>way too scary for me. </P>
22. <footer>
24. <p>
26. Posted on <time datetime="2015-05-16 19:00">may-</time> by Lisa.
28. </P>
30. </footer>
32. </Article>
34. <article class="User_review">
36. <P>i agree, Dinos is my favorite. </P>
38. <footer>
40. <p>
42. Posted on <time datetime="2015-05-17 19:00">may +</time> by Tom.
44. </P>
46. </footer>
48. </Article>
50. </Section>
52. <footer>
54. <p>
56. Posted on <time datetime="2015-05-15 19:00">maythe </time > by staff.
58. </P>
60. </footer>
62. </Article>

Detailed <aside> elements in HTML5 and <article> elements