html opfrissing
TRANSCRIPT
![Page 1: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/1.jpg)
HTMLEen opfrissing
![Page 2: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/2.jpg)
De HTML startstructuur
1
![Page 3: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/3.jpg)
<html> <head> <title> </title> </head> <body> </body> </html>
De meest eenvoudige HTML startstructuur
![Page 4: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/4.jpg)
<!DOCTYPE html> <html lang="nl"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html>
Een meer uitgebreide, betere HTML startstructuur
![Page 5: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/5.jpg)
Inclusief link naar externe JavaScript en CSS-bestanden
<!DOCTYPE html> <html lang="nl"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="layout.css" /> <script src="js.js"></script> </head> <body> <!-- Jouw webpagina code --> </body> </html>
![Page 6: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/6.jpg)
Relaties
2
![Page 7: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/7.jpg)
S
![Page 8: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/8.jpg)
<h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>
HTML elementen staan in relatie met elkaar
![Page 9: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/9.jpg)
Soorten elementen
3
![Page 10: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/10.jpg)
<h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>
Er zijn inline & block-level elementen
![Page 11: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/11.jpg)
<h1> <h2> <p> <ul> <li> <div> <blockquote> … !
Voorbeelden van block-level elementen
![Page 12: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/12.jpg)
Eigenschappen van block-level elementen
• Worden standaard op een nieuwe regel weergegeven
• Kunnen zowel inline als block-level elementen bevatten
![Page 13: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/13.jpg)
<img> <em> <strong> <span> <cite> <label> <i> <b> … !
Voorbeelden van inline elementen
![Page 14: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/14.jpg)
Eigenschappen van inline elementen
• Worden niet op een nieuwe regel weergegeven
• Kunnen geen block-level elementen bevatten
• Moeten altijd in een block-level element zitten
![Page 15: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/15.jpg)
<span> <p> Why join the navy, if you can be a pirate? </p> </span> !
Zoek de fout—
![Page 16: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/16.jpg)
<b><h1>Een citaat</h1></b> <blockquote> <p> Stay hungry, stay <em>foolish</em>. </p> <cite>—Steve Jobs</cite> </blockquote> !
Zoek de fout—
![Page 17: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/17.jpg)
<h1>Leer de regels</h1> <p>Dan weet je tenminste wanneer je ze kan overtreden.</p> <img src="b.png" alt="beethoven"> !
Zoek de fout—
![Page 18: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/18.jpg)
“de uitzondering die de regel bevestigt”
![Page 19: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/19.jpg)
<a>
“Het blijft een inline element, maar je kan er nu ook block-level elementen in plaatsen.”
—W3C HTML5 specification
![Page 20: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/20.jpg)
![Page 21: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/21.jpg)
![Page 22: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/22.jpg)
<h1><a>Artikel titel</a></h1> <p><a><img></a></p> <p><a>Eerste alinea</a></p> <p><a>Lees meer »</a></p>
HTML4
![Page 23: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/23.jpg)
<a> <h1>Artikel titel</h1> <p><img></p> <p>Eerste alinea</p> <p>Lees meer »</p> </a>
HTML5
![Page 24: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/24.jpg)
Dubbel & enkelvoudig
4
![Page 25: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/25.jpg)
<h1>Contactgegevens</h1> <p> Het Perspectief<br> Henleykaai 83<br> 9000 Gent </p> <p> <img src="hp.png" alt="School"> </p>
Er zijn dubbele & enkelvoudige elementen
![Page 26: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/26.jpg)
Blijf consequent in syntax
5
![Page 27: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/27.jpg)
<H1>Syntaxregels</H1> <P> Jantje zag eens pruimen hangen,<BR> O!<br /> als eieren zo groot </p> <p class=beeldje> <img src=jan.jpg alt="jantje"> </P> !
Correcte HTML, maar niet echt consequent
![Page 28: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/28.jpg)
<h1>Syntaxregels</h1> <p> Jantje zag eens pruimen hangen,<br> O!<br> als eieren zo groot </p> <p class="beeldje"> <img src="jan.jpg" alt="jantje"> </p> !
Kies een striktere stijl, gebaseerd op de XHTML syntax
![Page 29: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/29.jpg)
<br> !
Beide correct in HTML5— kies en blijf consequent
<br /> !
![Page 30: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/30.jpg)
<img src="i.jpg" alt="koe"> !
Beide correct in HTML5— kies en blijf consequent
<img src="i.jpg" alt="koe" /> !
![Page 31: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/31.jpg)
Vermijd verouderde HTML6
![Page 32: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/32.jpg)
<font> <center> <strike> <u> … !
Flashback: voorbeelden van verouderde elementen
![Page 33: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/33.jpg)
align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !
Flashback: voorbeelden van verouderde attributen
![Page 34: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/34.jpg)
Oude elementen met vernieuwde betekenis
in HTML5
![Page 35: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/35.jpg)
<b>
“Tekst die anders moet worden weergegeven dan de gewone tekst, zonder extra nadruk mee te geven.”
—W3C HTML5 specification
![Page 36: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/36.jpg)
![Page 37: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/37.jpg)
<i>
“Tekst die in een andere stem of sfeer moet worden gelezen dan de gewone tekst, zonder extra nadruk mee te geven.”
—W3C HTML5 specification
![Page 38: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/38.jpg)
![Page 39: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/39.jpg)
![Page 40: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/40.jpg)
<small>
“Tekst die ‘de kleine lettertjes’ voorstelt: copyrightinformatie, algemene voorwaarden, legale verplichtingen…”
—W3C HTML5 specification
![Page 41: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/41.jpg)
![Page 42: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/42.jpg)
![Page 43: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/43.jpg)
Schrijf semantische HTML
7
![Page 44: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/44.jpg)
Ken je deze (nieuwere) elementen al? Ze maken je HTML semantischer.
![Page 45: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/45.jpg)
<time>
“Om data, tijdstippen of beide aan te duiden.”
—W3C HTML5 specification
![Page 46: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/46.jpg)
<p> Kom eens langs op <time datetime="2015-04-07"> 7 april</time>. </p>
<time>
![Page 47: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/47.jpg)
<p> De staking vond plaats in <time datetime="1933-11">november </time> van dat jaar. </p>
<time>
![Page 48: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/48.jpg)
<p> Op <time datetime="01-01"> 1 januari</time> zijn we gesloten. </p>
<time>
![Page 49: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/49.jpg)
<p> Ik ben geboren in <time datetime="1980">1980 </time>. </p>
<time>
![Page 50: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/50.jpg)
<p> Het wonder vond plaats op <time datetime="2012-06-13 20:18"> 13 juni 2012</time>. </p>
<time>
![Page 51: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/51.jpg)
![Page 52: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/52.jpg)
![Page 53: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/53.jpg)
<section>
“Om inhoudelijk gerelateerde zaken te groeperen.”
—W3C HTML5 specification
![Page 54: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/54.jpg)
<section> <h1>HTML5</h1> <p>HTML5 is de toekomst.</p> <p>Er is geen weg terug.</p> <p><img src="i.jpg" alt=""></p> </section>
<section>
![Page 55: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/55.jpg)
<article>
“Om inhoudelijk gerelateerde zaken te groeperen. De inhoud blijft duidelijk als die uit de context van de website gehaald zou worden (bijv. in een RSS-lezer).”
—W3C HTML5 specification
![Page 56: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/56.jpg)
![Page 57: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/57.jpg)
![Page 58: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/58.jpg)
<article> vs <section>
• Beide hebben in principe een titel (heading). • article is een speciale vorm van section: het
heeft meer semantische betekenis: een onafhankelijk, op-zich-staand stukje inhoud.
• Gebruik article als je de inhoud naar een vriend kan e-mailen: het houdt nog steeds steek buiten de context van de website.
• Het houdt geen steek buiten de context van de site, maar de inhoud is gerelateerd? Gebruik section.
• De inhoud is niet gerelateerd? Gebruik div.
![Page 59: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/59.jpg)
![Page 60: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/60.jpg)
![Page 61: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/61.jpg)
![Page 62: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/62.jpg)
<header>
“Bevat een groep inleidende of navigatie-elementen voor het element waarin header zich bevindt. Ook logo’s of zoekvelden zijn mogelijke inhoud.”
—W3C HTML5 specification
![Page 63: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/63.jpg)
<body> <header> (logo en navigatie) </header> (rest van de pagina) </body>
<header>
![Page 64: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/64.jpg)
![Page 65: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/65.jpg)
<section> <header> <p>Een introductie tot…</p> <h1>Moestuinieren</h1> </header> <p> Elke lente begint het weer te kriebelen. </p> </section>
<header>
![Page 66: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/66.jpg)
<footer>
“Bevat meer informatie over het element waarin footer zich bevindt: auteur, copyrightinformatie, links naar gerelateerde informatie…”
—W3C HTML5 specification
![Page 67: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/67.jpg)
<body> <header> (logo en navigatie) </header> (rest van de pagina) <footer> (copyrightinfo, contactinfo…) </footer> </body>
<footer>
![Page 68: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/68.jpg)
![Page 69: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/69.jpg)
<section> <header> <h1>Moestuinieren</h1> </header> <p>Elke lente begint het weer te kriebelen.</p> <footer> <p>Auteur: Thomas Byttebier</p> </footer> </section>
<footer>
![Page 70: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/70.jpg)
<main>
“Bevat de belangrijkste content van de body van een webpagina. Het kan daarom maar 1 keer voorkomen op een pagina.”
—W3C HTML5 specification
![Page 71: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/71.jpg)
<main>
“Bevat content die uniek is voor de pagina, en bevat vooral geen content die herhaald wordt doorheen een set van pagina’s: site-navigatie, copyrightinfo, logo’s…”
—W3C HTML5 specification
![Page 72: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/72.jpg)
<main>
“Het main element mag geen nakomeling zijn van een article, aside, footer, header of nav element.”
—W3C HTML5 specification
![Page 73: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/73.jpg)
<body> <header> (logo en navigatie) </header> <main> (belangrijkste content) </main> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<main>
![Page 74: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/74.jpg)
<!-- other content --> !<main> <h1>Skateboards</h1> <p>The skateboard is the way cool kids get around</p> <article> <h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> </article> ! <article> <h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by a battery.</p> <p>... </p> </article> </main> !<!-- other content -->
![Page 75: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/75.jpg)
![Page 76: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/76.jpg)
![Page 77: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/77.jpg)
![Page 78: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/78.jpg)
<aside>
“Bevat informatie die zijdelings gerelateerd is aan de inhoud rond het aside element, en die als aparte content gezien kan worden: pull quotes, zijkolommen, reclame, navigatie…”
—W3C HTML5 specification
![Page 79: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/79.jpg)
![Page 80: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/80.jpg)
![Page 81: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/81.jpg)
<nav>
“Bevat belangrijke navigatielinks.”
—W3C HTML5 specification
![Page 82: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/82.jpg)
<body> <header> (logo) <nav>(unordered list)</nav> </header> <main> (belangrijkste content) </main> <aside> (zijinformatie) </aside> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<nav>
![Page 83: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/83.jpg)
![Page 84: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/84.jpg)
<figure>
“Bevat een op zich staand beeld: foto, video, illustratie… (optioneel) met een onderschrift. ”
—W3C HTML5 specification
![Page 85: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/85.jpg)
<figcaption>
“Bevat het onderschrift van een figure.”
—W3C HTML5 specification
![Page 86: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/86.jpg)
<figure> <img src="o.jpg" alt="twee meisjes"> <figcaption> Twee meisjes op het strand van Oostduinkerke. Ze lezen modebladen. </figcaption> </figure>
<figure>
![Page 87: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/87.jpg)
<figure> <img src="d.jpg" alt="diagram"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
<figure>
![Page 88: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/88.jpg)
<figure> <img src="d.jpg" alt=“diagram 10"> <img src="d2.jpg" alt=“diagram 11"> <img src="d3.jpg" alt=“diagram 12"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
<figure>
![Page 89: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/89.jpg)
Bron: html5doctor.com
![Page 90: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/90.jpg)
Eenvoudig advies: gebruik enkel figure wanneer je beeld ook een onderschrift (figcaption) heeft.
![Page 91: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/91.jpg)
Deze nieuwere elementen zijn bruikbaar, mits een regel CSS:
article, aside, figure, figcaption, footer, header, main, nav, section { display:block; }
![Page 92: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/92.jpg)
Internet Explorer < 9 heeft ook wat javascript nodig: de HTML5 shiv
![Page 93: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/93.jpg)
<!--[if lt IE 9]> <script src=“http:// html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> <style> article, aside, figure, figcaption, footer, header, main, nav, section { display:block; } </style>
Voeg ze toe aan je startstructuur: nieuwere elementen in elke browser
![Page 94: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/94.jpg)
<!DOCTYPE html> <html lang="nl"> <head> <title></title> <meta charset="utf-8" /> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, figcaption, footer, header, main, nav, section { display:block; } </style> <link rel="stylesheet" href="css/screen.css" /> <script src="js/js.js"></script> </head> <body> </body> </html>
De allesomvattende HTML5 startstructuur
![Page 95: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/95.jpg)
De nieuwe document outline van HTML5
![Page 96: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/96.jpg)
“The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document. The user agent can apply this information to generate a table of contents, for example.”
—HTML5doctor.com
![Page 97: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/97.jpg)
<h1>Altijd de belangrijkste kop van de volledige pagina</h1> <h2>Nieuwsitem</h2> <p>Tekst</p> <h3>Subkop</h3> <p>Tekst</p> <h3>Subkop</h3> <p>Tekst</p> ...
De document outline van HTML4
![Page 98: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/98.jpg)
<h1>Belangrijkste kop van de volledige pagina</h1> <article> <h1>Belangrijkste kop van article</h1> <p>Tekst</p> <h2>Subkop van article</h2> <p>Tekst</p> <h2>Subkop van article</h2> <p>Tekst</p> </article>
De document outline van HTML5
![Page 99: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/99.jpg)
“There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.”
—W3C HTML5 specification
![Page 100: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/100.jpg)
![Page 101: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/101.jpg)
Meer weten? Nalezen?
![Page 102: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/102.jpg)
That’s it!
![Page 103: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/103.jpg)
Onthou je het vorige, dan rest je enkel:
• Leer de elementen kennen (lijst) • Zijn ze block-level of inline? • Valideer je syntax • Redeneer logisch om te bepalen
welk element het best bepaalde inhoud kan weergeven
![Page 104: HTML opfrissing](https://reader031.vdocuments.net/reader031/viewer/2022021918/58896dbf1a28ab44758b5dc5/html5/thumbnails/104.jpg)
And that’s really it!