HTML5 document structure is mostly same as HTML 4 document structure, and it expands the structure a little. Following are some tags which extends the existing HTML 4 structure.
<header> and <footer> elements
HTML5 document body may contain a header section with tags <header></header> which usually contain the headings and a footer section with tags <footer></footer> which contain contact information, navigation and legal information.
Following is the example of header and footer tags:
<!DOCTYPE html>
<html>
<head>
<title>Example of header and footer elements </title>
</head>
<body>
<header>
<h1> This is the main heading </h1>
<h2> This is the sub-heading</h2>
</header>
<p> This is main body content of the page </p>
<p> This is second line of body content</p>
<footer>
<p> This takes legal, copyright, navigation and other information</p>
</footer>
</body>
</html>
<hgroup> element
<hgroup> element can be used to group the heading so that when they are parsed for documentation they are not treated as two different heading and main heading can be utilized in summary.
<hgroup>
<h1> This is main heading </h1>
<h2> This is sub heading </h2>
</hgroup>
<section> element
<section> element is used to group some content together and may include more <section> elements to make an idea of subsections. A section element can have its own <header> and <footer> elements.
Following is the example of using sections to write an article with sections in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sections overview</title>
</head>
<body>
<header>
<hgroup>
<h1>This is sections example</h1>
<h2>Section to describe article</h2>
</hgroup>
</header>
<section id="topic1">
<header>
<h2>Topic 1</h2>
</header>
<p> Introduction to topic 1</p>
<section id="NewSubSection">
<header>
<h3>New Subsection</h3>
</header>
<p>Subsection content here</p>
<p>More subsection content</p>
<footer>
<p>Subsection footer element</p>
</footer>
</section>
<section id="SubSection2">
<header>
<h3>This is subsection 2</h3>
</header>
<p>Subsection 2 content here</p>
<p>More subsection 2 content</p>
<footer>
<p>Subsection 2 footer element</p>
</footer>
</section>
</section>
<footer>
<p>This is page footer under body.</p>
</footer>
</body>
</html>
<article> element
<article> element is used to show a blog, post, comment or article and so on. A simple example is as following:
<html>
<head>
<title>Article element example</title>
</head>
<body>
<section id="ArticleContainter">
<header>
<h2>Latest article</h2>
</header>
<article id="article3">
<h3>Article 3</h3>
<p>Article 3 content here...</p>
</article>
<article id="article2">
<h3>Article 2</h3>
<p>Article 2 content here...</p>
</article>
<article id="article1">
<h3>Article 1</h3>
<p>Article 1 content here...</p>
</article>
</section>
</body>
<aside> element
aside element is used within content to represent material that is tangential or aside:
<p> This is main content <p>
<aside>
<h5> Aside Heading </h5>
<p> This is a text which is set aside and not belong to main content </p>
</aside>
Above is the list of elements which adds to the structure of document. There are many more elements which have been added but they are not directly related to structure of the document.
