W3docs
it
Accedi

Migrazione a HTML5

In questa pagina trovi informazioni su HTML5, le differenze tra HTML4 e HTML5 e una guida passo passo per migrare da HTML4 a HTML5.

Migrare da HTML4 a HTML5 significa sostituire il vecchio doctype e le dichiarazioni di codifica con i loro equivalenti più brevi in HTML5, rimpiazzare i contenitori generici <div> con elementi semantici e rimuovere i tag e gli attributi presentazionali che HTML5 non supporta più. Questa pagina illustra il processo passo passo e si chiude con un riepilogo utilizzabile come lista di controllo.

Suggerimento

I passaggi descritti di seguito possono essere seguiti anche per migrare da XHTML a HTML5.

Quando si migra da XHTML, ricordarsi di rimuovere l'attributo xmlns="http://www.w3.org/1999/xhtml" dal tag <html>.

Passaggio 1: Modifica del Doctype

Sostituiamo il doctype HTML4 con il doctype HTML5.

HTML4

Doctype HTML4 legacy

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

HTML5

Migrazione HTML5

<!DOCTYPE html>

Passaggio 2: Modifica della Codifica

In questo passaggio sostituiamo le informazioni di codifica HTML4 con la codifica HTML5.

HTML4

Dichiarazione di codifica HTML4 legacy

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

HTML5

Migrazione HTML5

<meta charset="utf-8">

Inoltre, HTML5 consente di omettere l'attributo type dai tag <script> e <style>, poiché il valore predefinito è rispettivamente text/javascript e text/css.

Passaggio 3: Aggiunta dell'HTML5Shiv

Tutti i browser moderni supportano i nuovi elementi semantici di HTML5. Inoltre, è possibile "insegnare" ai browser più vecchi a gestire gli "elementi sconosciuti". L'HTML5Shiv viene utilizzato per abilitare lo stile degli elementi HTML5 in tali browser. Si noti che questo script è ormai ampiamente obsoleto per lo sviluppo web moderno, poiché tutti i browser attuali supportano nativamente gli elementi semantici HTML5.

Migrazione HTML5 - HTML5Shiv

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Passaggio 4: Passaggio agli Elementi Semantici HTML5

In HTML4, si usavano spesso elementi generici <div> con attributi id e class per descrivere la struttura. HTML5 introduce elementi semantici che possono sostituire molti di questi contenitori generici, fornendo a browser, motori di ricerca e tecnologie assistive un quadro più chiaro della pagina. Gli ID e le classi non determinano automaticamente la semantica, ma ecco le sostituzioni strutturali più comuni:

Contenitore HTML4Elemento semantico HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><main>
<div class="article"><article>
<div class="sidebar"><aside>
<div id="footer"><footer>

L'elemento <aside> merita una menzione particolare: contrassegna i contenuti correlati tangenzialmente al contenuto circostante, come una barra laterale, una citazione in evidenza o un blocco di link correlati. Non ha un equivalente diretto in HTML4, quindi viene solitamente introdotto durante la migrazione per sostituire un <div class="sidebar"> o un contenitore simile.

Prima di tutto, vediamo un esempio con elementi HTML4.

Esempio di elementi HTML4:

Esempio HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <style>
      body {
        font-size: 0.9em;
      }
      #header,
      #footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      div.content {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      .article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      #header-menu ul {
        padding: 0;
      }
      #header-menu ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>LaravelSoft</h1>
    </div>
    <div id="header-menu">
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <h2>Article Section</h2>
      <div class="article">
        <h3>Article Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </div>
      <div class="article">
        <h3>News Article</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
      </div>
    </div>
    <div id="footer">
      <p>&copy; 2020 All rights reserved.</p>
    </div>
  </body>
</html>
Provalo tu stesso »

Ora vediamo la migrazione dagli elementi HTML4 agli elementi semantici HTML5.

Esempio di elementi semantici HTML5:

La versione migrata riportata di seguito non include lo script HTML5Shiv, poiché ogni browser ancora in uso comprende nativamente gli elementi semantici. Aggiungere lo shiv nuovamente solo se è necessario supportare Internet Explorer 8 o versioni precedenti.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-size: 0.9em;
      }
      header,
      footer {
        padding: 10px;
        color: white;
        background-color: black;
        text-align: center;
      }
      h2 {
        text-align: center
      }
      h3 {
        text-align: right;
        padding-right: 20px;
      }
      main {
        margin: 5px;
        padding: 20px;
        background-color: lightgrey;
      }
      article {
        margin: 20px;
        padding: 10px;
        background-color: white;
      }
      nav ul {
        padding: 0;
      }
      nav ul li {
        display: inline;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>LaravelSoft</h1>
    </header>
    <nav>
      <ul>
        <li>
          <a href="https://www.w3docs.com/learn-html.html">Books</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/quiz/">Quizzes</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/snippets">Snippets</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/tool/">Tools</a>
        </li>
        <li>
          <a href="https://www.w3docs.com/string-functions/">String Functions</a>
        </li>
      </ul>
    </nav>
    <main>
      <h2>Article Section</h2>
      <article>
        <h3>Article Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
      <article>
        <h3>News Article</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.
        </p>
      </article>
    </main>
    <footer>
      <p>&copy; 2020 All rights reserved.</p>
    </footer>
  </body>
</html>
Provalo tu stesso »

Passaggio 5: Rimozione degli Elementi e Attributi HTML4 Deprecati

La migrazione non riguarda solo la sostituzione dei contenitori strutturali <div>. HTML5 ha anche rimosso un gruppo di tag e attributi presentazionali il cui compito è ora svolto da CSS. Lasciarli nel markup tiene la struttura mescolata allo stile e può produrre risultati inattesi nei browser moderni, quindi è preferibile eliminarli durante la migrazione.

Elementi comuni da rimuovere e le loro sostituzioni CSS:

Elemento deprecatoCosa fare invece
<font>Impostare font-family, font-size e color in CSS
<center>Usare text-align: center o un layout flex/grid
<big>, <tt>, <strike>Usare font-size, un font-family monospace, oppure text-decoration: line-through
<frame>, <frameset>, <noframes>Ristrutturare la pagina; usare <iframe> solo quando è effettivamente necessario incorporare un documento

Attributi comuni da rimuovere e le loro sostituzioni CSS:

Attributo deprecatoCosa fare invece
align, valigntext-align, vertical-align
bgcolorbackground-color
width, height (su tabelle/celle di layout)CSS width / height
border (presentazionale)CSS border
cellpadding, cellspacingpadding e border-spacing

Ad esempio, questo markup HTML4:

<center>
  <font face="Arial" color="red" size="5">Welcome</font>
</center>
<table border="1" bgcolor="#eee" cellpadding="10">
  <tr><td align="center">Cell</td></tr>
</table>

diventa così in HTML5, con tutta la presentazione spostata in CSS:

<p class="title">Welcome</p>
<table class="data">
  <tr><td>Cell</td></tr>
</table>

<style>
  .title {
    text-align: center;
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.5em;
  }
  .data {
    border: 1px solid black;
    border-collapse: collapse;
    background-color: #eee;
  }
  .data td {
    padding: 10px;
    text-align: center;
  }
</style>

La Differenza tra gli Elementi <section>, <article> e <div>

In HTML5, esistono alcune differenze tra gli elementi <section>, <article> e <div>. In particolare:

  • <section> raggruppa contenuti tematicamente correlati, di solito con un'intestazione.
  • <article> rappresenta contenuti autonomi che potrebbero essere distribuiti o riutilizzati indipendentemente.
  • <div> è un contenitore generico senza significato semantico, usato esclusivamente per lo stile o lo scripting.

Esempio dei tag <section>, <article> e <div>:

Esempio dei tag <section>, <article> e <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>
          Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.
        </p>
      </article>
      <div>
        <h2>Lilies</h2>
        <p>
          Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants.
        </p>
      </div>
    </section>
  </body>
</html>
Provalo tu stesso »

Riepilogo della Migrazione

Utilizza questi passaggi come lista di controllo quando si sposta una pagina da HTML4 a HTML5:

  1. Sostituire il lungo doctype HTML4 con <!DOCTYPE html>.
  2. Sostituire il meta tag http-equiv content-type con il breve <meta charset="utf-8">.
  3. Aggiungere l'HTML5Shiv solo se è ancora necessario supportare Internet Explorer 8 o versioni precedenti; altrimenti, saltare questo passaggio.
  4. Sostituire i contenitori strutturali <div> con elementi semantici come <header>, <nav>, <main>, <article>, <aside> e <footer>.
  5. Rimuovere gli elementi e gli attributi presentazionali deprecati (<font>, <center>, align, <frameset> e simili) e spostare il loro stile in CSS.

Esercitazione

Pratica
Seleziona tutte le risposte corrette. Quali dei seguenti sono nuovi elementi introdotti in HTML5?
Seleziona tutte le risposte corrette. Quali dei seguenti sono nuovi elementi introdotti in HTML5?
Was this page helpful?