Migrazione HTML5

Migrazione da HTML4 a HTML5

Questo capitolo spiega come migrare da una pagina HTML4 tipica a una HTML5 tipica.

Questo capitolo dimostra come convertire una pagina HTML4 esistente in una pagina HTML5, senza danneggiare il contenuto e la struttura originale.

Nota:Puoi utilizzare le stesse tecniche per migrare da HTML4 a HTML5.

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

Pagina HTML4 tipica

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>Notizie</li>
    <li>Sport</li>
    <li>Meteo</li>
  </ul>
</div>
<div id="content">
<h2>Sezione di Notizie</h2>
<div id="post">
  <h2>Articolo di Notizie</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>Articolo di Notizie</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. Tutti i diritti riservati.</p>
</div>
</body>
</html>

Prova direttamente

Cambia in Doctype HTML5

Modifica il tipo di documento, da doctype HTML4:

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

Modifica in doctype HTML5:

<!DOCTYPE html>

Prova direttamente

Cambia in codifica HTML5

Modifica le informazioni di codifica, da HTML4:

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

Cambia in HTML5:

<meta charset="utf-8">

Prova direttamente

Aggiungi shiv

Tutti i browser moderni supportano gli elementi semantici HTML5.

Inoltre, puoi "insegnare" ai browser obsoleti come gestire gli "elementi sconosciuti".

Aggiungere shiv per il supporto di Internet Explorer:

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

Prova direttamente

Nota:Leggi di più sulle conoscenze di shiv nella sezione di supporto del browser HTML5.

Aggiungere CSS per gli elementi semantici HTML5

Vedere i CSS 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 identici per gli elementi semantici HTML5:
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 direttamente

Confermare HTML5 <header> e <footer>

Modificare gli elementi <div> con id="header" e id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. Tutti i diritti riservati.</p>
</div>

Modificare in elementi semantici HTML5 <header> e <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. Tutti i diritti riservati.</p>
</footer>

Prova direttamente

in HTML5 <nav>

Modificare l'elemento <div> con id="menu":

<div id="menu">
  <ul>
    <li>Notizie</li>
    <li>Sports</a></li>
    <li>Meteo</li>
  </ul>
</div>

Modificare in elementi semantici HTML5 <nav>:

<nav>
  <ul>
    <li>Notizie</li>
    <li>Sports</a></li>
    <li>Meteo</li>
  </ul>
</nav>

Prova direttamente

in HTML5 <section>

Modificare l'elemento <div> con id="content":

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

Modificare in elementi semantici HTML5 <section>:

<section>
.
.
.
</section>

Prova direttamente

in HTML5 <article>

Modificare tutti gli elementi <div> con class="post":

<div class="post">
  <h2>Articolo di Notizie</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

Modificare in elementi semantici HTML5 <article>:

<article>
  <h2>Articolo di Notizie</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

Prova direttamente

Eliminare questi stili "non più necessari":

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 direttamente

Pagina tipica di HTML5

Infine, è possibile eliminare il tag <head>. Non è più necessario 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>Notizie</li>
    <li>Sport</li>
    <li>Meteo</li>
  </ul>
</nav>
<section>
<h2>Sezione di Notizie</h2>
<div id="post">
  <h2>Articolo di Notizie</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>Articolo di Notizie</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. Tutti i diritti riservati.</p>
</footer>
</body>
</html>

Prova direttamente

La differenza tra <article>, <section> e <div>:

Nello standard HTML5, la differenza tra <article>, <section> e <div> è minima e può essere confusa.

Nello standard HTML5, l'elemento <section> è posizionato come blocco degli elementi correlati.

L'elemento <article> è definito come blocco completo e autocontenuto degli elementi correlati.

L'elemento <div> è definito come blocco di sottoelementi.

Come possiamo comprendere?

Negli esempi precedenti, abbiamo utilizzato <section> come contenitore degli articoli correlati.

Ma possiamo anche utilizzare <article> come contenitore degli articoli.

Ecco alcuni esempi diversi:

L'elemento <article> all'interno di <article>:
<article>
<h2>Città famose</h2>
<article>
<h2>London</h2>
<p>London è la capitale della Gran Bretagna. È la città più popolosa del Regno Unito,</p>
<p>con una regione metropolitana di oltre 13 milioni di abitanti.</p>
</article>
<article>
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolosa della Francia.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la regione metropolitana più popolosa del mondo.</p>
</article>
</article>

Prova direttamente

<article> con <div>：</article>
<article>
<h2>Città famose</h2>
<div class="city">
<h2>London</h2>
<p>London è la capitale della Gran Bretagna. È la città più popolosa del Regno Unito,</p>
<p>con una regione metropolitana di oltre 13 milioni di abitanti.</p>
</div>
<div class="city">
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolosa della Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la regione metropolitana più popolosa del mondo.</p>
</div>
</article>

Prova direttamente

<article> con <section> all'interno di <div>：</article>
<article>
<section>
<h2>Città famose</h2>
<div class="city">
<h2>London</h2>
<p>London è la capitale della Gran Bretagna. È la città più popolosa del Regno Unito,</p>
<p>con una regione metropolitana di oltre 13 milioni di abitanti.</p>
</div>
<div class="city">
<h2>Parigi</h2>
<p>Parigi è la capitale e la città più popolosa della Francia.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la regione metropolitana più popolosa del mondo.</p>
</div>
</section>
<section>
<h2>Paesi famosi</h2>
<div class="country">
<h2>Gran Bretagna</h2>
<p>London è la capitale della Gran Bretagna. È la città più popolosa del Regno Unito,</p>
<p>con una regione metropolitana di oltre 13 milioni di abitanti.</p>
</div>
<div class="country">
<h2>Francia</h2>
<p>Parigi è la capitale e la città più popolosa della Francia.</p>
</div>
<div class="country">
<h2>Giappone</h2>
<p>Tokyo è la capitale del Giappone, il centro della Greater Tokyo Area,</p>
e la regione metropolitana più popolosa del mondo.</p>
</div>
</section>
</article>

Prova direttamente