Post on 26-Jan-2017
HTMLEen opfrissing
De HTML startstructuur
1
<html> <head> <title> </title> </head> <body> </body> </html>
De meest eenvoudige HTML startstructuur
<!DOCTYPE html> <html lang="nl"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html>
Een meer uitgebreide, betere HTML startstructuur
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>
Relaties
2
S
<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
Soorten elementen
3
<h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>
Er zijn inline & block-level elementen
<h1> <h2> <p> <ul> <li> <div> <blockquote> … !
Voorbeelden van block-level elementen
Eigenschappen van block-level elementen
• Worden standaard op een nieuwe regel weergegeven
• Kunnen zowel inline als block-level elementen bevatten
<img> <em> <strong> <span> <cite> <label> <i> <b> … !
Voorbeelden van inline elementen
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
<span> <p> Why join the navy, if you can be a pirate? </p> </span> !
Zoek de fout—
<b><h1>Een citaat</h1></b> <blockquote> <p> Stay hungry, stay <em>foolish</em>. </p> <cite>—Steve Jobs</cite> </blockquote> !
Zoek de fout—
<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—
“de uitzondering die de regel bevestigt”
<a>
“Het blijft een inline element, maar je kan er nu ook block-level elementen in plaatsen.”
—W3C HTML5 specification
<h1><a>Artikel titel</a></h1> <p><a><img></a></p> <p><a>Eerste alinea</a></p> <p><a>Lees meer »</a></p>
HTML4
<a> <h1>Artikel titel</h1> <p><img></p> <p>Eerste alinea</p> <p>Lees meer »</p> </a>
HTML5
Dubbel & enkelvoudig
4
<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
Blijf consequent in syntax
5
<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
<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
<br> !
Beide correct in HTML5— kies en blijf consequent
<br /> !
<img src="i.jpg" alt="koe"> !
Beide correct in HTML5— kies en blijf consequent
<img src="i.jpg" alt="koe" /> !
Vermijd verouderde HTML6
<font> <center> <strike> <u> … !
Flashback: voorbeelden van verouderde elementen
align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !
Flashback: voorbeelden van verouderde attributen
Oude elementen met vernieuwde betekenis
in HTML5
<b>
“Tekst die anders moet worden weergegeven dan de gewone tekst, zonder extra nadruk mee te geven.”
—W3C HTML5 specification
<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
<small>
“Tekst die ‘de kleine lettertjes’ voorstelt: copyrightinformatie, algemene voorwaarden, legale verplichtingen…”
—W3C HTML5 specification
Schrijf semantische HTML
7
Ken je deze (nieuwere) elementen al? Ze maken je HTML semantischer.
<time>
“Om data, tijdstippen of beide aan te duiden.”
—W3C HTML5 specification
<p> Kom eens langs op <time datetime="2015-04-07"> 7 april</time>. </p>
<time>
<p> De staking vond plaats in <time datetime="1933-11">november </time> van dat jaar. </p>
<time>
<p> Op <time datetime="01-01"> 1 januari</time> zijn we gesloten. </p>
<time>
<p> Ik ben geboren in <time datetime="1980">1980 </time>. </p>
<time>
<p> Het wonder vond plaats op <time datetime="2012-06-13 20:18"> 13 juni 2012</time>. </p>
<time>
<section>
“Om inhoudelijk gerelateerde zaken te groeperen.”
—W3C HTML5 specification
<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>
<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
<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.
<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
<body> <header> (logo en navigatie) </header> (rest van de pagina) </body>
<header>
<section> <header> <p>Een introductie tot…</p> <h1>Moestuinieren</h1> </header> <p> Elke lente begint het weer te kriebelen. </p> </section>
<header>
<footer>
“Bevat meer informatie over het element waarin footer zich bevindt: auteur, copyrightinformatie, links naar gerelateerde informatie…”
—W3C HTML5 specification
<body> <header> (logo en navigatie) </header> (rest van de pagina) <footer> (copyrightinfo, contactinfo…) </footer> </body>
<footer>
<section> <header> <h1>Moestuinieren</h1> </header> <p>Elke lente begint het weer te kriebelen.</p> <footer> <p>Auteur: Thomas Byttebier</p> </footer> </section>
<footer>
<main>
“Bevat de belangrijkste content van de body van een webpagina. Het kan daarom maar 1 keer voorkomen op een pagina.”
—W3C HTML5 specification
<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
<main>
“Het main element mag geen nakomeling zijn van een article, aside, footer, header of nav element.”
—W3C HTML5 specification
<body> <header> (logo en navigatie) </header> <main> (belangrijkste content) </main> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<main>
<!-- 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 -->
<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
<nav>
“Bevat belangrijke navigatielinks.”
—W3C HTML5 specification
<body> <header> (logo) <nav>(unordered list)</nav> </header> <main> (belangrijkste content) </main> <aside> (zijinformatie) </aside> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<nav>
<figure>
“Bevat een op zich staand beeld: foto, video, illustratie… (optioneel) met een onderschrift. ”
—W3C HTML5 specification
<figcaption>
“Bevat het onderschrift van een figure.”
—W3C HTML5 specification
<figure> <img src="o.jpg" alt="twee meisjes"> <figcaption> Twee meisjes op het strand van Oostduinkerke. Ze lezen modebladen. </figcaption> </figure>
<figure>
<figure> <img src="d.jpg" alt="diagram"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
<figure>
<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>
Bron: html5doctor.com
Eenvoudig advies: gebruik enkel figure wanneer je beeld ook een onderschrift (figcaption) heeft.
Deze nieuwere elementen zijn bruikbaar, mits een regel CSS:
article, aside, figure, figcaption, footer, header, main, nav, section { display:block; }
Internet Explorer < 9 heeft ook wat javascript nodig: de HTML5 shiv
<!--[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
<!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
De nieuwe document outline van HTML5
“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
<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
<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
“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
Meer weten? Nalezen?
That’s it!
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
And that’s really it!