Vediamo insieme una lista di 20 tag HTML5, alcuni molto noti e altri molto meno, con la loro compatibilità con i browser: Chrome, Firefox, Safari e Internet Explorer.
8 tag di layout
In generale questi tag servono soprattutto a facilitare la lettura del sito da parte dei motori di ricerca.
<article>– Definisce la posizione di un articolo, di un commento di un blog o di un forum, di solito è composto da un titolo e da un paragrafo.<section>– Definisce una sezione che rappresenta un tema: un<article>può essere composto da più temi (<section>), e vale anche il contrario. Anche la sezione ha un titolo e un’introduzione. Le si può assegnare un’etichetta con l’attributoaria-label.<aside>– Permette di definire una sezione da mettere di fianco al contenuto principale, ideale per le sidebar o gli spazi pubblicitari.<figure>– Figure è un contenitore che lavora insieme al tag<figcaption>: figure serve a mostrare un’immagine o un video seguiti da una didascalia (<figcaption>).<footer>– Definisce la posizione del piè di pagina.<header>– Definisce la posizione dell’intestazione della pagina.<hgroup>– Un tag che permette di raggruppare più titoli (<h1>–<h6>).<nav>– Rappresenta una sezione che contiene link. Si usa spesso nell’<header>per il menu principale, o nel<footer>per le note legali e simili.
4 tag media
<video>– Permette di mostrare un lettore video in HTML5, la sorgente del video va indicata con l’attributosrc.<audio>– Come il tag precedente, ma solo per un file audio.<picture>– Il meno conosciuto, perché su alcuni browser è ancora sperimentale: il tag<picture>permette di usare diverse<source>destinate a un elemento<img>, e il browser sceglie poi l’immagine più adatta da mostrare in base alla risoluzione.<source>– Permette di definire diverse sorgenti di file multimediali, si usa con<video>,<audio>e<picture>.
8 tag funzionali
<details>– Va di pari passo con<summary>: questo tag permette di definire un contenuto a scomparsa.
Dei dettagli
Altre informazioni sui dettagli.
<dialog>– Dialog è una finestra modale nativa in HTML5.Example from Mozilla –
<embed>– Il tag embed permette di usare un contenitore per mostrare risorse esterne, è stato usato soprattutto per il flash ma anche per l’SVG, anche se oggi si preferiscono altri metodi.<mark>– Permette di evidenziare il testo.<meter>– Rappresenta un indicatore compreso tra due valori fissi.Example from Mozilla –
by Damien Flandrin (@dam62500) on CodePen. <progress>– Simile a<meter>, ma rappresenta una percentuale di avanzamento.Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.
<time>– Permette di rappresentare una data in modo semantico, accetta l’attributodatetime.html<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p><wbr>– Uno dei tag meno conosciuti dell’HTML5, ma comunque utile:<wbr>indica al browser di andare a capo se serve a partire da questo punto.
···
Questi tag danno per scontate le basi del linguaggio. Se stai iniziando, parti dalle 7 cose da sapere prima di imparare l’HTML: vocabolario, scheletro di un documento e struttura semantica.
