HTML5: Scopri tutto quello che dovresti sapere

- Letture: 6.111

HTML5 è un linguaggio per la progettazione di pagine web attualmente in fase di definizione, che si propone come evoluzione dell’attuale HTML 4.

Attualmente HTML5 è supportato in basse percenuali da Chrome, Firefox, Opera e Safari, questo non ci deve impedire di conoscere il suo uso per tempi più maturi, in modo da essere un passo avanti agli altri e aumentare le nostre conoscenze.

Andiamo a vedere insieme la nuova struttura che caratterizza l’HTML5, articoli e guide di approfondimento.

Struttura HTML5

In HTML4 siamo stati abituati a scrivere una pagina web utilizzando la seguente sintassi di codice.

In HTML5 sono stati introdotti nuovi elementi, che hanno l’obiettivo di rendere più semantico e significativo la struttura della pagina web.

Il primo colpo d’occhio vi porterà a pensare che i famosi <div> siano stati sostituiti con questi nuovi tag, invece capirete mettendo le mani sul codice di riuscire ad ottimizzare la struttura in modo semplice e molto più chiaro.

Come vediamo dalla struttura qui in alto sono stati sostituiti i tag di HTML4 in altri più semantici e validi.

E’ stato sostituito da HTML4 a HTML5:

  • <div id=”header”> in <header>
  • <div id=”sidebar”> in <aside>
  • <div id=”main_content”> in <section>
  • <div id=”footer”> in <footer>

Ovviamente ricordiamoci che anche questi tag si chiudo in </> quindi ad esempio <header> …. </header> oppure <aside> …. </aside>

La struttura lato codice della bozza qui in alto sarà simile a:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<header>
<h1>USIAMO HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<li><a href="#">NAV3</a></li>
<li><a href="#">NAV4</a></li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

I Principali Elementi HTML5

Elemento <!doctype html>

Rappresenta la dichiarazione della pagina molto semplificata rispetto all’HTML4 che precede qualsiasi elemento del documento.

Elemento <header>

Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo o un motto.

Elemento <nav>

Rappresenta una parte della pagina che contiene i link di navigazione del sito, quindi qui inseriremo i menu di navigazione.

Elemento <section>

Rappresenta un’area in cui inserire del contenuto generico.

Elemento <article>

Rappresenta una sezione della pagine indipendente, quindi riferita ad articoli

Elemento <aside>

Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. In questa sezione possiamo riconoscere le famose sidebar di un blog.

Elemento <footer>

Rappresenta la sezione conclusiva del sito in cui inserire alcune informazioni del sito.

Aprofondimenti

Vuoi dare uno sguardo alle novità che porterà con sè?

HTML5: introduzione alle novità

Un’anteprima di HTML 5

HTML5: L’inizio della fine per i player Flash?

HTML5Rocks

Ispirazioni

Html5 Gallery

HTML5 Arena

Guide & Tecniche

HTML5 Compatibilità con i Browser

Creare un blog con HTML5

HTML5 Tag References

HTML5 video for everyone

In HTML5 vengono introdotti diversi nuovi elementi, che hanno l’obiettivo di rendere più significative le strutture delle pagine web.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

25 Commenti

  1. ciao Julius… in pratica se ho capito bene… si può già utilizzare ma l’unico che ancora non lo supporta è IE giusto? Per il resto mi sembra molto chiaro. Dovrebbe essere più semplice programmare.

  2. @sushidub: si esatto si può iniziare a lavorare anche se attualmente non preventirei mai a un mio cliente un progetto in HTML5 in quanto i tempi sono ancora molto maturi, e il linguaggio è ancora in fase di testing…

    I browser supportano HTML5 ancora non al 100%, mentre IE neanche accendendo un cero…

    Nessun ci vieta di inziare a giocare con HTML5 ;)

  3. avevo già letto alcuni articoli e visto in rete “cose che voiumani non potete immaginare” ;) cmq è molto interessante pulito ed efficace sempre….. se IE ci permette di utilizzarlo ……

  4. Bhe, nulla vieta di usare HTML5 in maniera completa con i progetti dei vostri clienti… E’ vero, IE non lo supporta manco a pagarlo oro, ma per fortuna ci viene incontro HTML5 Shiv ( http://remysharp.com/2009/01/07/html5-enabling-script/ ), uno script JS che “legge” i nuovi tag e li crea appositamente per i browser di mamma Micro$oft…
    I contro che vedo sono nella non piena accessibilità senza JS attivo e in fase di stampa, ma con una buona analisi si dovrebbe riuscire a mettere una toppa a queste situazioni… ;)

  5. Francesco ottima oservzione…già con l’avvento dei CSS tanti tantissimi siti sembrano tutti troppo uguali….

  6. @Francesco Caruccio: Ciao, io penso che come con HTML4 / CSS poi essere creativo, lo potrai essere anche con HTML5 / CSS3.

    Quella indicata nell’articolo è una struttura base, nulla ti vieta di stravolgerla, sempre mantenendo una semanticità corretta.

    Se vai a vedere la galleria di HTML5 > http://html5gallery.com/ puoi vedere che si è creativi anche con la stessa sintassi di codice non trovi?

  7. Julius ha scritto:

    @Francesco Caruccio: Ciao, io penso che come con HTML4 / CSS poi essere creativo, lo potrai essere anche con HTML5 / CSS3.
    Quella indicata nell’articolo è una struttura base, nulla ti vieta di stravolgerla, sempre mantenendo una semanticità corretta.
    Se vai a vedere la galleria di HTML5 > http://html5gallery.com/ puoi vedere che si è creativi anche con la stessa sintassi di codice non trovi?

    Grazie per la risorse Julius, le la spulcio bene! Cosi a occhio sembra di essere all’epoca di Css Zen Garden: un nuovo obiettivo per i designer e qualcuno che dimostra le potenzialità di HTML 5. Non vedo l’ora, sinceramente, di provarlo. E voi?

  8. Davvero interessante grazie Julius! Ottima strategia essere avanti di un passo agli altri ;) HTML5 è il futuro!

  9. Ma chi iniziasse ora nel mondo del web cosa gli conviene fare?

    Studiare direttamente html5 css3 oppure studiare xhtml e poi magari aggiornarsi a html5?

    Xhtml e html5 sono molto simili è vero?

  10. Con l’obiettivo di dover creare dei motori di ricerca “semantici” credo che sia proprio necessario permettere agli spider di “comprendere esattamente” la tematicità e la semantica (appunto) dei contenuti.

    Date un’occhiata a questo… http://schema.org/

  11. Julius ha scritto:

    @sushidub: si esatto si può iniziare a lavorare anche se attualmente non preventirei mai a un mio cliente un progetto in HTML5 in quanto i tempi sono ancora molto maturi, e il linguaggio è ancora in fase di testing…

    I browser supportano HTML5 ancora non al 100%, mentre IE neanche accendendo un cero…

    Nessun ci vieta di inziare a giocare con HTML5 ;)

    Ciao Julius,
    a oggi invece i tempi sono maturi per html5?

  12. @ Roberta: Direi che si può iniziare a sviluppare tranquillamente come 3 mesi fa.. bisogna solo fare attenzione sulle compatibilità…

  13. sebastiano

    salve ragazzi ho avuto problemi con adobe e ora l’ho cancellato,ho provato istallare versioni meno recenti ma niente i problemi sono rimasti,ora l’ho disitallato,come faccio a usare html5? come posso fare in modo che in ogni sito in automatico html5 faccia da sostituto ad adobe flash player? come browser uso sia mozilla che chrome e vorrei html5 in entrambi browser possibilmente…

  14. Ciao Julius ho una domanda: ma in html5 i collegamenti ipertestuali vengono fatti attraverso il tag “#!”?

    Esempio di collegamento ad una pagina all’interno della index.php, in pratica il sito si svolge tutto in una sola pagina con questi richiami alle varie sezioni:

    about me
    works
    .
    .
    .ect..ect..

    Fammi capire! ciao ;-) bel post

  15. Ciao Julius ho una domanda: ma in html5 i collegamenti ipertestuali vengono fatti attraverso il tag “#!”?

    Esempio di collegamento ad una pagina all’interno della index.php, in pratica il sito si svolge tutto in una sola pagina con questi richiami alle varie sezioni:

    <!–
    "
    about me
    works
    .
    .
    .ect..ect..

    –>
    Fammi capire! ciao ;-) bel post

Commenti