15. Etiquetar contingut textual en HTML

Mark Norman Francis. 8 de juliol del 2008. Darrera modificació: 9 de març de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: paràgraf, text, èmfasi, cita, pre

En aquest apartat explicaré els conceptes bàsics de l'ús de l'HTML per a descriure el significat del contingut dins el cos del vostre document.

Veurem elements estructurals generals com ara els títols i els paràgrafs i la incrustació de cites i codi. Després també veurem el contingut en línia, com ara les cites curtes i l'èmfasi, i acabarem amb una anàlisi ràpida del contingut presentacional antiquat.

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

• 15.1. L'espai: l'última frontera
• 15.2. Elements de bloc
  • 15.2.1. Títols de secció de pàgina
  • 15.2.2. Paràgrafs genèrics
  • 15.2.3. Citar altres fonts
  • 15.2.4. Text preformatat
• 15.3. Elements en línia
  • 15.3.1. Cites curtes
  • 15.3.2. Èmfasi
  • 15.3.3. Text en cursiva
• 15.4. Elements presentacionals: no els heu de fer servir mai
• Resum

15.1. L'espai: l'última frontera

Una qüestió molt important que vull tractar abans de començar a parlar sobre el text és la de l'espai, i concretament la de l'espai entre paraules. Quan s'escriu l'HTML, el document font contindrà el que es coneix com "espais en blanc", que són els caràcters de l'arxiu que serveixen per a separar el text. El caràcter d'espai més habitual és el que s'obté en prémer la barra espaiadora, però n'hi ha d'altres, com el tabulador i la marca entre dues línies independents d'un document (conegut com a retorn o línia nova).

Per exemple, un navegador interpretaria el següent:

<h3>In the
            beginning</h3>

Vegeu exemples reals a: "Whitespace example"

com a equivalent a:

<h3>In the beginning</h3>

L'únic cas en el qual això no és així és l'element pre, del qual parlarem en detall més endavant en aquest mateix apartat.

Això pot provocar algunes confusions per als autors que escriuen per primera vegada un document en HTML i que intenten introduir espais addicionals dins el text per a aconseguir el sagnat desitjat, deixar més espai després d'un punt entre frases o afegir més espai vertical entre paràgrafs. El disseny visual dels documents no s'ha de definir en el codi font HTML, sinó que s'ha de fer a través dels fulls d'estils, dels quals parlarem més endavant en aquesta sèrie d'apartats.

15.2. Elements de bloc

En aquest subapartat explicaré la sintaxi i l'ús dels elements de bloc més freqüents utilitzats per formatar text.

15.2.1. Títols de secció de pàgina

Una vegada hàgiu dividit la pàgina en seccions lògiques, cadascuna d'aquestes seccions hauria d'anar introduïda per un títol adequat. D'això es parla en més detall a l'apartat Què necessita una bona pàgina web.

És molt important utilitzar els nivells de títols per a descriure el document pel que fa a les seccions, subseccions, subsubseccions..., ja que això fa que el document sigui més comprensible per als lectors de pantalla i per als processos automatitzats (com els robots d'indexació de Google).

Un bon exemple d'una estructura de títols, fent servir aquest document com a plantilla, podria ser el següent:

<h1>Etiquetar contingut textual en HTML</h1>
<h2>Introducció</h2>
<h2>L'espai: l'última frontera</h2>
<h2>Elements de bloc</h2>
<h3>Títols de secció de pàgina</h3>
<h3>Paràgrafs genèrics</h3>
<h3>Citar altres fonts</h3>
<h3>Text preformatat</h3>
<h2>Elements en línia</h2>

Vegeu exemples reals a: "Headings example"

[...i així successivament...]

15.2.2. Paràgrafs genèrics

Per exemple:

<p>This is a very short paragraph. It only has two sentences.</p>

Vegeu exemples reals a: "Paragraph example"

En molts articles i llibres, un paràgraf pot contenir només una frase. Tot i que el significat (pel que fa a la prosa escrita) de "paràgraf" és bastant clar, al web hi ha àrees de text molt més curtes que sovint apareixen entre elements de paràgrafs pel simple fet que l'autor creu que és més "semàntic" que utilitzar un element div (en parlarem en un altre apartat titulat "Contenidors genèrics").

15.2.3. Citar altres fonts

Si la cita és d'una altra pàgina web, podeu indicar-ho utilitzant l'atribut cite.

Com en l'exemple següent:

<p>HTML 4.01 is the only version of HTML that you should use
 when creating a new web page, as, according to the 
 specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
 although W3C will continue to make those specifications and
 their DTDs available at the W3C Web site.</p>
</blockquote>

Vegeu exemples reals a: "Quoting other sources example"

L'atribut cite no és necessari en el cas que la cita s'agafi d'una novel·la, una revista o d'alguna altra forma de contingut fora de línia.

15.2.4. Text preformatat

En la majoria dels navegadors web, el text marcat com a preformatat es mostrarà a l'usuari tal com aparegui en el codi font, algunes vegades fent servir un tipus de lletra d'amplada fixa, la qual cosa dóna al text l'aspecte d'haver estat escrit amb una màquina d'escriure. Aquest ús de tipus de lletres d'amplada fixa és un dels primers recursos que van fer servir els programadors per al text preformatat.

En aquest podeu veure un fragment de codi escrit en el llenguatge de programació Perl:

<pre><code class="language-perl">
# read in the named file in its entirety
sub slurp {
  my $filename = shift;
  my $file     = new FileHandle $filename;

  if ( defined $file ) {
    local $/;
    return <$file>;
  }
  return undef;
};
</code></pre>

Vegeu exemples reals a: "Preformatted example"

L'ús de code que es fa en aquest exemple s'explicarà a l'apartat sobre els elements semàntics menys coneguts més endavant en aquest mòdul.

15.3. Elements en línia

En aquest subapartat explicaré la sintaxi i l'ús dels elements en línia més freqüents utilitzats per a formatar text.

15.3.1. Cites curtes

Una cita curta apareix normalment entre cometes. Segons l'especificació HTML, aquestes cites les ha d'inserir l'agent usuari per tal de poder-les imbricar correctament i que sàpiguen l'idioma que s'utilitza en el document. Es pot utilitzar el CSS per a controlar les cometes utilitzades; aquest aspecte es tractarà a l'apartat sobre "estils de text".

Un exemple de q en acció:

<p>This did not end well for me. Oh well,
    <q lang="fr">c'est la vie</q> as the French say.</p>

Vegeu exemples reals a: "Inline quote example"

15.3.2. Èmfasi

L'HTML conté dos mètodes per a indicar que el text del seu interior ha d'aparèixer emfasitzat davant l'usuari, com per exemple els missatges d'error, les advertències o les notes.

Com l'exemple següent:

<p><em>Please note:</em> the kettle is to be unplugged at night.</p>

Vegeu exemples reals a: "Emphasis example"

Si cal emfasitzar tota una frase però una part concreta d'aquesta s'ha d'emfasitzar d'una manera encara més important, podem imbricar elements em per a indicar un èmfasi més fort del normal, com en l'exemple següent:

<p><em>Please note: the kettle <em>must</em> be unplugged every evening,
 otherwise it will explode - <em>killing us all</em></em>.</p>

Vegeu exemples reals a: "Emphasis and strong example"

De la mateixa manera, podeu fer servir l'element strong, que indica la importància del text que envolta i que s'acostuma a mostrar als navegadors com a text en negreta.

15.3.3. Text en cursiva

Originalment l'element i era purament presentacional: significava exclusivament que el text que rodejava s'havia de mostrar en lletra cursiva. L'especificació d'HTML5, però, diu:

"L'element i representa un text en una veu o un mode alternatiu, o que d'alguna manera queda fora de la prosa normal."

L'especificació també diu explícitament que els autors han de considerar si hi ha d'altres elements més aplicables, com ara em, que semànticament s'ajustin millor al que vulguin expressar.

Un ús habitual de i és per a marcar termes en altres idiomes. En aquest cas usarem l'atribut lang per especificar aquest idioma:

Com diuen els francesos, <i lang="fr">c'est la vie</i>...

També s'aconsella l'ús de l'element class per a indicar quin és l'ús especific que estem fent servir (i d'aquesta manera poder presentar de maneres diferents usos diferents mitjançant el CSS). Cal remarcar que tot i que la presentació per defecte de i és la lletra cursiva, amb el CSS podrem definir qualsevol altra presentació (com ara, amb fons groc, com si haguéssim marcat el text amb un retolador).

15.3.4 Text en negreta

De la mateixa manera que i, b era inicialment un element presentacional que indicava l'ús de negreta. Però l'especificació d'HTML5 diu:

L'element b representa una seqüència de text a la què es vol dirigir atenció per motius utilitaris sense donar-li cap importància extra i sense implicar una veu o mode alternatius, com, per exemple, paraules clau en el resum d'un documento, noms de productes en una crítica, paraules sobre les què es pot actuar en un joc de texto, o l'entradeta d'un article.

Com en el cas d'i, és convenient usar classes per a indentificar perquè s'está utilitzant l'elemento i aplicar els estils corresponents.

L'especificació és dura quant a l'us de b:

...s'hauria d'usar com a darrer recurs quan cap altre element sigui més adient. En particular, els encapçalaments haurien d'usar els elements h1 a h6, l'émfasi hauria d'usar l'element em, la importància hauria de notar-se amb strong i el texto marcat o destacat hauria d'usar l'element mark.

15.4. Elements presentacionals: no els heu de fer servir mai

L'especificació de l'HTML inclou diversos elements que es descriuen de manera general com a "presentacionals", ja que només especifiquen quin aspecte ha de tenir el text que contenen però no el que signifiquen.

L'especificació ha etiquetat alguns d'aquests elements com a desaprovats. Això significa que han estat substituïts per un mètode més nou que permet aconseguir els mateixos resultats.

Jo aquí els descriuré breument, però cal tenir en compte que aquesta explicació té quasi exclusivament un interès purament històric; aquests elements no s'han d'utilitzar mai en cap pàgina web moderna. L'efecte de tots aquests elements s'ha d'aconseguir d'alguna altra manera, que es descriurà en dos altres apartats: "estils de text amb el CSS" i elements semàntics menys coneguts.

• font face="..." size="...". El navegador mostrarà el text en aquests elements utilitzant un tipus de lletra diferent del tipus per defecte; els tipus de lletra, però, s'han de definir amb el CSS.

• strike. El text apareix ratllat amb una línia que el travessa; si és només un efecte presentacional, aquest efecte s'hauria d'aconseguir amb el CSS. També, si el text es vol marcar com a suprimit o no desitjat, s'hauria d'etiquetar amb l'element del que es descriu més endavant.

• tt. El text es presenta en un tipus de lletra de "teletip" o d'amplada fixa; aquest efecte s'hauria d'aconseguir amb el CSS o amb algun element semàntic més apropiat com per exemple pre, tal com s'ha vist anteriorment.

• big. S'ajusta la mida del text; s'hauria d'aconseguir amb el CSS.

Resum

En aquest apartat he parlat d'alguns dels elements més comuns que es fan servir per etiquetar contingut textual. En el següent apartat parlarem d'un altre tipus de contingut: les llistes.

Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.

: :