HTML5 Migratie

Overgang van HTML4 naar HTML5

Dit hoofdstuk legt uit hoe een typische HTML4-pagina kan worden overgezet naar een typische HTML5.

Dit hoofdstuk demonstreert hoe een bestaande HTML4-pagina kan worden omgezet naar een HTML5-pagina, zonder de originele inhoud en structuur te beschadigen.

Opmerking:U kunt dezelfde technieken gebruiken om van HTML4 en XHTML over te stappen naar HTML5.

Een typische HTML4 Een typische HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Een typische HTML4-pagina

Voorbeeld

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>Nieuws</li>
    <li>Sport</li>
    <li>W气象</li>
  </ul>
</div>
<div id="content">
<h2>Nieuws Sectie</h2>
<div id="post">
  <h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. Alle rechten voorbehouden.</p>
</div>
</body>
</html>

Probeer het zelf

naar HTML5 Doctype

Wijzig de documenttype, van HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Wijzig naar HTML5 doctype:

<!DOCTYPE html>

Probeer het zelf

naar HTML5 codering

Wijzig de coderingsinformatie, van HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

Wijzig naar HTML5:

<meta charset="utf-8">

Probeer het zelf

Voeg shiv toe

Alle moderne browsers ondersteunen HTML5 semantische elementen.

Bovendien, je kunt oude browsers "leren" hoe ze onbekende elementen moeten afhandelen.

Shiv toegevoegd voor Internet Explorer-ondersteuning:

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

Probeer het zelf

Opmerking:Lees meer over shiv in de sectie HTML5 browserondersteuning.

Voeg CSS toe voor HTML5 semantische elementen

Bekijk de bestaande CSS-stijlen:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Dupliceer met dezelfde CSS-stijlen voor HTML5 semantische elementen:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Probeer het zelf

naar HTML5 <header> en <footer>

Verander de <div> elementen met id="header" en id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Alle rechten voorbehouden.</p>
</div>

Wijzig naar HTML5 semantische elementen <header> en <footer>：

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Alle rechten voorbehouden.</p>
</footer>

Probeer het zelf

naar HTML5 <nav>

Wijzig het <div>-element met id="menu":

<div id="menu">
  <ul>
    <li>Nieuws</li>
    <li>Sports</a></li>
    <li>W气象</li>
  </ul>
</div>

Wijzig naar HTML5 semantische elementen <nav>:

<nav>
  <ul>
    <li>Nieuws</li>
    <li>Sports</a></li>
    <li>W气象</li>
  </ul>
</nav>

Probeer het zelf

naar HTML5 <section>

Wijzig het <div>-element met id="content":

<div id="content">
.
.
.
</div>

Wijzig naar HTML5 semantische elementen <section>:

<section>
.
.
.
</section>

Probeer het zelf

naar HTML5 <article>

Wijzig alle <div>-elementen met class="post":

<div class="post">
  <h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Wijzig naar HTML5 semantische elementen <article>:

<article>
  <h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Probeer het zelf

Verwijder deze "niet meer benodigde" stijlen:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Probeer het zelf

Typische HTML5-pagina

U kunt tenslotte de <head>-tag verwijderen. HTML5 heeft deze niet meer nodig:

Voorbeeld

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>Nieuws</li>
    <li>Sport</li>
    <li>W气象</li>
  </ul>
</nav>
<section>
<h2>Nieuws Sectie</h2>
<div id="post">
  <h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>Nieuws Artikel</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. Alle rechten voorbehouden.</p>
</footer>
</body>
</html>

Probeer het zelf

Het verschil tussen <article>, <section> en <div>:

In de HTML5-standaard is het verschil tussen <article>, <section> en <div> klein en kan het verwarrend zijn.

In de HTML5-standaard wordt het <section>-element geplaatst als een blok voor relevante elementen.

Het <article>-element wordt gedefinieerd als een volledige, zelfinhoudende blok voor relevante elementen.

Het <div>-element wordt gedefinieerd als een blok voor subelementen.

Hoe moeten we dit begrijpen?

In het voorbeeld hierboven hebben we <section> gebruikt als container voor relevante <articles>.

Maar we kunnen <article> ook gebruiken als een container voor artikelen.

Hier zijn enkele verschillende voorbeelden:

In <article> van <article>:
<article>
<h2>Bekende Steden</h2>
<article>
<h2>London</h2>
<p>London is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk,</p>
<p>met een metropoolregio van meer dan 13 miljoen inwoners.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is de hoofdstad en meest bevolkte stad van Frankrijk.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,</p>
en de meest bevolkte metropoolregio ter wereld.</p>
</article>
</article>

Probeer het zelf

<article> van <div>：</article>
<article>
<h2>Bekende Steden</h2>
<div class="city">
<h2>London</h2>
<p>London is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk,</p>
<p>met een metropoolregio van meer dan 13 miljoen inwoners.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is de hoofdstad en meest bevolkte stad van Frankrijk.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,</p>
en de meest bevolkte metropoolregio ter wereld.</p>
</div>
</article>

Probeer het zelf

<article> van <section> van <div>：</article>
<article>
<section>
<h2>Bekende Steden</h2>
<div class="city">
<h2>London</h2>
<p>London is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk,</p>
<p>met een metropoolregio van meer dan 13 miljoen inwoners.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is de hoofdstad en meest bevolkte stad van Frankrijk.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,</p>
en de meest bevolkte metropoolregio ter wereld.</p>
</div>
</section>
<section>
<h2>Bekende Landen</h2>
<div class="country">
<h2>Engeland</h2>
<p>London is de hoofdstad van Engeland. Het is de meest bevolkte stad in het Verenigd Koninkrijk,</p>
<p>met een metropoolregio van meer dan 13 miljoen inwoners.</p>
</div>
<div class="country">
<h2>Frankrijk</h2>
<p>Paris is de hoofdstad en meest bevolkte stad van Frankrijk.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is de hoofdstad van Japan, het centrum van de Grote Tokyo-regio,</p>
en de meest bevolkte metropoolregio ter wereld.</p>
</div>
</section>
</article>

Probeer het zelf