HTML5: Introduzione

L'HTML5 è la quinta revisione del linguaggio di markup HTML, lo standard fondamentale per la strutturazione dei contenuti sul World Wide Web.

Cos'è l'HTML5?

HTML5 rappresenta l'evoluzione del linguaggio HTML, introducendo nuove funzionalità che rendono lo sviluppo web più semplice e potente. Tra le principali novità troviamo:

Elementi semantici

L'HTML5 introduce tag semantici che danno significato alla struttura della pagina:

<header> - Intestazione della pagina o di una sezione
<nav> - Navigazione principale
<main> - Contenuto principale della pagina
<article> - Contenuto indipendente e riutilizzabile
<section> - Sezione tematica del documento
<aside> - Contenuto correlato ma separato dal contenuto principale
<footer> - Piè di pagina della pagina o di una sezione

Nuovi tipi di input per i form

html

<input type="email" placeholder="email@esempio.it">
<input type="date" min="2023-01-01">
<input type="range" min="0" max="100">
<input type="color" value="#ff0000">

API native del browser

HTML5 porta con sé diverse API JavaScript native:

Canvas - Disegno grafico 2D/3D
Video e Audio - Multimedia senza plugin
Geolocation - Posizione dell'utente
LocalStorage/SessionStorage - Storage persistente
Web Workers - Elaborazione in background
WebSockets - Comunicazione bidirezionale

Struttura base di un documento HTML5

html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La mia pagina</title>
</head>
<body>
    <header>
        <h1>Titolo del sito</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/chi-siamo">Chi siamo</a></li>
                <li><a href="/contatti">Contatti</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Titolo articolo</h2>
            <p>Contenuto dell'articolo...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2023 Il mio sito</p>
    </footer>
</body>
</html>

Best practice

Usa sempre la dichiarazione DOCTYPE - <!DOCTYPE html> è essenziale
Specifica il linguaggio - <html lang="it"> per l'accessibilità
Struttura semantica - Usa i tag appropriati per il contenuto
Accessibilità - Aggiungi attributi alt alle immagini
SEO - Utilizza meta tag descrittivi e strutturati

Conclusione

L'HTML5 è la base fondamentale per qualsiasi sviluppatore web. Conoscere a fondo le sue funzionalità è essenziale per creare siti moderni, accessibili e ottimizzati per i motori di ricerca.

HTML5: Introduzione ​

Cos'è l'HTML5? ​

Elementi semantici ​

Nuovi tipi di input per i form ​

API native del browser ​

Struttura base di un documento HTML5 ​

Best practice ​

Conclusione ​