Guida HTML5: nuovi elementi semantici

In questo articolo scopriremo alcuni elementi di markup che sono stati rivisitati con l’introduzione di HTML5. In particolare vedremo come dare una formattazione alle date con il tag <time>, come evidenziare del testo attraverso <mark> e com’è cambiato l’output dei form JavaScript. Bando alle chiacchiere ed iniziamo!

Time

Navigando in rete ti sarà sicuramente capitato numerose volte di imbatterti in date e orari; per esempio, è prassi porre la data al termine di un articolo di un blog.

Prima dell’avvento dell’HTML5 non v’era modo di formattare le date in maniera standardizzata e questo, ovviamente, risultava essere un problema per i motori di ricerca che tentavano di accedere a tali informazioni per indicizzarle. Fortunatamente, con l’introduzione dell’HTML5, è stato preso in considerazione anche questo aspetto ed introdotto il tag <time>.

<time> riveste due differenti ruoli: in primo luogo indica in quale parte del documento è presente una data o un orario e, in secondo luogo, si occupa di dare una formattazione universale che riunisca i vari standard internazionali in un unico output comprensibile da ogni software.

Come molti di voi sapranno, la formattazione standard della data prevede 4 cifre che indicano l’anno, seguite da 2 riferite al mese e ulteriori 2 dedicate al giorno.

In poche parole: AAAA:MM:GG o, in inglese, YYYY:MM:DD.

Questo tipo di formattazione non deve però riguardare per forza anche ciò che l’utente vede, ma solo ciò che i software interpretano. Per esempio potremmo voler scrivere:

<p>Grande evento! La partita si terrà il giorno
<time datetime=”2014-02-21”>21 febbraio 2014</time>
</p>

in modo che l’utente italiano legga la data in un formato familiare ma i motori di ricerca la immagazzinino in maniera corretta.

Regole molto simili valgono per la formattazione degli orari, utilizzando il consueto formato: HH:MM+00:00, ovvero 2 cifre per l’ora seguite da 2 cifre per i minuti e dal segno + indicante il fuso orario di corrispondenza.

Ricordate di porre attenzione al fuso orario poiché non è un attributo opzionale! Per esempio:

<p>Grande evento! La partita si terrà alle ore 
<time datetime=”13:40+01:00”>13:40
</p>

Con l’utilizzo della lettera T è anche possibile unire entrambe le opzioni per ottenere una data completa in questo modo:

<p>Grande evento! La partita si terrà il 
<time datetime=”2014-02-21T13:40+01:00”>21 febbraio 2014 alle 13:40</time>
</p>

Mark

Il tag <mark> ha lo scopo di evidenziare il testo racchiuso in esso. Può risultare particolarmente utile, per esempio, quando vogliamo portare l’attenzione dell’utente a quella specifica porzione di contenuto.

<p>
     Il <mark>testo</mark>, dal latino textus (con significato originario di tessuto o trama), 
     è un <mark>insieme di parole</mark>, correlate tra loro per costituire un'unità logico-concettuale. 
     Con il termine "testo" si può anche indicare un insieme di segni quali: gesti, espressioni facciali,  
     modo di esprimersi; in un certo senso è possibile definire il testo come un qualsiasi 
     <mark>mezzo di comunicazione</mark>.
</p>

Il colore predefinito per il tag <mark> è il giallo ma è liberamente modificabile attraverso il CSS, per esempio:

mark {
      background-color: green;
      color: #000;
}

Il risultato sarà:

 img1

Attenzione va posta, anche in questo caso, per gli utenti di Internet Explorer. Fate riferimento, come consuetudine, al paragrafo ‘compatibilità’ del precedente articolo ‘Guida HTML5 – la struttura’.

Output

Il tag <output> che non è altro che un segnaposto che il tuo JavaScript può utilizzare per visualizzare delle informazioni frutto di calcolo.

Ad esempio, immaginiamo di voler creare un modulo che, una volta inserita base ed altezza, restituisca l’area di un rettangolo:

img2

Potremmo usare un codice come questo per il form:

<form id=”areaRettangolo” onsubmit="return false" oninput="risultato.value = parseInt(base.value) * parseInt(altezza.value)">
       Base <input name="base" type="number" step="any" min="0"><br>
       Altezza <input name="altezza" type="number" step="any" min="0"><br><br>
       Area = <output name="risultato"></output>
</form>

Utilizziamo due <input>, entrambi caratterizzati dall’attributo min settato a 0 poiché non ci interessano valori negativi, per rilevare i parametri passati dall’utente. Effettuiamo l’operazione matematica in JavaScript e restituiamo il risultato nel tag <output> tramite risultato.value.

Potremmo inoltre voler aggiungere, per essere più precisi, al tag output alcuni attributi come form e for. Come puoi immaginare l’attributo form indica l’ID del form a cui il tag output si riferisce mentre il tag for segnala quali sono i relativi controlli utilizzati, separati da virgola.

Per esempio, facendo sempre riferimenti al codice per il calcolo dell’area del rettangolo, scriveremo:

<output name=”risultato” form=”areaRettangolo” for=”base altezza”></output>

Conclusione

Nel corso di questo articolo abbiamo visto come utilizzare alcuni nuovi elementi semantici, caratteristici dell’HTML5. In particolare abbiamo introdotto un importante elemento, il form, che andremo ad approfondire nel prossimo articolo.

Come in tutti i precedenti articoli, puoi scaricare il codice completo di questa lezione attraverso questo link.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • Canvasparte42
    Guida HTML5: il Canvas – Parte 4

    Benvenuto alla quarta e ultima parte di questa guida dedicata al Canvas. Oggi tratteremo alcune tecniche avanzate che ci permetteranno di gestire le...

  • 13-10
    Guida HTML5: il Canvas – Parte 3

    Benvenuto alla terza parte di questa guida dedicata al Canvas. Ora che conosciamo tutti i meccanismi di base che regolano questo strumento, possiamo...

  • html5_social
    HTML5 si può usare per i siti accessibili?

    Premessa: questo articolo è rivolto unicamente a chi avrà a che fare con la Pubblica Amministrazione nei prossimi mesi, speriamo non anni, in cui...

11 commenti

  1. Francesco

Trackback e pingback

  1. Guida HTML5: nuovi elementi semantici | Your In...
    […] In questo articolo scopriremo alcuni elementi di markup che sono stati rivisitati con l’introduzione di HTML5. In particolare vedremo …
  2. Guida HTML5: i form – parte 1 | Your Inspiration Web
    […] 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida …
  3. Guida HTML5: la prima pagina | Your Inspiration Web
    […] 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida …
  4. Guida HTML5: la struttura | Your Inspiration Web
    […] 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida …
  5. Guida HTML5: il canvas – parte 1 | Your Inspiration Web
    […] 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida …
  6. Guida HTML5 – immagini & outlines | Your Inspiration Web
    […] 2) Guida HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida …
  7. Guida HTML5: il Canvas – Parte 2 | Your Inspiration Web
    […] HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida HTML5: nuovi elementi semantici  6) …
  8. Guida HTML5: i tag audio e video – parte 2 | Your Inspiration Web
    […] HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida HTML5: nuovi elementi semantici  6) …
  9. Guida HTML5: I form – parte 2 | Your Inspiration Web
    […] HTML5: la prima pagina 3) Guida HTML5: la struttura 4) Guida HTML5: Immagini e outlines 5) Guida HTML5: nuovi elementi semantici  6) …

Lascia un Commento

Current day month ye@r *