1 / 26

NEW HTML5 LAYOUT ELEMENTS

NEW HTML5 LAYOUT ELEMENTS. <body>. <div id="page">. <div id=" header ">. <div id=" nav ">. <div id= " sidebar ">. <div id="content">. <div class=" article ">. <div class=" article ">. <div id=" footer ">. NEW HTML5 LAYOUT ELEMENTS. <body>. <div id="page">. <header>. <div id="nav">.

bsolis
Download Presentation

NEW HTML5 LAYOUT ELEMENTS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <div id="header"> <div id="nav"> <div id= "sidebar"> <div id="content"> <div class="article"> <div class="article"> <div id="footer">

  2. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <header> <div id="nav"> <div id= "sidebar"> <div id="content"> <div class="article"> <div class="article"> <div id="footer">

  3. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <header> <nav> <div id= "sidebar"> <div id="content"> <div class="article"> <div class="article"> <div id="footer">

  4. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <header> <nav> <div id= "sidebar"> <div id="content"> <article> <article> <div id="footer">

  5. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <header> <nav> <aside> <div id="content"> <article> <article> <div id="footer">

  6. NEW HTML5 LAYOUT ELEMENTS <body> <div id="page"> <header> <nav> <aside> <div id="content"> <article> <article> <footer>

  7. HEADER <header> <header> <h1>Yoko's Kitchen</h1> <nav> <ul> <li><a href="">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul> </nav></header>

  8. FOOTER <footer> <footer> &copy; 2011 Yoko's Kitchen</footer>

  9. NAVIGATION <nav> <nav> <ul> <li><a href="">home</a></li> <li><a href="">classes</a></li> <li><a href="">catering</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> </ul></nav>

  10. ARTICLES <article> <article> <figure> <img src="bok-choi.jpg" alt="BokChoi" /> <figcaption>Bok Choi</figcaption> </figure> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> <p>A five week introduction to traditional Japanese…</p> </article>

  11. ASIDE <aside> <aside> <section class="popular-recipes"> <h2>Popular Recipes</h2> <a href="">Yakitori (...)</a> <a href="">Tsukune (...)</a> <a href="">Okonomiyaki (...)</a> <a href="">Mizutaki (...)</a> </section></aside>

  12. SECTIONS <section> <section class="popular-recipes"> <h2>Popular Recipes</h2> <a href="">Yakitori (...)</a> <a href="">Tsukune (...)</a> <a href="">Okonomiyaki (...)</a> <a href="">Mizutaki (...)</a></section>

  13. HEADING GROUPS <hgroup> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3></hgroup>

  14. FIGURES <figure> <figcaption> <figure> <img src="images/bok-choi.jpg" alt="Bok Choi" /> <figcaption>Bok Choi</figcaption></figure>

  15. LINKING AROUND BLOCK-LEVEL ELEMENTS <a href="introduction.html"> <article> <figure> <img src="bokchoi.jpg" alt="BokChoi" /> <figcaption>Bok Choi</figcaption> </figure> <hgroup> <h2>Japanese Vegetarian</h2> <h3>Five week course in London</h3> </hgroup> </article> </a>

  16. HELPING OLDER BROWSERS UNDERSTAND header, section, footer, aside, nav, article, figure, figcaption { display: block;}

  17. HELPING OLDER BROWSERS HTML SHIV <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/ /svn/trunk/html5.js"> </script><![endif]-->

  18. SUMMARY The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure.

  19. SUMMARY The new elements provide clearer code (compared with using multiple <div> elements).

  20. SUMMARY Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements.

  21. SUMMARY To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.

More Related