Etiquetas de Texto

Títulos: <h1> .. <h6>

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Sirven para establecer los títulos o encabezados de nuestra página, apartados, entradas, etc. <h1> se utiliza en títulos principales de máxima relevancia, y es representado típicamente por el navegador como el título de mayor tamaño y la letra en negrita. A partir del <h1> hasta llegar al <h6> iríamos reduciendo la importancia del título y el tamaño por defecto con el que el navegador lo representaría.

Párrafos: <p>

<p>
    Una forma de medir el comportamiento del 
    sistema es su proporcionalidad: la diferencia 
    que hay entre el porcentaje de escaños de una 
    formación y el de votos obtenidos. La 
    experiencia muestra que en España los partidos 
    nacionales por debajo del 15% de sufragios han 
    sido penalizados con menos representantes de 
    los que conseguirían en una circunscripción 
    única.
</p>

Sirven para establecer los párrafos dentro de un texto. La etiqueta añade un salto de línea en blanco antes del texto, por lo que debe considerarse dicha característica a nivel visual.

Citas: <q> y <blockquote>

<q>If I look back I am lost.</q>
<blockquote>
	 The man who passes the sentence should swing  
      the sword. If you would take a man's life, 
      you owe it to him to look into his eyes and 
      hear his final words. And if you cannot bear 
      to do that, then perhaps the man does not 
      deserve to die.
</blockquote>

Ambas etiquetas sirven para delimitar citas, la diferencia reside en que <q> se utiliza para citas breves que no deben separarse del resto del contenido y que típicamente el navegador muestra entrecomilladas. Por el contrario, <blockquote> se utiliza para citas más largas que queramos destacar y separar del resto de contenido que las rodea.

Separador de contenido: <hr>

Sección 1
  <hr>
Sección 2

Sirve para establecer una ruptura en la temática del contenido. Usualmente el navegador lo representa renderizando una línea horizontal que separa el contenido.

Salto de línea: <br>

<p>
  La mariposa revolotea<br>como si desesperara<br>en este mundo<br>
</p>

El uso de esta etiqueta es el de romper la regla de los espacios en blanco y saltos de línea dentro del código (que el navegador acaba eliminando). En resumen, crea un salto de línea.

Texto preformateado: <pre>

<pre>
#include &lt;stdio.h&gt;

int main()
{
     printf("Hola mundo");
     return 0;
}
</pre>

Esta etiqueta también ayuda a romper la regla de los espacios en blanco. Se representa con una fuente monoespacio y respeta los saltos de línea, tabuladores y espacios en blanco. Resulta muy útil para ilustrar porciones de código.

Texto en negrita/llamativo: <b>

<p>
  Viva el <b>Gon!</b>
</p>

Esta etiqueta indica texto en negrita o llamativo. De acuerdo a la última especificación de HTML5 solamente se debería utilizar como último recurso y siempre que no exista una etiqueta más apropiada. Normalmente esta etiqueta puede ser sustituida por las etiquetas <em>, <strong> o <mark>, según el contexto.

Texto con énfasis: <em>

<p>
  Viva el <em>Gon!</em>
</p>

Esta etiqueta sirve para dar énfasis al texto que rodea. Visualmente se suele renderizar en cursiva.

Texto importante: <strong>

<p>
  Viva el <strong>Gon!</strong>
</p>

Esta etiqueta sirve para definir un texto como importante, por lo que se suele representar usando la negrita. Normalmente debería ser la opción preferente en lugar de <b>.

Texto resaltado: <mark>

<p>
  Viva el <mark>Gon!</mark>
</p>

Esta etiqueta sirve resaltar un texto, como se haría al subrayar las partes importantes de un fragmento de texto. Normalmente se representa destacando el texto con un fondo fosforescente.

Texto estilísticamente distinto: <u>

<p>
   Viva <u>er</u> Gon!
</p>

Esta etiqueta define un texto estilísticamente distinto del resto, normalmente indicando errores ortográficos o similares. Normalmente se representa como texto subrayado.

Texto en cursiva/con otro acento: <i>

<p>
  Viva el <i>Gon!</i>
</p>

Esta etiqueta sirve para indicar que el texto debe ser leído de forma distinta al resto del pasaje, usualmente representándose como texto en cursiva. Al igual que pasa con la etiqueta <b> en HTML5 solo debería usarse ante la falta de una mejor alternativa. Normalmente es mejor opción emplear cualquier de las siguientes opciones: <em>, <strong>, <mark>, <cite> o <dfn>.

Texto para citar una obra: <cite>

<p>
   <cite>El Grito</cite> 
   por Edward Munch. Pintado en 1893.
</p>

Esta etiqueta sirve para indicar el título de una obra o trabajo, generalmente una pintura, escultura, libro, canción, etc.

Término por definir: <dfn>

<p>
   <dfn>HTML5</dfn> es un standard internacional.
</p>

Esta etiqueta indica un término que a continuación se va a definir.

Código Fuente: <code>

<code>
#include <stdio.h>

int main()
{
     printf("Hola mundo");
     return 0;
}
</code>

Esta etiqueta sirve para mostrar una porción de código de programación. Se emplea una fuente monoespacio como en el caso de <pre> pero no se conservan saltos de líneas, tabulaciones ni espacios en blanco adicionales. No obstante, es la más adecuada para mostrar códigos fuentes.

Superíndice y subíndice: <sup> y <sub>

<p>
  La potencia 2<sup>10</sup> define un KB<sub>[1]</sub>
</p>

La etiqueta <sup> sirve para definir un superíndice mientras que su homóloga <sub> define un subíndice.

Dirección de contacto: <address>

<address>
  David LeGon<br><br>
  742 Evergreen Terrace<br>
  Springfield <br>
  USA<br>
</address>

Esta etiqueta sirve para definir una dirección de contacto del autor del documento o artículo. Normalmente todo su contenido se suele renderizar en cursiva.

Sección de texto: <span>

<p>
   Viva el <span>Gon!</span>
</p>

Esta etiqueta sirve definir una sección de texto y se usa para aplicar un estilo independiente a la sección mediante el uso de CSS3. Su uso es parecido al de la etiqueta <div> pero en este caso para organizar y dar estilo a elementos de tipo inline y no en bloque.

Otras etiquetas de texto

No todas las etiquetas que se han venido utilizando históricamente continúan siendo igualmente válidas. En general todas las etiquetas sin una semántica definida que solamente ofrecían una funcionalidad estética han sido discontinuadas y eliminadas en la especificación de HTML5. Se recomienda el reemplazo de todas estas etiquetas por estilos mediante CSS3. Algunas de las etiquetas prohibidas son:

• <center>: Texto centrado.

• <big>: Texto mayor.

• <small>: Texto menor.

• <font>: Permite definir la fuente.

• <frame>: Define una sección especial.

• <tt>: Texto en formato teletipo.