MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

Un dels principals treballs d'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 en que HTML es pot utilitzar per estructurar una pàgina de text afegint capçaleres i paràgrafs, emfatitzant paraules, la creació de llistes, i més.

Requisits previs: Familiaritat bàsica en HTML, com es tracta en Inici en HTML.
Objectiu: Aprendre com marcar una pàgina bàsica de text per donar-li estructura i significat - incloent paràgrafs, capçaleres, llistes, èmfasi i cites.

Conceptes bàsics: Capçaleres i Paràgrafs

La majoria del text estructurat es compon de capçaleres i paràgrafs, independentment de si esteu llegint 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 lectura sigui més fàcil i agradable.

En HTML, cada paràgraf ha de ser embolicat en un element <p>, així:

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

Cada capçalera ha de ser embolicada en un element capçalera:

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

Hi ha sis elements de capçalera - <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Cada element representa un nivell diferent de contingut en el document; <h1> representa la capçalera principal, <h2> representa subtítols, <h3> representa sub de subtítols, i així successivament.

Implementar una estructura jerarquica

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 sub-seccions 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>

Aixó realment depèn de vosaltres, el que representen exactament els elements que intervenen, sempre que la jerarquia tingui sentit. Només heu de tenir en compte una sèrie de millors pràctiques a mesura que creeu aquest tipus d'estructures:

  • Preferiblement només heu d'utilitzar un únic <h1> per pàgina - aquest és el títol de nivell superior, i tots els altres se sentin sota d'aquest en la jerarquia.
  • Assegureu-vos que utilitzeu les capçaleres en l'ordre correcte en la jerarquia. No utilitzeu <h3> per representar subtítols, seguit per <h2> per representar sub de subtítols - no té cap sentit i condueix a resultats estranys.
  • Dels sis nivells de títols disponibles, heu de tractar d'utilitzar no més de tres per pàgina, llevat que cregueu que sigui necessari. Els documents amb molts nivells (és a dir, una jerarquia profunda en capçaleres) es tornen difícils de manejar i navegar. En aquestes ocasions, és recomanable difondre el contingut a través de múltiples pàgines, si és possible.

Per què necessitem una estructura?

Per respondre a aquesta pregunta, anem a fer una ullada a text-start.html — el punt de partida del nostre exemple d'aquest article (Una bona recepta de humus). Heu de guardar una còpia d'aquest arxiu a l'ordinador, el necessitareu per als exercicis més endavant. El cos d'aquest document actualment conté diverses peces de contingut - que no estan marcades d'alguna manera, però estan separades per salts de línia (preme Intro/Retorn per passar a la següent línia).

No obstant això, quan obriu el document en el navegador, veureu que el text apareix com una gran tros!

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

Això es deu al fet que no hi ha elements que donin l'estructura de continguts, de manera que el navegador no sap el que és un títol i el que és un paràgraf. A més:

  • Els usuaris que busquen en una pàgina web tendeixen a fer una ullada ràpida per 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 es van a un altre lloc.
  • Els motors de cerca indexan les pàgines consideran el contingut de les capçaleres com a paraules clau importants, per influir en el rànquing de cerca de les pàgines. Sense capçaleres, la vostre pàgina funcionarà malament en termes de SEO (Search Engine Optimization).
  • Les persones amb deficiències visuals greus, sovint no llegeixen les pàgines web; en el seu lloc, escolten. Això es realitza amb un programari anomenat lector de pantalla. Aquest programari proporciona maneres d'obtenir un ràpid accés al contingut del text donat. Entre les diferents tècniques utilitzades, proporcionen un esquema del document amb la lectura de les capçaleres, el que permet als seus usuaris trobar la informació que necessiten ràpidament. Si les capçaleres no estan disponibles, es veuran obligats a escoltar tot el document llegit en veu alta.
  • Per a l'estil del contingut amb CSS, o per fer coses interessants amb JavaScript, cal tenir elements que envoltin el contingut rellevant, per la qual cosa CSS/JavaScript poden orientar de manera efectiva.

Per tant, hem de donar el nostre contingut un marcat estructural.

Aprenentatge actiu: Donar estructura de continguts

Anem a saltar directament a un exemple en viu. En l'exemple a continuació, afegim elements al text sense format en el Camp d'entrada perquè aparegui com un títol i dos paràgrafs en el Camp de sortida.

Si cometeu un error, sempre es pot restablir amb el botó de reinici. Si us quedeu encallats, feu clic al botó Mostra solució per veure la resposta.

Perquè es necessita la semàntica?

La semàntica es basar a tot arreu al voltant de nosaltres - ens basem en l'experiència prèvia que ens diu quina és la funció dels objectes quotidians; quan veiem alguna cosa, sabem quina serà la seva funció. Així, per exemple, s'espera que un semàfor en vermell tingui el sentit de "parar", i un semàfor en verd signifiqui "continuar". Les coses poden complicar-se ràpidament si s'aplicar la semàntica equivocadament (fent que quaselvol país utilitzi el color vermell que signifiqui "continuar"? Espero que no).

En una línia similar, hem de assegurar-nos que estem utilitzant els elements correctes, donant el nostre contingut el significat, funció o aspecte correcte. En aquest context, l'element <h1> és també un element semàntic, que dóna el text que s'embolica al seu voltant la funció (o sentit) d ' "un nivell superior en la capçalera de la vostra pàgina."

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

Per defecte, el navegador li donarà una mida de font gran perquè es vegi com un encapçalament (encara que l'estil pogués semblar-se al que volgués utilitzant CSS). Més important encara, el seu valor semàntic serà utilitzat de diverses maneres, per exemple per motors de cerca i lectors de pantalla (com es va esmentar anteriorment).

D'altra banda, es pot fer que qualsevol element sembli un títol de nivell superior. Considereu el 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 embolicar el contingut quan es desitja aplicar CSS (o fer alguna cosa amb JavaScript) sense donar-li cap significat addicional (Trobareu més informació sobre aquest més endavant en el curs.) Hem aplicat una mica de CSS perquè es vegi com queda un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà qualsevol dels beneficis addicionals descrits anteriorment. És una bona idea utilitzar l'element HTML rellevant per al treball.

Llistes

Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida - des de la llista de compres a la llista d'adreces que seguin subconscientment per arribar a casa cada dia, a les llistes d'instruccions que se segueixen en aquests tutorials! Les llistes també estan per tot arreu al web, i tenim tres tipus diferents de les que preocupar-nos.

No ordenada

Les llistes no ordenades s'utilitzen per marcar les llistes d'elements per als quals l'ordre dels elements no importa - anem a fer una llista de compres com exemple.

milk
eggs
bread
humous

Cada llista no ordenada comença amb un element <ul> - aquest s'embolica al voltant de tots els elements de la llista:

<ul>
milk
eggs
bread
humous
</ul>

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

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

Aprenentatge actiu: Marcat d'una llista no ordenada

Proveu a editar l'exemple en viu, a continuació, per crear la vostre pròpia llista HTML no ordenada.

Ordenada

Les llistes ordenades són llistes en què l'ordre dels elements si importa - Anem a prendre un conjunt d'adreces com exemple:

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 marcat és el mateix que per a llistes no ordenades, excepte que cal embolicar els elements de la llista en un element <ol>, en lloc de <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: Marcat d'una llista ordenada

Proveu a editar l'exemple en viu, a continuació, per crear la vostre pròpia llista HTML ordenada.

Aprenentatge actiu: Marcat de la nostra pàgina de receptes

Així que en aquest punt de l'article, teniu tota la informació que necessiteu per marcar el nostre exemple de la pàgina de receptes. Podeu optar per guardar 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, ja que llavors conseguireu guardar la feina que esteu fent, mentre que si ho ompliu en l'exemple editable, es perdrà la propera vegada que obriu la pàgina.Tots dos tenen pros i contres.

Si us quedeu encallats, sempre es pot prémer el botó Mostrar solució, o fer un cop d'ull al nostre exemple text-complete.html en el nostre repositori de GitHub.

Llistes niades

És perfectament correcta niar una llista dins d'una altra. És possible que vulgueu tenir algunes sub-vinyetes assegudes sota una vinyeta de nivell superior. Anem a prendre 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 sub-instruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit niar-les dins de la seva pròpia llista desordenada, i posar aquesta llista dins de l'actual quarta vinyeta. Això 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>

Intenteu anar de nou a l'exemple anterior de l'aprenentatge actiu i actualitzar la segona llista com aquesta.

Èmfasi i la importància

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

Èmfasi

Quan volem donar èmfasi en el llenguatge parlat, fem èmfasi en certes paraules, alteran subtilment el significat del que estem dient. De la mateixa manera, en el llenguatge escrit tendim a emfatitzar paraules posant-les en cursiva. Per exemple, les següents dues frases tenen significats diferents.

I am glad you weren't late.

I am glad you weren't late.

La primera frase sona genuïnament alleujada per la persona, de que no era tard. Per contra, la segona sona sarcàstica o agressivitat passiva, expressant enuig perquè la persona va arribar una mica tard.

En HTML s'utilitza l'element <em> (èmfasi) per marcar aquests casos. Alhora fa que el document sigui més interessant per llegir, aquests són reconeguts pels lectors de pantalla i parlat en un to de veu diferent. El estil dels navegadors és en cursiva per defecte, però no necessariament s'ha d'usar aquesta etiqueta purament per donar un estil cursiva. Per a això, podeu utilitzar un element <span> i una mica de CSS, o potser un element <i> (veure més a baix).

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

Importància Forta

Per emfatitzar paraules importants, tendim a posar l'accent en el llenguatge parlat i la negreta en el llenguatge escrit. 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 marcar aquests casos. Per fer que el document sigui més útil, de nou aquests són reconeguts pels lectors de pantalla i parlen en un to de veu diferent. L'estil en els navegadors, d'aquest text, és en negreta per defecte, però no necessariament s'ha d'usar aquesta etiqueta purament per donar un estil negreta. Per a això, podeu utilitzar un element <span> i una mica de CSS, o potser un element <b> (veure més a baix).

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

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

Podeu niar fort i èmfasi un dins de l'altra, si ho desitjeu:

<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, hem proporcionat un exemple editable. Dins d'ell, ens agradaria que tracteu d'afegir èmfasi i una gran importància a les paraules que penseu que ho necessitan, només per tenir una mica de pràctica.

Cursiva, negreta, subratllat...

Els elements que hem trcatat fins ara tenen una semàntica associada aclaridora. 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 epoca que encara CSS era pobrament recolzat o gens en absolut. Elements com aquest, només afecten la presentació i no la semàntica, es coneixen com a elements de presentació i ja no s'han d'utilitzar, ja que com hem vist abans, la semàntica és molt important per a l'accessibilitat, SEO, etc.

HTML5 redefineix de nou les funcions semàntics de <b>, <i> i <u>, una mica confuses.

Aquí està la millor regla d'or: probablement el més apropiat és utilitzar <b>, <i> o <u> per transmetre un significat transmès tradicionalment amb negreta, cursiva o subratllat, sempre que no hi hagi cap element més adequat. No obstant això, sempre segueix sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és molt útil per a les persones que utilitzen lectors de pantalla, o per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.

  • <i> s'utilitza per transmetre un significat tradicionalment transmès en cursiva: paraules estrangeres, denominació taxonòmica, termes tècnics, un pensament...
  • <b> s'utilitza per transmetre un significat tradicionalment transmès en negreta: paraules clau, noms de producte, oració principal...
  • <u> s'utilitza per transmetre un significat tradicionalment transmès en subratllat: Nom propi, falta d'ortografia...

Una mena d'advertència sobre el subratllat: La gent associa indiscriminadament el subratllat amb els hipervincles. Per tant, a la web, el millor és posar en relleu només enllaços. Utilitzeu l'element <u> quan és semànticament apropiat, però considereu l'ús de CSS per canviar el valor per omissió del subratllat a alguna cosa més apropiada en la web. El següent exemple 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>

Sumari

Això és tot per ara! Aquest article hauria de donar una bona idea de com començar a marcar text en HTML, i la presentació d'alguns dels elements més importants en aquesta àrea. Hi ha molts més elements semàntics per a cobrir en aquesta àrea, i veurem molts més en el nostre article "Més Elements Semàntics", més endavant en el curs. En el proper article, veurem en detall com crear hipervincles, possiblement l'element més important en la web.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,