Corsi on-line

HTML 5: evidenziare contenuti con il tag mark

mark è un tag HTML 5 utilizzabile per sottolineare la rilevanza di un determinato contenuto, sia esso per esempio un singolo termine o un stringa; un elemento potrebbe essere considerato rilevante quando l’utente viene invitato a compiere un’azione specifica ed esso potrebbe rivelarsi utile per il suo completamento, ora o in futuro. Sta quindi allo sviluppatore selezionare con attenzione quali contenuti devono essere evidenziati con questo tag.

HTML5Un caso abbastanza frequente di “rilevanza” di un contenuto potrebbe essere quello delle ricerche: l’utente formula una query attraverso il motore interno di un sito e la keyword utilizzata viene evidenziata ogni volta che si presenta all’interno dei risultati. Linguaggi di sviluppo come PHP consentono di individuare facilmente un termine (o più termini) come sottostringa di un contenuto più ampio e di delimitare quest’ultima tramite tag.

Nell’esempio seguente ipotizzeremo che un utente abbia effettuato una ricerca all’interno di un comparatore di prezzi per scoprire quale portale di e-commerce vende lo smartphone che desidera acquistare al prezzo più conveniente e quale a quello più elevato; mark avrà quindi in compito di evidenziare questi dati rendendoli facilmente distinguibili tra le altre informazioni generate in seguito alla richiesta.

Parlando di HTML 5, non ci occuperemo della parte dinamica di questa applicazione ma del suo output e delle regole di stile necessarie per la formattazione. Cominciamo con il markup:

<section>
  <article>
    <h2>Venditore: Mobile Service</h2>
    <p>Prezzo: <mark>€ 279.99</mark></p>
  </article>
  <article>
    <h2>Venditore: Smartphone Deluxe</h2>
    <p>Prezzo: € 299.99</p>
  </article>
  <article>
    <h2>Venditore: Mobile4All</h2>
    <p>Prezzo: <mark>€ 319.99</mark></p>
  </article>
</section>

Ecco invece il codice per la formattazione dell’output:

body {
  color: #333;
  font-family: Arial;
  font-size: 15px;
}
h2 {
  color: black;
  font-size: 20px;
}
mark {
  font-weight: bold;
}

Il risultato del caricamento di questi dati via browser Web sarà il seguente, dove il prezzo più basso e quello più alto vengono resi maggiormente visibili come avverrebbe su carta attraverso il tratto di un evidenziatore:

cattura

E’ importante tenere conto che mark non dovrà essere utilizzato per la stilizzazione delle stringhe, nello stesso modo non rappresenta un indicatore della loro “importanza”, criterio che potrà essere sottolineato con il tag strong.

Post correlati
I più letti del mese
Tematiche