Home / Blog /

HTML5: cos’è, come funziona e perché è fondamentale per il web moderno

di Redazione

HTML5 è l’ultima versione del linguaggio di markup utilizzato per creare siti web, ed è fondamentale per lo sviluppo di pagine moderne, interattive e mobile-friendly. In questa guida scoprirai cos’è HTML5, quali sono le sue principali funzionalità e come utilizzarlo per integrare contenuti multimediali e API avanzate nei tuoi progetti web.

Introduzione all’HTML5

HTML5, acronimo di HyperText Markup Language, è l’ultima evoluzione del linguaggio standard utilizzato per creare pagine web. Nasce con lo scopo di migliorare l’esperienza web, offrendo nuove funzionalità per la gestione di contenuti multimediali, grafica e interattività.

Introdotto ufficialmente nel 2014 dal W3C (World Wide Web Consortium), HTML5 ha rivoluzionato il modo in cui sviluppatori e designer costruiscono i siti web, eliminando la necessità di plugin esterni come Flash e semplificando notevolmente lo sviluppo di applicazioni web moderne.

Differenze tra HTML e HTML5

HTML5 si distingue dalle versioni precedenti, come HTML4, per una serie di miglioramenti significativi. Ecco alcune delle differenze chiave:

  • Multimedia nativo: HTML5 include tag specifici per video e audio, eliminando la necessità di plugin esterni.
  • Nuovi elementi semantici: Introduce tag come <header>, <footer>, <article>, <section> che migliorano la struttura semantica della pagina.
  • Interattività avanzata: Grazie a nuove API integrate, come il supporto alla geolocalizzazione e al drag & drop, HTML5 consente di creare applicazioni web più dinamiche.
  • Maggiore supporto per dispositivi mobili: HTML5 è ottimizzato per essere utilizzato su smartphone e tablet, grazie anche alla sua flessibilità per creare layout responsive.
» VUOI SAPERNE DI PIU’? VAI AL NOSTRO CORSO HTML «

Struttura di Base di un Documento HTML5

Un documento HTML5 ha una struttura di base semplice e chiara. Di seguito un esempio della struttura minima che ogni pagina HTML5 dovrebbe avere:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo della Pagina</title>
</head>
<body>
    <header>
        <h1>Benvenuti nel mondo di HTML5!</h1>
    </header>
    
    <section>
        <p>Questa è una semplice pagina HTML5.</p>
    </section>
    
    <footer>
        <p>©2024 devACADEMY</p>
    </footer>
</body>
</html>

Spiegazione del codice:

  • <!DOCTYPE html>: dichiara il tipo di documento, che in questo caso è HTML5.
  • <html lang="it">: definisce la lingua della pagina come italiano.
  • <meta charset="UTF-8">: imposta la codifica dei caratteri per supportare tutti i caratteri speciali, inclusi quelli italiani.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: rende il sito mobile-friendly, ottimizzando la visualizzazione su tutti i dispositivi.
  • Gli elementi semantici <header>, <section>, e <footer> aiutano a strutturare il contenuto della pagina.
» VUOI SAPERNE DI PIU’? VAI AL NOSTRO CORSO HTML «

Nuovi Elementi Introdotti con HTML5

HTML5 ha introdotto diversi nuovi elementi semantici per migliorare la leggibilità del codice e la SEO, come ad esempio:

  • <article>: definisce un contenuto indipendente, ad esempio un articolo di blog.
  • <section>: rappresenta una sezione tematica di un documento.
  • <nav>: è utilizzato per gruppi di link di navigazione.
  • <aside>: contiene informazioni marginali o correlate al contenuto principale.
  • <header> e <footer>: rappresentano rispettivamente l’intestazione e il piè di pagina di un documento o una sezione.

Vediamo un esempio pratico:

<article>
    <header>
        <h2>Introduzione a HTML5</h2>
    </header>
    <section>
        <p>HTML5 è una tecnologia potente che ha trasformato il modo in cui costruiscono le pagine web.</p>
    </section>
    <footer>
        <p>Autore: devACADEMY</p>
    </footer>
</article>

Come si può intuire il codice risulta in questo modo più leggibile e chiaro.

» VUOI SAPERNE DI PIU’? VAI AL NOSTRO CORSO HTML «

Supporto per Multimedia

HTML5 offre un eccellente supporto per multimedia grazie all’introduzione dei tag <audio> e <video>, che permettono di inserire file multimediali senza l’uso di plugin esterni. Vediamo come funziona.

Esempio di un video:

<video controls>
    <source src="video.mp4" type="video/mp4">
    Il tuo browser non supporta il tag video.
</video>

Esempio di un audio:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Il tuo browser non supporta il tag audio.
</audio>

Il tag <video> consente di aggiungere video alla pagina, mentre il tag <audio> permette l’integrazione di file audio.

API e Funzionalità Avanzate

HTML5 include numerose API che aggiungono funzionalità avanzate alle pagine web. Tra le più interessanti:

  • Canvas API: permette di disegnare grafica 2D direttamente all’interno delle pagine web.
  • Geolocalizzazione: fornisce la possibilità di ottenere la posizione geografica dell’utente (con il suo consenso).
  • Web Storage (localStorage e sessionStorage): permette di memorizzare dati localmente nel browser dell’utente.

Esempio di canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

Questo codice composto da HTML e JavaScript crea un rettangolo rosso all’interno di un elemento <canvas>. Vediamo come.

L’elemento <canvas>:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
  • Crea un’area di disegno con un identificatore id="myCanvas", una larghezza di 200 pixel e un’altezza di 100 pixel.
  • Lo stile aggiunge un bordo nero intorno all’area del canvas.

Vediamo invece cosa fa il codice JavaScript all’interno del tag script:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
  • document.getElementById("myCanvas"): seleziona l’elemento canvas con l’id myCanvas.
  • canvas.getContext("2d"): crea un contesto di rendering 2D, che è un oggetto che contiene i metodi e le proprietà per disegnare sul canvas.
  • ctx.fillStyle = "#FF0000";: imposta il colore di riempimento per le forme disegnate successivamente al rosso (#FF0000).
  • ctx.fillRect(0, 0, 150, 75);: disegna un rettangolo pieno, partendo dalla posizione (0, 0) nell’angolo superiore sinistro del canvas, con una larghezza di 150 pixel e un’altezza di 75 pixel.

In sintesi, il codice disegna un rettangolo rosso di 150×75 pixel in alto a sinistra nell’area di disegno del canvas come nell’esempio qui sotto:


» VUOI SAPERNE DI PIU’? VAI AL NOSTRO CORSO HTML «

Compatibilità e Accessibilità

HTML5 è stato progettato per garantire la compatibilità con i browser più moderni, ma offre anche un buon supporto retroattivo. Inoltre, è costruito con una forte attenzione all’accessibilità, consentendo ai siti web di essere fruibili anche da persone con disabilità.

Per migliorare ulteriormente l’accessibilità, è possibile utilizzare attributi come aria-label e elementi come <figure> e <figcaption> per descrivere le immagini in modo più preciso.

Esempio Completo di Pagina HTML5

Mettiamo insieme tutto quanto appreso finora in un esempio completo di una semplice pagina HTML5.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina di Esempio</title>
</head>
<body>
    <header>
        <h1>Benvenuti nel mondo di HTML5</h1>
        <nav>
            <ul>
                <li><a href="#introduzione">Introduzione</a></li>
                <li><a href="#multimedia">Multimedia</a></li>
                <li><a href="#canvas">Canvas</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="introduzione">
        <h2>Cos'è HTML5?</h2>
        <p>HTML5 è l'ultima evoluzione del linguaggio HTML, con molte nuove funzionalità.</p>
    </section>

    <section id="multimedia">
        <h2>Supporto per Multimedia</h2>
        <video controls>
            <source src="video.mp4" type="video/mp4">
            Il tuo browser non supporta il tag video.
        </video>
    </section>

    <section id="canvas">
        <h2>Canvas API</h2>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(0, 0, 150, 75);
        </script>
    </section>

    <footer>
        <p>© 2024 devACADEMY</p>
    </footer>
</body>
</html>

Conclusione

HTML5 ha trasformato il modo in cui le pagine web vengono create e visualizzate. Grazie alle sue nuove funzionalità e alla facilità d’uso, è diventato uno strumento essenziale per ogni sviluppatore web. La sua flessibilità e le numerose API integrate permettono di creare applicazioni web moderne e interattive, senza sacrificare la compatibilità con i browser o l’accessibilità. Se sei un neofita del web design, HTML5 è il punto di partenza perfetto per costruire le tue prime pagine web!

» VUOI SAPERNE DI PIU’? VAI AL NOSTRO CORSO HTML «

Cerca