Naar inhoud springen

HTML/HTML5

Uit Wikibooks

HTML

Inhoudsopgave
  1. MIME-types
  2. Specificaties
  3. Document Type Definitions
  4. Character sets en HTML Entities
  5. HTML5

HTML5 is een herwerking en uitbreiding van HTML die nieuwe mogelijkheden biedt voor multimedia (audio, video) en gebruikersinteractie (javascript). Door te definiëren hoe de html-code geparsed moet worden door de browser, worden verschillen tussen browsers (Internet explorer, Safari, Firefox, ...) geminimaliseerd.

Deze nieuwe standaard werd ontwikkeld door de WHAWG (Web Hypertext Application Working Group) vanaf 2004 om ongemakken en problemen in webapplicaties op te lossen. HTML5 bepaalt de inhoud en structuur, CSS3 bepaalt de weergave, en javascript bepaalt het gedrag van de webpagina.

Wat is er nieuw?

[bewerken]

Html5 bevat niet alleen nieuwe elementen, maar herdefinieert ook sommige elementen en attributen, zodat het eenvoudiger wordt om html-code te schrijven, en sneller om een pagina te laden in de browser. Bovendien is er een uitgebreide ondersteuning voor interactiviteit en grafische elementen zonder dat er externe API aan te pas komen.

Semantiek

[bewerken]

In plaats van onderverdelingen te maken met DIV met een ID, kan men nu eenvoudiger gebruik maken van opmaakcontainers header, hgroup, nav, section, article, aside, footer.

Andere semantische elementen zijn figure, figcaption, time (Gregoriaanse kalender met 24-uursaanduiding), mark.

HTML 5-code: documentstructuur van een html5-pagina

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>documentstructuur van een html5-pagina</title>
    <link rel="stylesheet" href="css3.css" type="text/css">
    <!--[if lt IE9]>
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
  </head> 
  <body>
    <header>
      <h1>Hoofdtitle testpagina</h1>
      <h2>Ondertitel met meer uitleg</h2>
    </header>
    <nav>
      <h2>Navigatielinken</h2>
      <ul>
        <li><a href="link1.htm">link1</a></li>
        <li><a href="link2.htm">link2</a></li>
      <ul>
    </nav>
    <section>
      <article>
        <h2>Artikel</h2>
        <p>paragraaftekst</p>
        <figure>
          <a href=""><img src="" alt="figuur"></a>
        </figure>
      </article>
    </section>
    <aside>
      <h2>Gerelateerde inhoud</h2>
      <ul>
        <li><a href="link3.htm">link3</a></li>
        <li><a href="link4.htm">link4</a></li>
      </ul>
    </aside>
    <footer>
      <p>Copyright <time>2014</time>
         Alle rechten voorbehouden.
         <mark>Voornaam Achternaam Auteur</mark></p>
    </footer>
  </body>
</html>

Elementen

[bewerken]

herwerking

[bewerken]

Deze oude elementen werden geherdefinieerd:

  • dl, dd, dt: definition list, details, details
<dl>
  <dt></dt>
  <dd></dd>
</dl>
  • b, i, small, strong: vette, schuine, kleine, benadrukte tekstopmaak
  • hr: horizontale lijn om tekst onder te verdelen
  • menu: user interface met menukeuzes, toolbars, formulierknoppen

vervanging

[bewerken]

Onderstaande elementen werden verwijderd van de officiële specificatie, omdat ze enkel op de tekstopmaak slaan zonder semantische betekenis. Het is mogelijk dat sommige browser ze nog enige tijd zullen blijven ondersteunen:

  • center: wordt vervangen in CSS door text-align:center of margin:auto
  • basefont: vervangen door body {font-family: family; font-size: size;}
  • big: vervangen door font-size: larger
  • font: vervangen door font-family, font-size, color
  • s, strike: beiden vervangen door text-decoration:line-through
  • tt: vervangen door font-family:monospace
  • u: vervangen door text-decoration:underline
  • applet: vervangen door object
  • acronym: vervangen door abbr (abbreviation)
  • dir: vervangen door ul
  • frameset, frame: te vervangen door fixed-position element of sourced document
  • noframes: geen alternatief, aangezien frames niet meer ondersteund worden
  • isindex: te vervangen door een server-side script
  • align: vervangen in CSS door text-align of float
  • alink: vervangen door a: active {color:color-value;}
  • background, bgcolor: vervangen door background-image , background-color en kortweg background
  • border: vervangen door border-width en kortweg border
  • cellpadding, cellspacing: vervangen door padding en margin
  • frame, height, link, rules: verwijderd

Content types

[bewerken]
  • Flow: article, details, table, form, h1, small
  • Interactive: audio, video, button, select, textarea
  • Heading: h1, h2, hgroup
  • Embedded: audio, video, canvas, embed, svg, img, iframe
  • Sectioning: header, footer, article, section, aside, nav, title
  • Metadata: script, link, style, command, title
  • Phrasing: mark, input, kbc, sub, sup

Gebruikersinteractie

[bewerken]

contenteditable

[bewerken]

Met dit element is het mogelijk om tekstwijzigingen in dezelfde pagina mogelijk te maken. Met javascript kan de aangepaste tekst naar de server doorgestuurd worden om de wijziging op te slaan.

HTML 5-code: voorbeeld van contenteditable

<!DOCTYPE html>
<html lang="nl">
<body>
<p contenteditable="true">Pas deze tekst aan</p>
</body>
</html>

spellcheck

[bewerken]

In combinatie met contenteditable, kan de tekst op spellingsfouten gecontroleerd worden.

HTML 5-code: voorbeeld van spellcheck

<!DOCTYPE html>
<html lang="nl">
<body>
<p contenteditable="true" spellcheck="true">Pas deze tekst met spelfouten aan</p>
</body>
</html>

draggable

[bewerken]

Dit attribuut maakt het mogelijk om een figuur te verslepen over de pagina.

HTML 5-code: voorbeeld van draggable

<!DOCTYPE html>
<html lang="nl">
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/P_Food.png/30px-P_Food.png" draggable="true">
<p draggable="true">Sleep bovenstaande figuur of deze tekst.</p>
</body>
</html>

Met javascript kunnen de bijhorende events (dragstart, drag, dragend, dragenter, dragover, dragleave, drop) afgehandeld worden. Met dataTransfer kunnen gegevens overgekopieerd worden.

e.dataTransfer.getData("text/html");
e.dataTransfer.setData("text/html","tekst en html-code");

Hulpmiddelen

[bewerken]

Ondersteuning voor oudere browsers

[bewerken]

Door onderstaande code in de head van de pagina op te nemen, kunnen html5-pagina's toch goed weergegeven worden in oudere browsers:

<!--[if lt IE9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

Modernizr

[bewerken]

Modernizr is een javascript-library die kan opsporen of de browser een bepaalde html5- of css3-functionaliteit ondersteunt. Zo kunnen deze zaken opgespoord worden: canvas, canvas text, audio, video, local storage, css animation, css gradient. Op die manier is het mogelijk om alternatieven te voorzien.

HTML 5-code: opsporen van compatibiliteit

<!DOCTYPE html>
<html lang="nl" class="no-js">
<head>
<script type="text/javascript" src="modernizr-1.7.min.js">
</script>
</head>
</html>

Meer informatie

[bewerken]
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.