Corso HTML base – Lezione #4 – Elementi tipografici e di citazione

Condividi

This post is also available in English. Click here to go directly to the english version.

Se pensavate che gli elementi di formattazione testuale si fermassero a quanto visto nel corso html base lezione 3 – ovvero paragrafi e grassetto – allora eravate in grosso errore.

Corso html base - lezione 4

Infatti l’immensa infinità del w3c ci permette di avere a disposizione tantissimi elementi tipografici per la formattazione del testo in HTML. Abbiamo precedentemente visto cosa sono e come funzionano paragrafi ed elementi evidenza come lo <strong> ed il <b>, oggi tocca ad altri elementi che compongono la struttura estetica e semantica del nostro testo HTML. Nel dettaglio oggi parleremo di :

  • <blockquote>
  • <cite>
  • <i>
  • <em>
  • <q>
  • <dfn>
  • <abbr>

Blockquote e cite

Il blockquote (o Block quotation) è un elemento HTML che viene utilizzato per includere citazioni. Gli elementi che includono questa tipologia tipografica sono diversi e, oltre al <blockquote>, possiamo trovare il tag <cite> ed il tag <q>, ognuno dei quali con una specifica funzionalità.

Il blockquote viene solitamente utilizzato con una indentazione maggiore e può essere accompagnato da un richiamo con il tag <cite> , ad esempio, per specificare un url


<blockquote cite="https://designtegrator.com">
Design make people happier.
</blockquote>

Ma anche per dare un richiamo, ad esempio, al titolo di un’opera. Oppure, ancora, per citare l’autore :

<blockquote>
Design make people happier.
<cite>Designtegrator Crew</cite>
</blockquote>

Andando ad ottenere un risultato del genere :

Design make people happier.

Designtegrator crew.

Spesso blockquote e cite vengono confusi e molte volte utilizzati in maniera confusa ed inappropriata proprio perchè appartengono (esattamente come strong e bold) ad una specifica categoria di tag, ma che hanno funzionalità, ovviamente, diverse.

Italic ed em

Proprio come <blockquote> e <cite>, o <strong> e <b> , anche i tag <i> (italic) ed <em> (emphasis) vengono spesso confusi ed utilizzati in maniera inappropriata.

Proprio come per i tag strong e bolg, esiste una differenza semantica tra i tag italic ed emphasis. Nonostante entrambi danno lo stesso risultato, il tag <i> è prettamente estetico e serve a selezionare una porzione di testo in corsivo, mentre il tag <em> serve, appunto, per enfatizzare una particolare frase che intendiamo specificare come “importante” e con valore aggiunto :

<p>Questo è un paragrafo dove si intende specificare 
una <i>determinata frase o parola</i> in corsivo per 
una questione prettamente estetica.</p>
<p>Questa, invece, è una frase per la quale si ha 
necessità di selezionare una porzione di testo 
enfatizzata, allo scopo di <em>renderla con un 
valore aggiunto</em>.

Il risultato sarà uguale, ma a livello semantico cambia decisamente molto.

Il tag q

Abbiamo visto i tag <blockquote> e <cite> , entrambi tag di citazione con funzionalità specifiche. Tra questa categoria di tag troviamo anche il contenitore <q> destinato ad una quotazione inline, ovvero quando vogliamo quotare una particolare frase di un paragrafo senza interruzioni (Per quotazioni lunghe usa il blockquote) :

<p>Il payoff di Designtegrator è 
<q>Design make people happier</q>
</p>

Come possiamo vedere dall’esempio di seguito, il tag <q> inserisce in automatico la frase che vogliamo quotare tra virgolette. Possiamo anche citare l’autore di quella particolare frase quotata inserendone il nome o l’indirizzo all’interno del tag <cite> :

<p>Il payoff di Designtegrator è 
<q cite="https://designtegrator.com">Design make 
people happier.</q>
</p>

Possiamo anche utilizzare il <cite> “esternamente” per rendere il nome dell’autore o, come in questo caso, l’indirizzo visibile :

<p>
Il payoff di Designtegrator è 
<q>Design make people happier. <cite>designtegrator.com</cite></q>
</p>

I tag abbr e dfn

Abbiamo visto i paragrafi, le citazioni e le quote, gli elementi tipografici come i grassetti e italic e gli attributi di enfasi come <em> o <strong>, adesso è il turno di dare uno sguardo ad alcuni dei tag, per così dire, di secondo piano. Non che non siano indispensabili, anzi… Il fatto è che (aggiungerei purtroppo) sono poco utilizzati anche dai più esperti nel campo dello sviluppo, copywriting o blogging.

Se vogliamo inserire un’abbreviazione all’interno di una frase possiamo fare ricorso al tag <abbr> ; questo contenitore viene utilizzato quando dobbiamo abbreviare frasi o scrivere acronimi.

<p>L'html è un linguaggio di programmazione 
gestito dal <abbr>W3C</abbr></p>

In ogni caso possiamo anche inserire l’intera definizione dell’acronimo grazie all’attributo title, checi viene incontro in tantissime occasioni, dalle immagini ai link ipertestuali, dai pulsanti alle abbreviazioni, per l’appunto. In questo modo, puntando il mouse sulla parola abbreviata, verrà mostrato il titolo inserito :

<p>L'html è un linguaggio di sviluppo web gestito 
dal <abbr title="World wide web consortium">W3C</abbr></p>

Il contenitore <dfn>, invece, ci viene incontro quando dobbiamo inserire la definizione di una particolare parola all’interno di testi :

<p>MacOS : <dfn title="Il sistema operativo di 
casa Apple">Sistema Operativo</dnf></p>

Mi raccomando, se stai seguendo questo corso e ti sta piacendo, allora non dimenticare di condividerlo. Sarebbe un buon modo di riconoscimento nei nostri confronti 🙂

In ogni caso mi sento di darti il consiglio di evitare di fare come il 70% degli sviluppatori o blogger, che evitano di utilizzare questi contenitori. Utilizzali non solo per rendere più pulito e corretto il tuo testo, ma anche per fornire e facilitare l’accesso alle informazioni delle tue pagine ai motori di ricerca, come Google o Bing.

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo