Text en els documents HTML

El text és el contingut principal dels documents HTML, i amb les etiquetes HTML podrem tant estructurar-lo com marcar els elements més importants.

Paràgrafs

Els paràgrafs són elements habituals en qualsevol text, i en HTML es delimiten amb la etiqueta <p> que ja hem utilitzat a «el nostre primer document HTML».

<p>Açò és un paràgraf.</p>

Capçaleres de secció

Els títols que encapçales les diferents seccions d’un text s’anomenen en HTML «capçaleres».

Un text pot estar estructurat en diferents seccions jeràrquiques. Un llibre, per exemple, pot tenir els seus continguts dividits en «blocs», dins dels quals hi haurà «temes» i que estaran a la seua vegada dividits en «apartats». Les capçaleres d’aquestes seccions apareixen habitualment ressaltats al text. En HTML s’utilitzen les etiquetes <h1> fins <h6> per a les capçaleres de seccions en ordre decreixent d’importància. Pots veure un exemple a continuació.

<body>
    <h1>Capçalera principal</h1>
        <h2>Primera sub-secció</h2>
            <p>Contingut...</p>
        <h2>Segona sub-secció</h2>
            <p>Més contingut...</p>
            <h3>Secció de categoria inferior</h3>
                <p>Un poc més de contingut...</p>
</body>

A no ser que utilitzem fulls d’estil CSS els navegadors utilitzaran automàticament una grandaria de lletra major per tal de destacar els títols de les seccions.

Text destacat

És possible que desitgem marcar un cert fragment de text perquè és més important que el text que l’envolta. L’etiqueta <em> indica que cal destacar un text i <strong> indica una importància encara major.

És habitual que els navegadors mostren el text marcat amb l’etiqueta <em> amb cursiva, i el marcat amb l’etiqueta <strong> amb negreta.

<p>Hi ha paraules <em>importants</em> i altres <strong>molt importants</strong>.</p>

És fàcil confondre les etiquetes em i strong amb l’etiqueta semàntica mark. La diferència consisteix en que mentre que les primeres etiquetes donen una major importància a un bloc dins del text (de la mateixa manera que ho faríem utilitzant negreta o cursiva), en canvi l’etiqueta mark simplement destaca un bloc de text sense donar-li una major importància. Per exemple: quan un cercador ens porta a una pàgina web, de vegades apareixen ressaltades amb un fons de color les paraules que em utilitzat en la recerca.

Cites

Quan un fragment de text siga una cita, ho indicarem amb l’etiqueta <blockquote>. Els navegadors mostraran el text amb un sagnat major que el de la resta del text. L’etiqueta <blockquote> utilitza l’atribut «cite» per indicar l’adreça del document original, de la manera següent:

<blockquote cite="http://ca.wikipedia.org/wiki/Papallona">
    <p>Les papallones viuen actualment en tots els continents, des
    del nivell del mar fins a les més altes muntanyes i des dels
    tròpics fins a les regions àrtiques.</p>
    <p>Es caracteritzen per tenir unes ales cobertes d'escates, que
    poden ser de molts colors.</p>
</blockquote>

Així com <blockquote> marca una cita més llarga, podem utilitzar l’etiqueta <q> per a cites més curtes dins d’un paràgraf, i l’etiqueta <cite> per ressaltar la font o l’autor.

<p>Com va dir <cite>Albert Einstein</cite>:
<q>La imaginació és més important que el coneixement</q>.</p>

Nota

Cal no confondre l’etiqueta <cite> amb l’atribut cite de l’etiqueta <blockquote>, encara que s’anomenen igual!

Abreviatures i acrònims

Les abreviatures i acrònims (o sigles) es poden marcar amb l’etiqueta <abbr>. Utilitzarem el atribut title per indicar el seu significat.

<p>Estem aprenent a escriure en
<abbr title="HyperText Markup Language">HTML</abbr>.
</p>

Salts de línia

Quan escrivim en HTML podem utilitzar tots els espais en blanc i salts de línia que considerem necessaris per millorar la llegibilitat del nostre codi, ja que els navegadors ignoraran tots els espais i salts sobrants.

Açò té una conseqüència, que és que veurem exactament igual els següents dos paràgrafs.

<p>Un paràgraf sense espais ni salts de línia.</p>

<p>Un paràgraf
amb
molts                    espais i
salts
de             línia
extra.</p>

Cal una etiqueta per introduir un bot de línia extra, que és <br>. Aquesta és una etiqueta especial, ja que al no contenir res al seu interior no cal tancarla.