The article element represents a self-contained piece of content in an HTML document.
<!DOCTYPE HTML> <html> <head> </head> <body> <article> <header> <hgroup> <h1>H1</h1> <h2>H2</h2> </hgroup> </header> This is a test. <section> <h1>XML</h1> This is a test. <section> <h1>HTML</h1> This is a test. </section> </section> <footer> <nav> Nav </nav> </footer> </article> </body> </html>
The section element is new to HTML5 and denotes a section of a document.
The section element should be used to contain content that would be listed in a document's outline or table of contents.
Section elements usually contain of one or more paragraphs of content and a heading, although the heading is optional.
<!DOCTYPE HTML> <html> <body> <section> <hgroup> <h1>H1</h1> <h2>H2</h2> </hgroup> This is a test. <section> <h1>H1</h1> This is a test. <section> <h1>More information</h1> This is a test. </section> </section> </section> </body> </html>
The nav element denotes a section of the document that contains links to other pages or to other parts of the same page.
This element identifies the major navigation sections of a document.
<!DOCTYPE HTML> <html> <body> <header> <hgroup> <h1>H1</h1> <h2>by studentsempire</h2> </hgroup> <nav> <h1>Contents</h1> <ul> <li><a href="#five">XML</a></li> <ul> <li><a href="#one">HTML</a></li> </ul> <li><a href="#two">CSS</a></li> <ul> <li><a href="#three">Java</a></li> <li><a href="#four">Javascript</a></li> </ul> </ul> </nav> </header> <section> <header> <hgroup> <h1 id="one">Section h1</h1> <h2>Section h2</h2> </hgroup> </header> This is a test. <section> <h1 id="two">Inner H1</h1> This is a test. <section> <h1>More information</h1> This is a test. </section> </section> </section> <section> <header> <h1 id="three">Activities</h1> </header> <section> <p>This is a test.</p> <h1 id="four">Java</h1> This is a test. <section> <h1 id="five">Javascript</h1> </section> </section> </section> <nav> More Information: <a href="http://www.studentsempire.com">Learn More About</a> <a href="http://www.studentsempire.com">Learn More About</a> </nav> <footer id="mainFooter"> ©2018, studentsempire.com. <a href="http://www.studentsempire.com">Visit</a> </footer> </body> </html>
The details element creates a section that the user can expand to get further details about a topic.
The details element usually contains a summary element, which creates a label or title for the details section.
<!DOCTYPE HTML>
<html>
<head>
<style>
details {
border: solid thin black;
padding: 5px
}
details>summary {
font-weight: bold
}
</style>
</head>
<body>
<article>
<h1>H1</h1>
</header>
<section>
<p>This is a test.</p>
<details>
<summary>Summary</summary>
<ol>
<li>XML</li>
<li>HTML</li>
<li>CSS</li>
</ol>
</details>
</section>
</article>
</body>
</html>
The header element denotes the header of a section. It can contain any content that you wish to denote as being the header.
A header element typically contains one h1 to h6 element or an hgroup element, and it can also contain navigation elements for the section.
The footer element is the complement to header and represents the footer for a section.
A footer usually contains summary information about a section and can include details of the author, rights information.
<!DOCTYPE HTML> <html> <head> </head> <body> <header> <hgroup> <h1>H1</h1> <h2>by studentsempire</h2> </hgroup> </header> <section> <header> <hgroup> <h1>Section h1</h1> <h2>Section h2</h2> </hgroup> </header> This is a test. <section> <h1>Inner Section h1</h1> This is a test. <section> <h1>More information</h1> This is test. </section> </section> </section> <footer id="mainFooter"> ©2018, studentsempire <a href="http://studentsempire.com">Visit</a> </footer> </body> </html>
The aside element denotes content that is only related to the surrounding element. This is similar to a sidebar in a book or magazine.
The content has something to do with the rest of the page, article, or section, but it isn't part of the main flow.
<!DOCTYPE HTML>
<html>
<head>
<style>
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px
}
aside {
width: 40%;
background: white;
float: right;
border: thick solid black;
margin-left: 5px;
}
aside>section {
padding: 5px;
}
aside>h1 {
background: white;
color: black;
text-align: center
}
</style>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="one">H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Why</h1>
<section>
This is a test:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</section>
</aside>
</article>
</body>
</html>