You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/HTML/Introducció_al_HTML/Format_de_text_avançat

Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els elements bàsics de text HTML. Els elements que es descriuen en aquest article són menys coneguts, però són útils de conèixer (i això no és encara en absolut una llista completa). Aquí aprendreu sobre l’etiquetatge de les citacions, de les llistes de descripció, del codi d'ordinador i altres textos relacionats, dels subíndexs i superíndexs, de la informació de contacte, i de molt més.

Requisits previs: Familiarització amb els elements bàsics de l’HTML, com es tracten en iniciació a l’HTML. Aplicació de format a textos amb HTML, com s'explica en els Elements bàsics de text en HTML.
Objectiu: Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.

Llistes de descripció

En els elements bàsics de text en HTML, hem fet camí pels elements d’etiquetatge bàsics de les llistes en HTML, però no hem esmentat un tercer tipus de llistes amb que et pots topar opcionalment, les llistes de descripció. El propòsit d'aquestes llistes és etiquetar un conjunt d'elements i les descripcions associades a aquests, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information

Les llistes de descripció utilitzen un etiquetatge diferent dels altres tipus de llistes, l’element <dl>; a més, cada terme es delimita amb un element <dt> (descripció del terme), i cada descripció es delimita amb un element <dd> (definició de la descripció). Acabem d’etiquetar el nostre exemple:

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
</dl>

Els estils per defecte del navegador mostren els termes de les llistes de descripció sagnats en certa mesura respecte de les descripcions. Els estils de MDN segueixen aquesta convenció de bastant a prop, però a més, destaquen els termes amb lletra negreta.

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.

Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:

aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)

Aprenentatge actiu: etiquetatge d'un conjunt de definicions

És l’hora de posar a prova la teva destresa amb les llistes de descripció; afegeix elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Si vols, pots fer servir termes i descripcions propis..

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

Citacions

HTML també disposa d’atributs per a l’etiquetatge de cites; quin element s'utilitza, depèn de si s’etiqueta en el nivell de bloc o es fa en el nivell de línia.

Elements de bloc de citació (blockquotes)

Per a indicar que una secció de continguts de nivell de bloc (un paràgraf, diversos paràgrafs, una llista, etc.) se cita des d'un altre lloc l’has d’etiquetar amb un element <blockquote>, i has d’incloure en un atribut cite una URL que apunti cap a la font de la citació. Per exemple, la línia de codi següent es pren de la pàgina MDN: «L'element <blockquote>»:

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

Per convertir això en una citació de bloc, has de fer això:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

L’estil per defecte del navegador mostra això com un paràgraf sagnat per indicar que es tracta d'una citació; MDN fa això, però també hi afegeix una mica més d'estil:

L'element  HTML <blockquote> (o element de bloc de citació HTML) indica que el text associat és una citació extensa.

Elements de línia de citació

Els elements de línia de citació funcionen exactament de la mateixa manera, només que utilitzen l'element <q>. Per exemple, una mica mes a baix l’etiquetatge inclou una citació de la pàgina MDN <q>:

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

L'estil per defecte del navegador mostra aquest text com un element normal posat entre cometes per a indicar que és una citació, com això:

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

Citacions

El contingut de l'atribut cite sembla útil , però per desgràcia als navegadors, als lectors de pantalla, etc., no els agrada treballar-hi. No hi ha manera d'aconseguir que el navegador mostri el contingut de cite sense necessitat d'escriure una solució pròpia amb JavaScript o CSS. Si vols que la font de la citació estigui disponible a la pàgina, la millor manera és etiquetar-la amb l'element <cite> al costat de l'element quote. Això serveix en realitat per a incloure el nom de la font de la citació, és a dir, el nom del llibre o el de la persona de qui és el text que se cita; però no hi ha cap raó per la qual el text no es pugui associar d'alguna manera la font de la cita dins de <cite>:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

Les citacions tenen l'estil en cursiva per defecte. Aquest codi es pot veure en el treball del nostre exemple quotations.html.

Aprenentatge actiu: Qui ha dit això?

Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:

  1. Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut cite.
  2. Convertir una part del tercer paràgraf en una línia de citació que inclogui un atribut cite.
  3. Incloure un element <cite> per a cada citació

Cerca a Internet per trobar fonts de citacions apropiades.

Si t’equivoques, sempre pots tornar a l’inici amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

Abreviatures

Un altre element força comú que et trobes quan et passeges per la web és <abbr>. Aquesta etiqueta serveix per a delimitar una abreviatura o un acrònim i proporcionar el desenvolupament complet del terme (que s’inclou dins d'un atribut title). Vegem-ne un parell d'exemples:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

Nota: Hi ha un altre element, <acronym>, que bàsicament fa el mateix que <abbr> i que està destinat específicament als acrònims, en lloc de les abreviatures, però que ha caigut en desús; i com que tampoc era compatible amb tots els navegadors, com ho és <abbr>, i les dues etiquetes tenen una funció similar, es va considerar inútil tenir-les totes dues. Per tant, fes servir només <abbr>.

Aprenentatge actiu: etiquetatge d'una abreviatura

Per a aquesta senzilla tasca d'aprenentatge actiu, només et proposem de fer l’etiquetatge d'una abreviatura. Pots utilitzar el nostre exemple a continuació, o substituir-lo per un de la teva elecció. 

Etiquetatge de les dades de contacte

HTML té un element per a etiquetar les teves dades de contacte: <address>. Aquesta etiqueta senzillament delimita de les dades de contacte; per exemple:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

Cal recordar, però, que l'element <address> és per a l’etiquetatge de les dades de contacte de la persona que escriu el document HTML, no per a una dada de contacte qualsevol. Per tant, l’etiquetatge anterior només és acceptable si el Chris que apareix en l’etiquetatge és qui ha escrit el document. Observa que també seria acceptable alguna cosa com ara això:

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superíndex i subíndex

De tant en tant hauràs d’utilitzar superíndex i subíndex per a etiquetar correctament elements com ara dates, fórmules químiques o equacions matemàtiques. Els elements <sup> i <sub> gestionen aquesta feina. Per exemple:

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffiene's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

La sortida d'aquest codi és com això:

My birthday is on the 25th of May 2001.

Caffeine's chemical formula is C8H10N4O2.

If x2 is 9, x must equal 3 or -3.

Representar codi informàtic

Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:

  • <code>: per a etiquetar peces genèriques de codi informàtic.
  • <pre>: per a etiquetar blocs de text d'amplada fixa, en què es conserven els espais en blanc (en general, blocs de codi)
  • <var>: per a etiquetar específicament els noms de variables.
  • <kbd>: per a etiquetar entrades de teclat (i altres tipus d’entrades) a l'ordinador.
  • <samp>: per a etiquetar la sortida d'un programa d'ordinador.

Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple other-semantics.html):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

El codi anterior es veuria així:

Etiquetatge d'hores i dates

HTML també proporciona l'element <time> per a etiquetar les hores i les dates en un format llegible per la màquina. Per exemple:

<time datetime="2016-01-20">20 January 2016</time>

Per què és això útil? Bé, hi ha moltes maneres diferents d’escriure les dates. La data anterior es podria escriure de totes aquestes maneres:

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016年1月20日
  • And so on

Però els ordinadors no reconeixen fàcilment aquesta diversitat de formes. Si vols agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari, l'element <time> et permet adjuntar una hora/data que una màquina podrà llegir inequívocament .

L'exemple bàsic anterior proporciona una simple data llegible per una màquina, però hi ha moltes altres opcions que són possibles, per exemple:

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

Resum

Això marca el final del nostre estudi de la semàntica de text HTML. Tingues present que el que has vist durant aquest curs no és una llista exhaustiva dels elements de text HTML; només hem volgut exposar els elements essencials i alguns dels més comuns que et pots trobar, o si més no, que puguis trobar prou interessants. Per trobar més elements HTML pel camí, pots fer una ullada a la nostra referència d'elements HTML (la secció de la semàntica de text en línia seria un bon lloc per on començar). En l’article següent veurem els diversos elements HTML que s'usen per a estructurar les diferents parts d'un document HTML.

Document Tags and Contributors

Contributors to this page: editorUOC, mdnwebdocs-bot, Legioinvicta
Last updated by: editorUOC,