The article element represents a self-contained
piece of content in an HTML document.
The following code shows the article element in use.
<!DOCTYPE HTML>
<html>
</head><!-- ww w. ja va2 s. c om-->
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1Like</h1>
<h2>H2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">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.
The following code shows the section element in use.
<!DOCTYPE HTML>
<html>
<head>
</head><!-- ww w . j a v a 2 s. c o m-->
<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.
The following code shows the use of the nav element.
<!DOCTYPE HTML>
<html>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by java2s.com</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">XML</a></li>
<ul>
<li><a href="#morefruit">HTML</a></li>
</ul>
<li><a href="#activitiesilike">CSS</a></li>
<ul>
<li><a href="#tritypes">Java</a></li>
<li><a href="#mytri">Javascript</a></li>
</ul>
</ul>
</nav><!-- ww w . ja v a 2 s . c o m-->
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">Inner H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities</h1>
</header>
<section>
<p>This is a test.</p>
<h1 id="tritypes">Java</h1>
This is a test.
<section>
<h1 id="mytri">Javascript</h1>
</section>
</section>
</section>
<nav>
More Information: <a href="http://java2s.com">Learn More About</a>
<a href="http://java2s.com">Learn More About</a>
</nav>
<footer id="mainFooter">
©2011, java2s.com. <a href="http://java2s.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.
The following code shows how to use the summary and details Elements.
<!DOCTYPE HTML>
<html>
<head>
<style>
details {<!-- w w w .j a v a 2 s . c o m-->
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?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.
You can see the header and footer elements in the following code.
<!-- w w w . j a va 2 s . c o m-->
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by java2s.com</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">
©2015, java2s.com. <a href="http://java2s.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.
The following code adds and styles the aside element.
<!DOCTYPE HTML>
<html>
<head>
<style>
<!-- w w w .jav a 2 s . com-->
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="fruitsilike">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>