21. Elements semàntics menys coneguts

Mark Norman Francis. 8 de juliol del 2008. Darrera modificació: 10 de març de 2017 (equip docent del grau de Multimèdia de la UOC) · Publicat a: adreça, sub, sup, samp, abbr

En aquest apartat presentaré alguns dels elements semàntics de l'HTML més obscurs i menys coneguts i utilitzats. Parlaré de l'etiquetatge del codi de programació, la interacció amb ordinadors, les cites i les abreviatures, la visualització dels canvis realitzats en els documents i més.

Els continguts d'aquest apartat són els següents:

• 21.1. Destacar la informació de contacte
• 21.2. Llenguatges i codi de programació
• 21.3. Mostrar la interacció amb ordinadors
• 21.4. Variables
• 21.5. Cites
• 21.6. Abreviatures
• 21.7. Instàncies definidores
• 21.8. Superíndex i subíndex
• 21.9. Salts de línia
• 21.10. Línies horitzontals
• 21.11. Canvis en els documents (inserir i suprimir)
• Resum

21.1. Destacar la informació de contacte

L'element address és probablement el que té el nom més equivocat i el més mal entès de l'HTML. A primera vista, amb un nom com "address" (adreça) semblaria que es fa servir per a encapsular adreces, ja siguin electròniques o postals, o coses similars. Això només és així en part.

Per exemple:

<address> 
  <span>Mark Norman Francis</span>, 
  <span class="tel">1-800-555-4865</span>
</address>

Arxiu font: "Simple address example"

A l'exemple següent, l'adreça es troba en el paràgraf del peu de pàgina i és un enllaç cap a una altra pàgina del lloc web. La informació de contacte ampliada de la pàgina a la qual apunta aquest enllaç pot contenir moltes més dades, i d'aquesta manera no cal repetir-la una i altra vegada en el lloc web.

<p class="footer">© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>

Arxiu font: "Advanced address example"

(Evidentment, si el lloc web tingués més d'un autor es podria fer servir aquest mateix patró i definir enllaços cap a pàgines de contacte diferents per als diferents autors).

El que és incorrecte és utilitzar l'element address per a indicar qualsevol altre tipus d'adreces, com ara el que podeu veure a la pàgina web d'exemple incorrecte.

<p> Our company address: </p>
  <address>
    Opera Software ASA,
    Waldemar Thranes gate 98,
    NO-0175 OSLO,
    NORWAY
  </address>

Arxiu font: "Incorrect address example"

(Evidentment, si Opera assumís la responsabilitat col·lectiva per l'article, aquest codi seria correcte encara que jo, i no tot el personal d'Opera, fos l'autor real d'aquesta pàgina en concret).

Per a qualsevol adreça general, podeu utilitzar el que es coneix com a "microformat" per a indicar que un paràgraf conté una adreça. Trobareu més informació sobre els microformats en altres articles de la pàgina web d'Opera.

21.2. Llenguatges i codi de programació

<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>

Arxiu font: "First code example"

En cas de mostres de codi més grans que poden ocupar múltiples línies podeu utilitzar un bloc preformatat, tal com s'explica a l'apartat Etiquetatge del contingut de text a HTML.

Tot i que no hi ha cap mètode definit per a indicar el llenguatge de programació o el codi informàtic dintre de l'element code, podeu utilitzar l'atribut class. Una pràctica molt habitual (que es menciona en l'especificació d'HTML5) és utilitzar el prefix language- (llenguatge) i llavors afegir-hi el nom del llenguatge.

Així, doncs, l'exemple anterior es convertiria en:

<p>It is bad form to use event handlers like 
<code class="language-javascript">onclick</code>
directly in the HTML.</p>

Arxiu font: "Second code example"

Alguns llenguatges de programació tenen noms que no es poden representar fàcilment en classes, com per exemple C#. La manera correcta d'escriure aquest nom seria class='language-c\#', que pot resultar confusa i es pot escriure malament amb molta facilitat. Jo aconsellaria utilitzar una classe consistent només amb lletres i guions i lletrejar-la completament. Així, doncs, en aquest cas es podria utilitzar class='language-csharp'.

21.3. Mostrar la interacció amb ordinadors

Per exemple:

<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms
  
  --- google.com ping statistics ---
  1 packets transmitted, 1 packets received, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

Arxiu font: "Computer interaction example"

L'element samp indica un exemple de la sortida d'un programa informàtic. Tal com es pot veure en aquest exemple, amb l'atribut class es poden indicar diferents tipus de sortides. No obstant això, però, no hi ha cap convenció que s'hagi adoptat d'una manera general sobre el tipus de classes que s'han d'utilitzar.

L'element kbd indica l'entrada per part de l'usuari que interactua amb l'ordinador. Tot i que tradicionalment aquestes entrades es fan des del teclat (i per això es fa servir la contracció "kbd", de l'anglès "keyboard" –teclat–), també s'ha d'utilitzar per indicar altres tipus d'entrades, com per exemple per veu.

21.4. Variables

Per exemple:

<p>The value of <var>x</var> in
 3<var>x</var>+2=14 is 4.</p>

<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>

Arxiu font: "Variables example"

21.5. Cites

Per exemple:

<p>La frase <q>El meu regne per un cavall</q>, com moltes d'altres, la va escriure
  Shakespeare al seu <cite>Ricard III</cite>.</p>

21.6. Abreviatures

El text de l'abreviatura es troba dintre de l'element abbr i la versió completa se situa dintre de l'atribut title, és a dir:

<p>Styling is added to <abbr title="Hypertext Markup Language">HTML</abbr>
documents using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Arxiu font: "Abbreviations example"

21.7. Instàncies definidores

La diferència és que el terme utilitzat a dfn no ha de formar part d'una llista de termes i definicions i que es pot utilitzar com a part del flux de text normal, fins i tot en un estil de prosa conversacional. Vegem, doncs, un exemple de l'ús de dfn:

<p><dfn>HTML</dfn>: HTML significa "HyperText Markup Language". Es el 
llenguatge que es fa servir per descriure el contingut de documents web.</p>

Hi apareix el terme HTML seguit immediatament de la seva definició, amb la qual cosa és el lloc ideal per a utilitzar-hi l'element dfn. L'hauríeu d'utilitzar només una vegada en una pàgina, en el punt en el qual es defineix el terme per primera vegada; de totes maneres, els termes s'han de definir només una vegada en una pàgina, per la qual cosa no és gaire problemàtic.

Tot això està molt bé, però un exemple aïllat no és massa pràctic; l'ús de dfn es recomana quan una abreviatura es fa servir més d'una vegada en una pàgina. Per exemple, en el mòdul "Fonaments de l'HTML" d'aquest curs, l'abreviatura HTML apareixia més de quaranta vegades. Utilitzar el codi <abbr title="HyperText Markup Language">HTML</abbr> totes i cadascuna de les vegades que es fa servir aquesta abreviatura seria un malbaratament d'amplada de banda, seria visualment molt molest i per als usuaris de lectors de pantalles seria probablement molt pesat i avorrit, ja que HTML s'explicaria una vegada i una altra tot i que ja s'hauria explicat què significa. En lloc d'això, el que es podria fer és inserir el codi en el punt en el qual es defineix per primera vegada per als lectors:

<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is 
a language to describe the contents of web documents.</p>

Arxiu font: "First defining instances example"

Aleshores, cada vegada que es faci servir HTML es pot etiquetar simplement com a <abbr>HTML</abbr>. Llavors, un agent d'usuari podria posar a disposició de l'usuari algun mètode per a recuperar la instància definidora de l'abreviatura. Desafortunadament, ara per ara no hi ha cap agent d'usuari que ho faci, ni tan sols els lectors de pantalla. Per tant, seria millor utilitzar també l'atribut title per a oferir aquesta informació:

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> ("HyperText
Markup Language") is a language to describe the contents of web documents.</p>

Arxiu font: "Second defining instances example"

Ara, però, hem doblat el terme ampliat per a HTML, la qual cosa pot ser un problema per als usuaris de lectors de pantalla. No obstant això, el fet de deixar l'ampliació visible fa que el document sigui menys útil per als usuaris vidents, que en pràcticament tots els casos seran la majoria.

Jo crec que aquest es un compromís acceptable quan només hi ha una o dues abreviatures que necessiten una definició (en pàgines que exigeixen un nombre més gran de definicions, potser seria millor crear una secció de glossari o una pàgina en la qual es pugui utilitzar l'etiquetatge més rigorós de les llistes de definicions). Si això és un tema que us afecta, el codi podria ser:

<p><abbr title="HyperText Markup Language">HTML</abbr>
(<dfn>HyperText Markup Language</dfn>) is a language to
describe the contents of web documents.</p>

Arxiu font: "Third defining instances example"

No obstant això, l'agent d'usuari hauria de tenir algun mètode per a connectar la definició amb totes les aparicions del terme definit. Actualment no hi ha cap navegador que faci res útil amb dfn, tot i que segueix essent un lligam útil per a aplicar estils amb el CSS. La solució proposada anteriorment és actualment la millor que tenim.

Aquest és un cas molt desgraciat d'una especificació que s'ha creat sense unes directrius clares sobre com s'ha d'utilitzar un element; probablement no es va basar en cap ús d'aquest element en el món real, ja que en cas contrari hi hauria algun mètode per combinar el terme amb la seva descripció o definició completa. L'especificació HTML 5 entra en molts més detalls sobre l'ús de dfn, però segueix essent només un esborrany i encara no es pot utilitzar en el web.

21.8. Superíndex i subíndex

Alguns llenguatges necessiten aquests elements per a l'ús correcte de les abreviatures i es poden fer servir per a etiquetar contingut matemàtic de poca envergadura, ja que així s'evita recórrer a MathML (un llenguatge de marques matemàtic específic però bastant complicat creat amb l'únic objectiu d'etiquetar fórmules matemàtiques complicades).

Un exemple dels dos tipus:

<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived by Albert
Einstein is E=mc<sup>2</sup> – energy is equal to the mass
multiplied by the speed of light squared.</p>

Arxiu font: "Superscript and subscript example"

21.9. Salts de línia

Tenint en compte la manera en què l'HTML defineix l'espai en blanc, no és possible controlar el lloc on saltaran les línies de text (per exemple, etiquetar una adreça postal com un paràgraf però voler que tingui un aspecte visual en el qual cada part de l'adreça aparegui en una línia independent) simplement prement la tecla de retorn mentre es va escrivint el text.

Algunes vegades pot ser més fàcil utilitzar un bloc de text preformatat en lloc d'inserir-hi elements br. O bé, si voleu que una part concreta d'un text aparegui en una línia independent, tot i que això és purament una qüestió d'estil, podeu posar aquesta part en un element span i definir-la per tal que es mostri com un element de bloc.

Així, per exemple, podeu escriure l'adreça de contacte d'Opera que hem vist abans en aquest apartat quan parlàvem sobre l'element address de la següent manera:

<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>

Arxiu font: "Line breaks example"

Evidentment, si escriviu en XHTML en lloc d'HTML, l'element hauria de ser autotancat, com el següent:
<br />.

21.10. Línies horitzontals

Alguns diuen que aquest és un efecte inherentment no semàntic i purament visual i de presentació, però de fet hi ha precedents en la literatura que justifiquen l'existència d'un element així. En un capítol (que es podria descriure com una secció d'un llibre) a vegades apareix una línia horitzontal entre escenes que tenen lloc en temps i/o llocs diferents. En la poesia també s'utilitzen algunes separacions decoratives per delimitar les diferents estrofes del poema.

Cap d'aquests usos justificaria l'existència d'un element d'encapçalament nou, que és la manera acceptada de marcar els límits entre seccions d'un document.

L'element hr no té cap atribut i el seu estil s'haurà de definir amb el CSS en cas que l'aspecte per defecte no sigui satisfactori.

També, igual que en el salt de línia, si escriviu en XHTML i no en HTML caldrà que utilitzeu la forma autotancada : <hr />.

21.11. Canvis en els documents (inserir i suprimir)

Si s'han introduït canvis en un document des de la primera vegada que va estar disponible, podeu marcar aquests canvis per tal que les persones que el tornin a llegir o els processos automatitzats puguin saber què s'hi ha canviat i quan.

Aquests dos elements poden tenir dos atributs que aporten més significat a les edicions.

Si la raó del canvi s'explica a la pàgina o en algun altre lloc del web, hauríeu de crear un enllaç cap aquest document o fragment de l'atribut de cita. El que estem dient en realitat és que "Aquest canvi s'ha fet per la raó següent".

També podeu indicar l'hora que es va fer el canvi amb l'atribut datetime. El valor hauria de ser una marca horària conforme a l'estàndard ISO, que normalment té la forma "AAAA-MM-DD HH:MM:SS ±HH:MM" (en trobareu més informació a la Wikipedia).

Un exemple que utilitza els dos atributs:

<p>We should only solve problems that actually arise. As
  <cite><del datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">Donald Knuth</del><ins
  datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
  said: <q>premature optimization is the root of all 
  evil</q>.</p>

Arxiu font: "Inserting and deleting example"

Resum

En aquest apartat he explicat alguns dels elements semàntics de l'HTML menys coneguts i que menys s'utilitzen. En l'apartat següent seguirem examinant l'ús correcte de dos elements semàntics d'HTML semànticament neutres: div i span.