The document discusses various new semantic HTML5 elements such as <header>, <footer>, <nav>, <article>, <section>, <aside>, <figure>, <figcaption>, <time>, <video>, and <audio>. It provides examples of how to properly use each element and brief descriptions of what each element represents and when it would be appropriate to use. The key changes in HTML5 are the introduction of these new semantic elements which allow marking up sections of a document in a way that conveys meaning rather than just presentation.

1. HTML 5
Semantic Elements
Overview

2. Structural Semantics

3. <header></header>
Old html style
<div id=“header”>
<h1> Important heading </h1>
</div>
Semantic style
<header>
<h1> Important heading </h1>
</header>

4. How to use it
<header> Single header represent the main
<h1> heading </h1> header of the web page
</header>
<article>
<header> Header element used as article
<h1> heading </h1> header
</header>
<p>
Some content
</p>
</article>

5. How to use it
<header>
<h1> heading </h1>
</header> W3C Recommend, to use header
element with some <h1> - <h6>
element but it’s not strictly required
<article>
<header>
<h1> heading </h1>
</header>
<p>
Some content
</p>
</article>

6. <hgroup></hgroup>
<hgroup>
Wrap multiple H1-H6 elements
<h1> HTML 5 </h1> with related meaning .
<h2> the new way </h2> Title and Subtitle
</hgroup>
<header>
<hgroup>
<h1>HTML 5</h1> Typical place for hgroup element
<h2>the new way </h2> is in the header element
</hgroup>
</header>

7. <footer></footer>
Old html style
<div id=“footer”>
<h1> Important heading </h1>
</div>
Semantic style
<footer>
<h1> Important heading </h1>
</footer>

8. <section></section>
<section>
<h1>Title #1</h1> Section Element Wrap some
<p>Some content</p> generic content
</section>
<section>
<h1>Title #2</h1> It’s good idea to start with
Heading element
<p>Some content</p>
</section>
Use section only if it’s not appropriate to use <article> , and
you don’t need to style the section

9. <article></article>
<article>
<header> Usually have a header with
<h1>Title</h1> information about the article
</header>
<p>Some content</p>
<footer>
Auto Info Usually have a footer with
</footer> information about the autor
</article>
<article> Element wrap self-contained composition in a Web page which can exist
on his own line newspaper article or blog post.

10. <nav></nav>
<nav>
<ul>
<lI><a href=“home.html”>Home</a></li>
<lI><a href=“about_us.html”>About us</a></li>
<lI><a href=“portfolio.html”>Portfolio</a></li>
</ul>
</nav>
Using of <nav> element is self explanatory, it’s wrap a navigation element of
the web page. The navigation could be primary or secondary.

11. <aside></aside> (as a secondary content)
<aside>
<h1>My favorite tweets </h1>
<ul> <aside> element outside of
<lI> Some tweet #1</li> <article> element wrap
secondary content related to the
<li> Some tweet #2</li>
web page
</ul>
</aside>
<aside> element it’s not obligatory a sidebar element(visually)

12. <aside></aside> (as a related to main content)
<article>
<p>Main article content</p> Main article content
<aside>
<h2>Related content</h2>
<ul>
<aside> element in <article> element
<lI> Content #1</li> wrap secondary content related to the
<li> Content #2</li> article content
</ul>
</aside>
</article>

13. <figure></figure> | <figcaption> </figcaption>
<figure>
<img src=“some_img.png” alt=“some img”/>
<figcaption>
Just Some Image no big deal
</figcaption>
</figure>
Description of the targeted element
Wrap semantic (image/ diagram / code block / canvas ) from the main
flow of the document, (related to the main topic)

14. Time and Location Semantics

15. <time></time> (without datetime attribute)
<time>2012 - 21 - 12</time> Valid Date Format
<time>15:30</time> Valid Time Format
<time>-08:00</time> Valid Time Zone Format
<time>2012 - 21 - 12 15:30</time> Valid Date and Time Format
Time element without datetime attribute must contain only valid date / time /
date and time / time zone etc.

16. <time></time> (with datetime attribute)
<time datetime=“2012 – 21 - 12 ”>
The end of the world
</time>
Valid Date / Time / Date – time Format
When we use datetime attribute we can add extra info between opening and
closing <time> tag

17. Audio and Video Semantics

18. <video></video> | <audio></audio>
<video src=“video_file.ogg”> It’s shown if the browser doesn’t
Browser support massage
Support video element
</video>
<audio src=“audio_file.mp3”> It’s shown if the browser doesn’t
Browser support massage
Support audio element
</audio>
Build in media support for video and audio files in different
formats. For detailed specification:
http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-video-element