Html 5 Semantics overview


Published on

Just a quick overview of basic semantic elements that comes with html 5

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html 5 Semantics overview

  1. 1. HTML 5Semantic ElementsOverview
  2. 2. Structural Semantics
  3. 3. <header></header> Old html style<div id=“header”> <h1> Important heading </h1></div> Semantic style<header> <h1> Important heading </h1></header>
  4. 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. 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. 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. 7. <footer></footer> Old html style<div id=“footer”> <h1> Important heading </h1></div> Semantic style<footer> <h1> Important heading </h1></footer>
  8. 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> , andyou don’t need to style the section
  9. 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 existon his own line newspaper article or blog post.
  10. 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 ofthe web page. The navigation could be primary or secondary.
  11. 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. 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. 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 elementWrap semantic (image/ diagram / code block / canvas ) from the mainflow of the document, (related to the main topic)
  14. 14. Time and Location Semantics
  15. 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 FormatTime element without datetime attribute must contain only valid date / time /date and time / time zone etc.
  16. 16. <time></time> (with datetime attribute)<time datetime=“2012 – 21 - 12 ”>The end of the world</time> Valid Date / Time / Date – time FormatWhen we use datetime attribute we can add extra info between opening andclosing <time> tag
  17. 17. Audio and Video Semantics
  18. 18. <video></video> | <audio></audio><video src=“video_file.ogg”> It’s shown if the browser doesn’tBrowser support massage Support video element</video><audio src=“audio_file.mp3”> It’s shown if the browser doesn’tBrowser support massage Support audio element</audio>Build in media support for video and audio files in differentformats. For detailed specification: