Skip to main content

Format de text

Aquest capítol se centra en com aplicar format al text i com utilitzar elements HTML útils com <pre>, <span>, <mark>, <code>, comentaris i més.

Text preformatat – <pre>​

L’etiqueta <pre> mostra el text tal com s’ha escrit al codi, respectant els espais i salts de línia.

<pre>
Hola sóc Joan.
Benvinguts a la classe.
</pre>

A diferència de <p>, no ignora espais ni format.

Activitat 1​

Crea un petit poema utilitzant l’etiqueta <pre>.

Etiqueta <span>​

Element en línia que no afegeix estructura, però permet aplicar estils a parts específiques del text.

<p>El nostre <span style="color:red;">candidat</span> és molt preparat.</p>

És ideal per:

  • Aplicar estils CSS
  • Manipular amb JavaScript
  • Resaltar text dins de <p> o altres elements

Format de text​

Negreta​

<b>Text en negreta</b> <strong>Text important</strong>

Usa <strong> per a èmfasi semàntic real.

Cursiva​

<i>Text en cursiva</i> <em>Text amb èmfasi</em>

Subratllat​

<u>Text subratllat</u>

Tatxat​

<s>Text obsolet</s> <del>Text esborrat</del>

Superíndex i subíndex​

H<sub>2</sub>O / x<sup>2</sup>

Text petit​

<small>Text petit</small>

Codi​

<code>console.log("Hola món")</code>

Cita en bloc​

<blockquote>
  “La imaginació és més important que el coneixement.”
  <cite>Einstein</cite>
</blockquote>

Abreviatures​

<abbr title="HyperText Markup Language">HTML</abbr>

Text ressaltat​

<mark>Text destacat</mark>

Comentaris en HTML​

Els comentaris són útils per documentar codi o afegir notes que no es mostren al navegador.

<!-- Aquesta secció conté dos inputs per DNI i telèfon -->
<input type="text" value="79279613J" />
<input type="number" value="600121314" />

Aquest capítol et dona control sobre el format, visibilitat i estructura semàntica del text en HTML, a més d’introduir elements essencials per desenvolupar pàgines accessibles i organitzades.