Parole individuali o interi passaggi possono essere facilmente resi in corsivo e in grassetto. Iniziamo con la variante del grassetto. Per questo, in sostanza, due elementi HTML sono disponibili, b e strong.
Benvenuti su <b>PSD-Tutorials.de</b>! <br /> Benvenuti su <strong>PSD-Tutorials.de</strong>!
Un'occhiata al risultato nel browser mostra l'immagine seguente:
Evidentemente entrambi gli elementi forniscono la stessa visualizzazione. Perché allora esistono due elementi diversi? In realtà, per i siti web ci sono altre forme di rappresentazione diverse da quelle dei noti browser standard. Pensate per esempio a lettori per persone non vedenti o anche a dispositivi mobili. Gli elementi HTML offerti dal W3C dovrebbero supportare la semantica. Quindi l'elemento b non significa più necessariamente che qualcosa debba essere in grassetto. Piuttosto, b indica un testo visivamente evidenziato che non possiede una maggiore importanza. Potrebbe trattarsi ad esempio di nomi di prodotti o parole chiave in documenti.
L'elemento strong in passato indicava una maggiore enfasi. em invece era utilizzato per indicare un testo enfatizzato, importante. In versioni precedenti di HTML, strong era un rafforzamento di em. A entrambi gli elementi viene attribuito un diverso significato in HTML5.
Per cominciare, un testo con enfasi normale.
<p> I gatti sono animali adorabili. </p>
Adesso di nuovo lo stesso testo, questa volta però con l'enfasi sulla prima parola.
<p> <em>Gatti</em> sono animali adorabili. </p>
Usando em l'enfasi viene posta sulla parola Gatti. Potrebbe accadere durante una discussione sull'argomento se i cani o i gatti sono più carini.
Adesso potremmo applicare l'elemento em anche alla parola sono nell'esempio presentato.
<p> Gatti <em>sono </em> animali adorabili. </p>
Questo potrebbe essere una risposta in una discussione in cui qualcuno sostiene che i gatti non siano affatto carini.
In effetti, i passaggi contrassegnati con em vengono visualizzati in corsivo nel browser. Lo stesso effetto visivo può essere ottenuto con l'elemento i.
Secondo la bozza di lavoro di HTML5, l'elemento i non rappresenta più il corsivo.
<p> Benvenuti su <i>PSD-Tutorials.de</i> </p>
In realtà, da ora in poi questo elemento significa che si vuole trasmettere un'altra atmosfera. L'elemento i è interessante, ad esempio, per contrassegnare espressioni tecniche o termini tassonomici.
Tutto questo è terribilmente teorico, lo so. In linea di principio, dovreste cercare di aderire alle linee guida HTML5. D'altro canto, ovviamente nessuno vi taglierà la testa se utilizzate strong invece di b.
<p> <em>Riga con em</em><br /> <i>Riga con i</i><br /> <strong>Riga con strong</strong><br /> <b>Riga con b</b> </p>
In definitiva, sono i produttori di browser che devono agire qui.
In ultima analisi, la vera responsabilità per la formattazione dei testi dotati di questi elementi spetta comunque al CSS.
Acronimi con abbr
Per evidenziare un acronimo, si utilizza lo stesso elemento che finora è stato utilizzato per le abbreviazioni, cioè abbr.
Il Bureau tedesco-austriaco del <abbr title="World Wide Web Consortium">W3C</abbr> ha trasferito la sua sede presso la Fachhochschule Potsdam a partire da aprile 2009.
I browser che interpretano correttamente l'elemento abbr sottolineano il testo racchiuso nell'elemento abbr.
Inoltre, è consigliabile assegnare all'elemento abbr un attributo title. Di solito si inserisce l'espressione completa per l'acronimo. Quando il visitatore passa sopra l'acronimo con il cursore del mouse, l'espressione verrà visualizzata in una finestra di popup.
Indicazione di indirizzi con address
Con l'elemento address è possibile contrassegnare le informazioni sull'indirizzo.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
I browser solitamente mostrano il contenuto dell'elemento address in corsivo.
Evidenziare il codice con code
L'elemento code viene utilizzato per evidenziare il codice del programma. In questo senso, rispetto alle versioni precedenti di HTML, non è cambiato nulla. Ancora oggi, code viene utilizzato per tale scopo.
<pre>
Questo è un'intestazione HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Di solito si combina code con l'elemento pre per mantenere i rientri utilizzati nel codice del programma.
La specifica HTML5 consiglia l'uso dell'attributo di classe in relazione all'elemento code. A questo attributo è possibile assegnare il linguaggio utilizzato all'interno dell'elemento code. Qui ci sono alcuni esempi tipici di come tali evidenziazioni potrebbero apparire:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Se e come i browser implementano queste istruzioni non è specificato dal W3C.
<pre>
Questo è un'intestazione HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Attualmente l'attributo di classe non ha alcun impatto visibile sul browser. Tuttavia, gli osservatori umani possono riconoscere in questo modo quale linguaggio è alla base del codice del programma quando guardano il codice sorgente della pagina.
Utilizzare small per le lettere minuscole
L'elemento small originariamente era utilizzato per mostrare il testo più piccolo del normale. In HTML5, small è esplicitamente utilizzato per testi in piccolo. Questi testi in piccolo potrebbero includere ad esempio quanto segue:
• Informazioni sul copyright
• Clausole di esclusione di responsabilità
• Termini di licenza
• Termini e condizioni generali
Il W3C sottolinea chiaramente che small non dovrebbe essere utilizzato per lunghi passaggi di testo.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Sottolineare il testo
È possibile presentare parole sottolineate utilizzando l'elemento u. Ecco un esempio:
<p>Benvenuti su <u>PSD-Tutorials.de</u></p>
Il risultato appare nel browser come segue:
Se si osserva il risultato, è effettivamente l'effetto desiderato. Tuttavia, c'è un problema. Su Internet, i testi sottolineati sono comunemente riconosciuti come collegamenti ipertestuali. Se si presenta una parola o un testo sottolineato, i visitatori potrebbero pensare che si tratti di un collegamento ipertestuale. Il tentativo di fare clic su di esso naturalmente non avrà successo. Pertanto, si dovrebbe evitare di sottolineare.
