La migrazione da HTML4 a HTML5
Questo capitolo è interamente su come migrare da HTML4 a HTML5.
In questo capitolo viene illustrato come convertire una pagina HTML4 in una pagina HTML5, senza distruggere nulla del contenuto o struttura originale.
È possibile migrare da XHTML per HTML5, utilizzando la stessa ricetta.
| HTML4 tipica | HTML5 tipica |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <article> |
| <div id="footer"> | <footer> |
Un tipico HTML4 Pagina
Esempio
<!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>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
<h2>News Article</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>News Article</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>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html> Prova tu stesso " Cambiare per HTML5 Doctype
Modificare il doctype, dal doctype HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">al doctype HTML5:
Cambiare per HTML5 codifica
Modificare le informazioni di codifica, da HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">a HTML5:
Aggiungere Lo Shiv
HTML5 elementi semantici sono supportati in tutti i browser moderni.
Inoltre, è possibile "teach" i vecchi browser come gestire "unknown elements" .
Aggiungere the shiv per il supporto di Internet Explorer:
Esempio
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> Prova tu stesso " Leggi the shiv in Supporto browser HTML5 .
Aggiungere CSS per HTML5 Semantic Elementi
Guardate i vostri stili CSS già esistenti:
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;
}Duplicare con stili CSS uguali per HTML5 elementi semantici:
Esempio
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;
} Prova tu stesso " Cambiare per HTML5 <header> e <footer>
Modificare i <div> elementi con id="header" e id="footer" :
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>per HTML5 semantici <header> e <footer> elementi:
Esempio
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer> Prova tu stesso " Cambia per HTML5 <nav>
Modificare il <div> elemento con id="menu" :
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>ad un elemento HTML5 semantici <nav>:
Cambia per HTML5 <section>
Modificare il <div> elemento con id="content" :
<div id="content">
.
.
.
</div>a un elemento <section> HTML5 semantici:
Cambia per HTML5 <article>
Cambiare tutto <div> elemento con class="post" :
<div class="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>per HTML5 semantici <article> elementi:
Esempio
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article> Prova tu stesso " Elimina questa "no longer needed" <style> elementi:
Esempio
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;
} Prova tu stesso " Un tipico HTML5 Pagina
Infine è possibile rimuovere i <head> tag. Essi non sono necessari in HTML5:
Esempio
<!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>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</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>
</article>
<article>
<h2>News Article</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>
</article>
</section>
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html> Prova tu stesso " La differenza tra <article> <section> e <div>
C'è una confusione (lack of) differenza nello standard HTML5, tra <article> <section> e <div> .
Nello standard HTML5, il <section> elemento è definito come un blocco di elementi correlati.
Il <article> elemento è definito come un blocco completo, autonomo di elementi correlati.
Il <div> elemento è definito come un blocco di elementi per bambini.
Come interpretare questo?
Nell'esempio di cui sopra, abbiamo usato <section> come contenitore per related <articles> .
Ma, avremmo potuto utilizzare <article> come contenitore per gli articoli pure.
Ecco alcuni esempi differenti:
<article> in <article> :
<article>
<h2>Famous Cities</h2>
<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>
</article> Prova tu stesso " <div> in <article> :
<article>
<h2>Famous Cities</h2>
<div class="city">
<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>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<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>
</div>
</article> Prova tu stesso " <div> in <section> in <article> :
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<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>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<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>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</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>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</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>
</div>
</section>
</article> Prova tu stesso "