HTML5 Taste4U
Waarom HTML 5 De HTML5-tags definiëren de content waardoor de betekenis van onderdelen duidelijk wordt. Semantisch element: beschrijft de betekenis van een onderdeel Voordeel voor: Browser Developers Zoekmachines
Wat is het verschil met HTML 4? Simpelere DOCTYPE: <!DOCTYPE html> Simpelere charset: <meta charset="UTF-8"> In plaats van <div id=“header”></div> <header></header> Opbouw HTML5-document
HTML5-tags <header> Groepeert de introductie boven platte tekst (kop + tagline) Kan meerdere keren voorkomen (in main, article en section) <article> <header> <h1>Most important heading here</h1> <h3>Less important heading here</h3> <p>Some additional information here</p> </header> <p>Lorem Ipsum dolor set amet....</p> </article>
HTML5-tags <nav> Groepeert navigatielinks LET OP: niet alle links op de pagina zitten in een <nav> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
HTML5-tags <footer> Bevat informatie zoals: auteur, copyright, links, contactinformatie, etc. Kan meerdere keren voorkomen (in main, article en section) <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>
HTML5-tags <main> Groepeert de content van de webpagina <main> <h1>Web Browsers</h1> <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p> <article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article> <article> <h1>Internet Explorer</h1> <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p> </article> </main>
HTML5-tags <article> Op zichzelf staand ‘verhaal’, moet onafhankelijk te lezen zijn bijv.: forum, blog post, krantenartikel, comment Heeft een kop, vaak in een header <article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article>
HTML5-tags <section> Thematische groep van content bijv.: introductie, content, contactinfo of de sportsectie in een krant met daarin artikelen per sport Heeft een kop, kan in een header <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
<article> in <section> Een <section> kan meerdere <article>s bevatten <section> <h1>Famous Cities</h1> <article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article> <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article> <article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article> </section>
<section> in <article> Een <article> kan meerdere <section>s bevatten <article> <header> </header> <section id="introduction"> </section> <section id="content"> <section id="summary"> <footer> </footer> </article>
HTML5-tags <aside> Heeft een relatie met de content maar is er geen onderdeel van Vaak in de sidebar <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
HTML5-tags <figure> <figcaption> Groepeert een plaatje <img> en de toelichting daarop <figcaption> <figcaption> Visuele verklaring van een plaatje <figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption> </figure>