Logo de Mosaic
El text central d'HTML
Etiquetar contingut textual en HTML

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.

Nota

Després de cada exemple de codi hi ha un enllaç "Vegeu exemples reals" que us portarà a la visualització del resultat d'aquest codi font en un arxiu diferent; d'aquesta manera podreu veure exemples reals de com es veu realment aquest codi font en el navegador, a banda del codi en si.

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

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).

En l'HTML, quan un caràcter d'aquests apareix diverses vegades seguides es considera (quasi) sempre com un únic caràcter d'espai.

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.

Vegeu també

Vegeu l'apartat 7 del mòdul "Conceptes de disseny web".

L'HTML defineix sis nivells de títols: h1, h2, h3, h4, h5 i h6 (des del més fins al menys important). Parlant en general, h1 seria el títol principal de tota la pàgina que introduiria el tema. h2 s'utilitzaria per a dividir la pàgina en seccions, h3 en subseccions i així successivament.

É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

El paràgraf és el component bàsic de la majoria dels documents. En l'HTML, un paràgraf es representa amb l'element p, que no té cap atribut especial.

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").

Exemple

Un paràgraf és un conjunt d'una o més frases, igual que en els diaris i llibres. Al web és una bona idea utilitzar l'element de paràgraf per a aquests conjunts de frases i no per a qualsevol part aleatòria de text de la pàgina. Si són només unes quantes paraules i no una frase pròpiament dita, llavors potser seria millor no etiquetar-ho com un paràgraf.

15.2.3. Citar altres fonts

Sovint, els articles, els apunts de blocs i els documents de referència citen totalment o parcialment algun altre document. En l'HTML, aquestes cites es marquen amb l'element blockquote per a cites llargues, com ara frases senceres, paràgrafs, llistes o similars.

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

Qualsevol text en el qual el format i l'espai en blanc (vegeu més amunt) siguin importants s'haurien d'etiquetar amb l'element pre.

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.

Vegeu també

Vegeu l'apartat 21 d'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.

Vegeu també

Vegeu l'apartat 12 del mòdul "Fonaments d'HTML".

15.3.1. Cites curtes

Les cites curtes que s'utilitzen en una frase o paràgraf normal es posen a l'element q. Igual que l'element blockquote, aquest pot contenir un atribut cite, que indica la pàgina d'Internet a la qual es pot trobar la cita.

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".

Vegeu també

Vegeu l'apartat 29 del mòdul "Conceptes bàsics de CSS".

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.

En els navegadors visuals això significa normalment l'aplicació d'un color o un tipus de lletra diferent o la visualització del text en negreta o cursiva. Per als usuaris de lectors de pantalla, el resultat pot ser una veu diferent o algun altre efecte acústic. Per a presentar text amb èmfasi cal utilitzar l'element em, que habitualment es presenta als navegadors com a text en cursiva.

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.

Vegeu també

Vegeu l'apartat 29 del mòdul "CSS" i l'apartat 21 d'aquest mòdul.

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.

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada
.
: Anar a l'índex :