Introduzione a HTML5 - Imparare HTML

HTML5 non è solo una nuova versione di HTML arricchita con nuovi elementi e attributi, ma un insieme di tecnologie per creare siti web e applicazioni più potenti e versatili, con supporto per il multimedia e l'interazione con interfacce software, ecc.

Questa pagina illustra le modifiche apportate da HTML5 rispetto a HTML4, i nuovi elementi semantici, i nuovi tipi di input per i form, le nuove API JavaScript e come incorporare audio e video nativi. Se sei alle prime armi con il markup, inizia prima dall'introduzione a HTML.

HTML5 e l'HTML Living Standard

HTML5 è stato pubblicato come Raccomandazione stabile del W3C nel 2014. Da allora il linguaggio non è stato congelato in versioni numerate. Viene ora mantenuto dal WHATWG come HTML Living Standard — una specifica unica aggiornata in modo continuo anziché essere ripubblicata come "HTML6". Nell'uso quotidiano, "HTML5" significa semplicemente HTML moderno: lo standard implementato dai browser odierni.

Vantaggi di HTML5

I principali vantaggi di HTML5 sono elencati di seguito:

È supportato da ogni browser attuale, sia desktop che mobile, e lo è da oltre un decennio.
È più adatto ai dispositivi moderni e più semplice da scrivere grazie alla dichiarazione molto più semplice <!DOCTYPE html> e <meta charset="UTF-8">.
Lavora in sinergia con CSS e JavaScript per creare siti accattivanti e interattivi.
Supporta SVG (Scalable Vector Graphics) e <canvas> per la grafica. Nelle versioni precedenti, la grafica vettoriale richiedeva plug-in come Flash o VML.
Il markup diventa più pulito sostituendo i contenitori generici <div> con elementi semantici, che strutturano meglio la pagina e migliorano la leggibilità e l'accessibilità.
Espone la posizione dell'utente tramite la Geolocation API.
Riproduce contenuti multimediali (audio, video) direttamente nel browser tramite gli elementi nativi <audio> e <video>, senza plug-in aggiuntivi. Consulta HTML multimedia.
Introduce il Web Storage, in modo che le applicazioni possano memorizzare dati localmente e conservarli anche dopo la chiusura e la riapertura del browser.

Cosa è cambiato da HTML4 a HTML5

Rimosso e obsoleto in HTML5

Diverse funzionalità presentazionali di HTML4 sono state eliminate perché lo stile appartiene a CSS. Le seguenti sono obsolete e non dovrebbero essere utilizzate:

Elementi presentazionali come <font>, <center>, <big>, <strike> e il vecchio ruolo stilistico di <u>.
Il modello a frame: <frameset>, <frame> e <noframes> (usa <iframe> dove l'incorporamento è davvero necessario).
Attributi presentazionali come align, bgcolor, border sulle tabelle, e cellpadding/cellspacing — sostituiscili con CSS.

Aggiunto in HTML5

Elementi semantici — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> e altri.
Multimedia nativo — gli elementi <audio> e <video>.
Nuovi tipi di input e attributi per i form — email, date, range e altri.
Grafica — l'elemento <canvas> per il disegno 2D e <svg> inline.
API JavaScript — Web Storage, Geolocation, Web Workers, WebSockets e altro (vedi sotto).

Nuovi elementi semantici

Invece di contrassegnare ogni area di una pagina con un generico <div>, HTML5 fornisce elementi che descrivono il ruolo del contenuto. Questo aiuta i motori di ricerca, gli screen reader e gli altri sviluppatori a comprendere la struttura della pagina.

Elemento	Scopo
`<header>`	Contenuto introduttivo o un gruppo di link di navigazione
`<nav>`	Un blocco di link di navigazione principali
`<main>`	Il contenuto dominante del documento
`<article>`	Un contenuto autonomo e distribuibile indipendentemente
`<section>`	Un raggruppamento tematico di contenuti, solitamente con un'intestazione
`<aside>`	Contenuto tangenzialmente correlato al contenuto circostante, come una barra laterale
`<footer>`	Il piè di pagina della sezione più vicina o dell'intera pagina
`<figure>` / `<figcaption>`	Contenuto multimediale autonomo con una didascalia opzionale

Per una panoramica completa con esempi, leggi Elementi semantici in HTML5.

Nuovi tipi di input e attributi per i form

HTML5 ha aggiunto tipi di input che offrono agli utenti controlli appositamente progettati (selettori di date, cursori, ruote dei colori) e consentono al browser di validare l'input automaticamente. I tipi più comuni includono email, url, tel, search, number, range, date e color.

Nuovi attributi come placeholder, required, autofocus e pattern riducono la quantità di JavaScript necessaria per suggerimenti e validazione.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

Scopri di più nella pagina del tag <input>.

Nuove API JavaScript

HTML5 ha anche standardizzato un insieme di API browser che hanno trasformato le pagine web in vere applicazioni:

Canvas 2D — disegna grafica, grafici e giochi pixel per pixel sull'elemento <canvas>.
Web Storage — localStorage e sessionStorage mantengono dati chiave/valore nel browser tra una visita e l'altra.
Geolocation — chiedi all'utente la sua posizione geografica.
Web Workers — esegui script in un thread in background in modo che l'interfaccia utente rimanga reattiva.
WebSockets — apri una connessione persistente bidirezionale con un server per dati in tempo reale.
History API — modifica l'URL e la cronologia di navigazione senza un ricaricamento completo della pagina.

Audio e video nativi

Gli elementi <audio> e <video> riproducono i media direttamente, senza plug-in. Usa l'attributo controls per mostrare l'interfaccia di riproduzione del browser, fornisci uno o più elementi <source> affinché il browser possa scegliere un formato supportato, e aggiungi un testo di fallback per i browser più datati.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Consulta HTML multimedia per un approfondimento su formati e attributi.

Modelli di contenuto in HTML5

In HTML5, il contenuto di una pagina web può essere suddiviso in gruppi semantici che ne descrivono il contenuto. Questi gruppi sono chiamati modelli di contenuto. Ognuno di questi modelli descrive il tipo di elementi che contiene. Il modello di contenuto può contenere testo ed elementi figlio. Un elemento può appartenere a una o più categorie di contenuto.

I modelli di contenuto di HTML5 sono elencati di seguito:

Contenuto di metadati
Contenuto di flusso
Contenuto di sezionamento
Contenuto di intestazione
Contenuto di formulazione
Contenuto incorporato
Contenuto interattivo
Contenuto palpabile

I modelli di contenuto possono sovrapporsi, il che significa che gli elementi appartengono a più categorie contemporaneamente. Ad esempio, il contenuto di sezionamento, di intestazione, di formulazione, incorporato, interattivo e alcuni metadati fanno riferimento al contenuto di flusso. I metadati e il contenuto interattivo in determinati casi possono fare riferimento al contenuto di formulazione.

Esistono anche elementi utilizzati per scopi specifici, ad esempio per la definizione di form. Tali elementi non fanno riferimento a nessuno dei modelli di contenuto menzionati sopra.

Contenuto di metadati

Gli elementi appartenenti alla categoria di contenuto di metadati contengono informazioni sui documenti HTML, impostano collegamenti ad altre risorse, definiscono la presentazione o il comportamento di essa. Questi elementi non vengono visualizzati nella pagina web.

Gli elementi di questa categoria includono: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> e <title>.

Esempio di elementi appartenenti al contenuto di metadati:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Contenuto di flusso

Gli elementi appartenenti alla categoria di contenuto di flusso sono tipicamente quelli utilizzati nel corpo di un documento HTML (racchiusi all'interno dei tag <body>).

Gli elementi di questa categoria includono: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

Esempio di elementi appartenenti al contenuto di flusso:

Esempio di elementi appartenenti alla categoria di contenuto di flusso

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

Provalo tu stesso »

I seguenti elementi appartengono al contenuto di flusso, ma solo se viene soddisfatta una condizione specifica:

<area>, solo all'interno di <map>,
<link>, solo se l'attributo itemprop è specificato,
<meta>, solo se l'attributo itemprop è specificato.

Contenuto di sezionamento

Gli elementi appartenenti al contenuto di sezionamento sono quelli che creano sezioni indipendenti nella struttura di un documento HTML (ad esempio, header, footer, ecc.). Si noti che ogni sezione può avere la propria intestazione e struttura.

Gli elementi del modello di contenuto di sezionamento sono: <article>, <aside>, <nav> e <section>.

Esempio di elementi appartenenti al contenuto di sezionamento:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</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>
    </section>
  </body>
</html>

Provalo tu stesso »

Contenuto di intestazione

Gli elementi appartenenti al modello di contenuto di sezionamento creano una sezione nella struttura corrente che definisce l'ambito degli elementi <header>, degli elementi <footer> e del contenuto di intestazione.

Gli elementi del contenuto di intestazione sono: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e <hgroup>.

Esempio di elementi appartenenti al contenuto di intestazione:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.</h3>
    </hgroup>
  </body>
</html>

Provalo tu stesso »

Contenuto di formulazione

Gli elementi appartenenti al contenuto di formulazione definiscono e contrassegnano il testo. Sono <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> e <wbr>.

Esempio di elementi appartenenti al contenuto di formulazione:

Esempio di elementi appartenenti al contenuto di formulazione:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

Provalo tu stesso »

I seguenti elementi appartengono al contenuto di formulazione, ma solo se viene soddisfatta una condizione specifica:

<a>, se contiene solo contenuto di formulazione,
<area> solo all'interno dell'elemento <map>,
<del>, se contiene solo contenuto di formulazione,
<ins>, se contiene solo contenuto di formulazione,
<link> se l'attributo itemprop è specificato,
<map>, se contiene solo contenuto di formulazione,
<meta> se l'attributo itemprop è specificato.

Contenuto incorporato

Il contenuto incorporato importa un'altra risorsa o inserisce contenuto da un altro linguaggio di markup o namespace nel documento. Questo modello di contenuto include i seguenti elementi: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> e <video>.

Esempi di elementi appartenenti al contenuto incorporato:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>

Provalo tu stesso »

Contenuto interattivo

Il modello di contenuto interattivo include elementi appositamente progettati per l'interazione dell'utente. Sono <a> (se l'attributo href è specificato), <button>, <details>, <embed>, <iframe>, <label>, <select> e <textarea>.

Esempio di elementi appartenenti al contenuto interattivo:

Esempio di contenuto interattivo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br /><br />
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br />
      <button type="button">Send</button>
    </form>
  </body>
</html>

Provalo tu stesso »

I seguenti elementi appartengono al modello di contenuto interattivo, ma solo se viene soddisfatta una condizione specifica:

<audio>, se l'attributo controls è specificato,
<img>, se l'attributo usemap è specificato,
<input>, se l'attributo type non è hidden,
<object>, se l'attributo usemap è specificato,
<video>, se l'attributo controls è specificato.

Contenuto palpabile

Il contenuto è palpabile quando non è né vuoto né nascosto; è il contenuto che viene renderizzato ed è sostanziale. Gli elementi il cui modello è contenuto di flusso o contenuto di formulazione devono avere almeno un nodo palpabile, e quel nodo non deve avere un attributo hidden.

Questa non è una condizione obbligatoria; ci sono casi in cui l'elemento può essere vuoto. Ad esempio, può essere riempito dopo l'esecuzione di uno script esterno.

Le categorie di contenuto secondarie

Le categorie di contenuto secondarie sono quelle che supportano gli script. Gli elementi di supporto agli script non contribuiscono direttamente all'output renderizzato di un documento, ma supportano gli script, sia contenendo o specificando il codice script direttamente, sia specificando dati che verranno utilizzati dagli script. Gli elementi di supporto agli script sono <script> e <template>. Gli elementi <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> e <td> sono chiamati radici di sezionamento. Gli elementi appartenenti al modello di contenuto trasparente sono <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> e <video>. Questi elementi ereditano il tipo dell'elemento padre e possono contenere contenuto consentito nel loro elemento padre.

Esercizi

Pratica

Quale elemento è stato introdotto in HTML5 per riprodurre media senza un plug-in?

L'elemento video con un attributo controls e figli sourceL'elemento fontL'elemento framesetL'elemento center

Pratica

Quale DOCTYPE dichiara un documento HTML5?

DOCTYPE htmlDOCTYPE HTML PUBLIC con un lungo URL DTDDOCTYPE html5In HTML5 non è necessario alcun DOCTYPE