Fonaments de text HTML

Una de les funcions principals de l'HTML és donar estructura i significat al text (també conegut com semàntica), perquè el navegador el pugui mostrar correctament. En aquest article s'explica la forma com es pot utilitzar HTML per estructurar una pàgina de text afegint títols i paràgrafs, destacant paraules, amb la creació de llistes, i més.

Requisits previs: Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en Inici en HTML.
Objectiu: Aprendre com marcar una pàgina bàsica de text per donar-hi estructura i significat - incloent paràgrafs, capçaleres, llistes, destacats i cites.

Conceptes bàsics: capçaleres i paràgrafs

La majoria del text estructurat es compon de títols i paràgrafs, independentment de si llegeixes una història, un diari, un llibre de text universitari, una revista, etc.

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.

En HTML, cada paràgraf s’ha de delimitar amb un element <p>, així:

<p>I am a paragraph, oh yes I am.</p>

Cada títol s’ha de delimitar amb un element de títol:

<h1>I am the title of the story.</h1>

Hi ha sis elements de títol: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Cada element representa un nivell de contingut diferent del document; <h1> representa el títol principal, <h2> representa un subtítol, <h3> representa un subsubtítol, i així successivament.

Implementar una estructura jeràrquica

A tall d'exemple, en una història, <h1> representaria el títol de la història, <h2> representaria el títol de cada capítol i <h3> representaria subseccions de cada capítol, i així successivament.

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The Dark Night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

Què representen exactament els elements que intervenen depèn en realitat de tu, sempre que la jerarquia tingui sentit. Només has de tenir en compte un seguit de bones pràctiques a mesura que crees aquest tipus d'estructures:

  • Preferiblement, només has d'utilitzar un únic <h1> per pàgina; aquest és el títol de nivell superior, i tots els altres se situen per sota d'aquest en la jerarquia.
  • Assegura’t que utilitzes els títols en l'ordre correcte de la jerarquia. No utilitzis <h3> per representar subtítols, seguit per <h2> per representar subsubtítols; no té cap sentit i condueix a resultats estranys.
  • Dels sis nivells de títols disponibles, no hauries d’utilitzar-ne més de tres per pàgina, llevat que ho creguis de debò necessari. Els documents amb molts nivells (és a dir, una jerarquia profunda en títols) es tornen difícils de manejar i és difícil de navegar-hi. En aquestes ocasions, és recomanable desplegar el contingut en múltiples pàgines, si és possible.

Per què cal una estructura?

Per respondre a aquesta pregunta, fem una ullada a text-start.html; el punt de partida del nostre exemple d'aquest article (una bona recepta d’humus). Desa una còpia d'aquest arxiu a l'ordinador, el necessitaràs per als exercicis més endavant. El cos d'aquest document actualment conté diversos elements de contingut, que no estan marcats de cap manera, però estan separats per salts de línia (Intro/Retorn picat per a passar a la línia següent).

No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

Això és perquè no hi ha elements que donin estructura als continguts, de manera que el navegador no sap què és un títol i què és un paràgraf. A més:

  • Els usuaris que busquen en una pàgina web tendeixen a fer-hi una ullada ràpida per a trobar contingut rellevant, sovint només llegint les capçaleres, per començar (solen passar molt poc temps en una pàgina web). Si no poden veure res útil en uns pocs segons, és probable que se sentin frustrats i van a un altre lloc.
  • Els motors de cerca que indexen les pàgines consideren el contingut dels títols paraules clau importants, que influeixen en la posició de cerca de les pàgines. Sense títols, la vostra pàgina funcionarà malament en termes d’optimització dels motors de cerca (search engine optimization, o SEO).
  • Les persones amb discapacitats visuals greus sovint no llegeixen les pàgines web; en lloc d’això, les escolten. Això es fa amb una aplicació de programari anomenada lector de pantalla. Aquesta aplicació proporciona maneres d'obtenir un accés ràpid al contingut del text. Entre les diferents tècniques que s’utilitzen, proporcionen un esquema del document a partir de la lectura dels títols, que permet als usuaris trobar la informació que necessiten ràpidament. Si els títols no estan disponibles, es veuen obligats a escoltar tot el document llegit en veu alta.
  • Per a aplicar estil al contingut amb CSS o per a fer-li fer coses interessants amb JavaScript, cal tenir elements que delimitin el contingut rellevant, de manera que CSS/JavaScript els puguin localitzar.

Per tant, hem de donar al nostre contingut un etiquetatge estructural.

Aprenentatge actiu: donar estructura als continguts

Passem directament a un exemple en viu. En l'exemple que següent, afegim elements al text sense format en el requadre d’entrada perquè en el requadre de sortida aparegui com un títol i dos paràgrafs.

Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

Per què cal semàntica?

Tot al nostre entorn compta amb semàntica; comptem amb l'experiència prèvia per a conèixer la funció dels objectes quotidians; quan veiem una cosa, sabem quina és la seva funció. Així, per exemple, esperem que un semàfor en vermell tingui el sentit de «parar», i un semàfor en verd signifiqui «continuar». Si apliquem malament la semàntica, les coses poden complicar-se ràpidament (hi ha cap país en què el vermell signifiqui «continuar»? Esperem que no!).

En una línia similar, ens hem d’assegurar que utilitzem els elements correctes per a donar al nostre contingut el significat, la funció o l’aspecte correctes. En aquest context, l'element <h1> és també un element semàntic, que dona al text al qual delimita la funció (o el sentit) d'un «nivell superior en la capçalera de la teva pàgina».

<h1>This is a top level heading</h1>

Per defecte, el navegador hi donarà una mida de cos de lletra gran perquè es vegi com un títol d’encapçalament (encara que amb CSS podries aplicar-hi estil perquè tingui l’aspecte que vulguis). I encara és més important el fet que el seu valor semàntic s’utilitzarà de diverses maneres, per exemple, l’empraran els motors de cerca i els lectors de pantalla (com hem esmentat abans).

D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

Aquest és un element <span>. No té semàntica. Es fa servir per a delimitar el contingut quan vols aplicar-hi CSS (o fer alguna cosa amb JavaScript) sense donar-hi cap significat addicional (en trobaràs més informació més endavant en el curs). Hi hem aplicat una mica de CSS perquè es vegi com un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà cap dels beneficis addicionals que hem esmentat abans. És bo emprar l'element HTML que correspon a cada funció.

Llistes

Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida, de la llista de la compra a la llista de carrers que seguim subconscientment per a arribar a casa cada dia, a les llistes d'instruccions que segueixes en aquests tutorials! Les llistes també estan pertot arreu al web, i n’hi ha tres tipus diferents dels quals ens volem ocupar.

No ordenades

Les llistes no ordenades s'utilitzen per a marcar les llistes d'elements en què l'ordre dels elements no és important; com a exemple, farem una llista de la compra.

milk
eggs
bread
humous

Totes les llistes no ordenades comencen amb un element <ul> que delimita tots els elements de la llista:

<ul>
milk
eggs
bread
humous
</ul>

L'últim pas consisteix a delimitar cada element de la llista amb un element <li> (element de llista):

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>humous</li>
</ul>

Aprenentatge actiu: etiquetatge d'una llista no ordenada

Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.

Ordenades

Les llistes ordenades són llistes en què l'ordre dels elements és important. Com a exemple, prendrem un seguit d’instruccions per a arribar a una adreça:

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

L'estructura de l’etiquetatge és la mateixa que per a les llistes no ordenades, excepte que cal delimitar els elements de la llista amb un element <ol>, en lloc d’amb un element <ul>:

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

Aprenentatge actiu: etiquetatge d'una llista ordenada

Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.

Aprenentatge actiu: etiquetatge de la teva pàgina de receptes

En aquest punt de l'article ja tens tota la informació que necessites per a marcar el teu exemple d’una pàgina de receptes. Pots optar per desar una còpia local del nostre arxiu d'inici text-start.html i fer la feina allà, o fer-ho en l'exemple editable a continuació. Fer-ho de manera local probablement serà millor, perquè aleshores podràs desar la feina que hi facis, mentre que si treballes en l'exemple editable, la perdràs la vegada següent que obris la pàgina. Totes dues coses tenen pros i contres.

Si t’encalles, sempre es pot prémer el botó Mostra la solució o fer un cop d'ull al nostre exemple text-complete.html que trobaràs en el nostre repositori de GitHub.

Llistes imbricades

És perfectament correcte imbricar una llista dins d'una altra. És possible que vulguis tenir subvinyetes sota d’una vinyeta de nivell superior. Considera la segona llista del nostre exemple recepta:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
  <li>If you want a smooth humous, process it for a longer time.</li>
</ol> 

Atès que les dues últimes vinyetes estan molt estretament relacionades amb l'anterior (es llegeixen com a subinstruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit imbricar-les en una llista desordenada pròpia i posar aquesta llista dins de la quarta vinyeta. Es veuria així:

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
      <li>If you want a smooth humous, process it for a longer time.</li>
    </ul>
  </li>
</ol>

Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.

Èmfasi i importància

En el llenguatge humà, sovint destaquem certes paraules per a alterar el significat d'una oració, i moltes vegades volem ressaltar certes paraules perquè són importants o perquè són diferents d'alguna manera. HTML proporciona diversos elements semàntics que permeten destacar el contingut textual amb aquesta finalitat, i en aquest apartat en veurem alguns dels més comuns.

Èmfasi

Quan en el llenguatge parlat volem donar èmfasi, accentuem certes paraules de manera que n’alterem subtilment el significat. De la mateixa manera, en el llenguatge escrit tendim a posar en cursiva les paraules que volem emfatitzar. Per exemple, les dues frases següents tenen significats diferents.

I am glad you weren't late.

I am glad you weren't late.

La primera frase expressa alleujament autèntic perquè la persona no arriba tard. Per contra, la segona sona amb sarcasme o agressivitat passiva, que expressa enuig perquè la persona arriba una mica tard.

En HTML s'utilitza l'element <em> (èmfasi) per marcar aquests casos. Alhora que fa que el document sigui més interessant de llegir, els lectors de pantalla reconeixen aquests elements i hi incorporen un to de veu parlat diferent. Els navegadors hi apliquen per defecte l’estil de lletra cursiva, però aquesta etiqueta no és l’única que podem usar per a donar un estil de lletra cursiva. Per a això també podem utilitzar un element <span> i una mica de CSS, o potser un element <i> (veure més endavant).

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

Importància

Per a destacar la importància de les paraules, en el llenguatge parlat tendim a accentuar-les, i en el llenguatge escrit les posem en lletra negreta. Per exemple:

This liquid is highly toxic.

I am counting on you. Do not be late!

En HTML s'utilitza l'element <strong> (importància forta) per a destacar aquests casos. A mes de fer el document més útil, de nou els lectors de pantalla reconeixen aquests elements i hi apliquen un to de veu diferent. L'estil per defecte que els navegadors apliquen a aquest text és la lletra negreta, però aquesta etiqueta no és l’única que podem usar per a aplicar l’estil de lletra negreta. Per a això també podem utilitzar un element <span> i una mica de CSS, o potser un element <b> (veure més endavant).

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

Aprenentatge actiu: ser important!

En aquesta secció d'aprenentatge actiu, et proporcionem un exemple editable. Per a adquirir una mica de pràctica, afegeix èmfasi i importància a les paraules que penses que ho necessiten.

Cursiva, negreta, subratllat...

Els elements que hem tractat fins ara tenen una semàntica associada clara. La situació amb <b>, <i> i <u> és una mica més complicada. Van arribar perquè la gent pogués escriure text en negreta, cursiva o subratllat en una època en què el CSS encara era poc compatible, o gens en absolut. Elements com aquests només afecten la presentació, però no la semàntica; es coneixen com elements de presentació i ja no s'haurien d'utilitzar perquè, com hem vist, la semàntica és molt important per a l'accessibilitat, el posicionament SEO, etc.

HTML5 va redefinir les etiquetes <b>, <i> i <u> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.

Aquesta és la millor regla d'or: només és apropiat utilitzar <b>, <i> o <u> quan es vol transmetre un significat que tradicionalment s’ha expressat amb lletra negreta, cursiva o subratllat, si no hi ha cap element més adequat. No obstant això, sempre continua sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és gaire útil per a les persones que utilitzen lectors de pantalla, ni per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.

  • <i> s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra cursiva: paraules estrangeres, denominacions taxonòmiques, termes tècnics, un pensament...
  • <b> s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra negreta: paraules clau, noms de productes, frases importants...
  • <u> s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra subratllat: noms propis, faltes d'ortografia...

Una advertència amable sobre el subratllat: la gent associa en gran mesura el subratllat amb els hipervincles. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <u> quan sigui semànticament apropiat, però considera l'ús de CSS per a canviar el valor per omissió del subratllat per alguna cosa més apropiada en la web. L’exemple següent il·lustra com es pot fer:

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to <u>spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

Resum

Això és tot per ara! Aquest article t’hauria d’haver donat una idea prou bona de com començar a marcar text en HTML i presentat alguns dels elements més importants en aquest àmbit. Hi ha molts més elements semàntics per a exposar en aquest àmbit, i en veurem molts més en el nostre article «Més elements semàntics», més endavant en el curs. En el proper article, veurem amb detall com crear hipervincles, possiblement l'element més important en la web.