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.

Aunque algunas de las etiquetas que estamos presentando tienen un impacto directo sobre cómo se visualiza la página web, estas nunca deben utilizarse para dicha finalidad estética, pues el estilo visual puede ser modificado totalmente mediante reglas CSS. Las etiquetas HTML deben responder siempre a la organización semántica del 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.

Los saltos de línea y los tabuladores son eliminados por los navegadores que interpretan el código HTML5, por lo que deberás tenerlo en cuenta y usar en caso de necesitarlo las etiquetas <br> y <pre>.

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>.

Las etiquetas <b>, <i> y <u> deben emplearse con moderación y únicamente cuando no sea posible utilizar alguna otra alternativa. Esto se debe a qué estas etiquetas, aunque tienen una intencionalidad semántica, normalmente se han utilizado con fines decorativos, lo cual debería conseguirse siempre a través de CSS3 y no a través de HTML5.

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.

Las etiquetas que ya no resultan aceptadas en HTML5 implicarán un error en los procesos de validación que pueden realizarse a través de: https://validator.w3.org/nu/

AnteriorT03: HTML5 - Contenido Textual SiguienteEtiquetas de Listas

Última actualización hace 2 años

¿Te fue útil?

Buenas tardes

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

Párrafos: <p>

Citas: <q> y <blockquote>

Separador de contenido: <hr>

Salto de línea: <br>

Texto preformateado: <pre>

Texto en negrita/llamativo: <b>

Texto con énfasis: <em>

Texto importante: <strong>

Texto resaltado: <mark>

Texto estilísticamente distinto: <u>

Texto en cursiva/con otro acento: <i>

Texto para citar una obra: <cite>

Término por definir: <dfn>

Código Fuente: <code>

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

Dirección de contacto: <address>

Sección de texto: <span>

Otras etiquetas de texto

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

Párrafos: `<p>`

Citas: `<q>` y `<blockquote>`

Separador de contenido: `<hr>`

Salto de línea: `<br>`

Texto preformateado: `<pre>`

Texto en negrita/llamativo: `<b>`

Texto con énfasis: `<em>`

Texto importante: `<strong>`

Texto resaltado: `<mark>`

Texto estilísticamente distinto: `<u>`

Texto en cursiva/con otro acento: `<i>`

Texto para citar una obra: `<cite>`

Término por definir: `<dfn>`

Código Fuente: `<code>`

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

Dirección de contacto: `<address>`

Sección de texto: `<span>`