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

<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

<!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

1. Usa sempre la dichiarazione DOCTYPE - <!DOCTYPE html> è essenziale
2. Specifica il linguaggio - <html lang="it"> per l'accessibilità
3. Struttura semantica - Usa i tag appropriati per il contenuto
4. Accessibilità - Aggiungi attributi alt alle immagini
5. 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.