Html 5 Semantics overview
Upcoming SlideShare
Loading in...5

Html 5 Semantics overview



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

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



Total Views
Views on SlideShare
Embed Views



4 Embeds 2,203 1030 1027 144 2



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Html 5 Semantics overview Html 5 Semantics overview Presentation Transcript

  • HTML 5Semantic ElementsOverview
  • Structural Semantics
  • <header></header> Old html style<div id=“header”> <h1> Important heading </h1></div> Semantic style<header> <h1> Important heading </h1></header>
  • 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>
  • 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>
  • <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>
  • <footer></footer> Old html style<div id=“footer”> <h1> Important heading </h1></div> Semantic style<footer> <h1> Important heading </h1></footer>
  • <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
  • <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.
  • <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.
  • <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)
  • <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>
  • <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)
  • Time and Location Semantics
  • <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.
  • <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
  • Audio and Video Semantics
  • <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: