Diseño Web 1 — 2026

Temas

HTML - Etiquetas de Texto

Todas las detalladas funcionan con etiqueta de apertura y cierre.

Comentarios

<!-- comentario invisible -->

Encabezados

Etiquetas de Encabezado

<h1>Encabezado de primer nivel</h1>
<h2>Encabezado de segundo nivel</h2>
<h3>Encabezado de tercer nivel</h3>
<h4>Encabezado de cuarto nivel</h4>
<h5>Encabezado de quinto nivel</h5>
<h6>Encabezado de sexto nivel</h6>

Aspectos a Tener en Cuenta

  • Marcan el nivel de importancia.
  • Siempre comienzan con h1 y son consecutivos, no pueden saltear niveles.
  • La apariencia se puede cambiar pero debe conservarse la jerarquía, ya que respetar la jerarquía ordena la información para aquellos que no ven su apariencia. Las relaciones que se implican en formato visual se deben conservar cuando se quita el estilo.
  • Debemos asegurarnos de que la relación que existe entre los títulos y los contenidos sea coherente, y de que los encabezados comuniquen la estructura del documento correctamente.
  • Se comportan como elementos de bloque (display: block).

Párrafo

<p>Párrafo</p>

Elemento de bloque (display: block).

Destaques

<em>Texto enfatizado</em>
<strong>Texto Resaltado</strong>
<small>Texto menor importancia</small>

Elemento de línea (display: inline).

Listas

Lista Desordenada

<ul>
  <li>Item de la lista</li>
  <li>Item de la lista</li>
  <li>Item de la lista</li>
</ul>

Lista Ordenada

<ol>
  <li>Item de la lista</li>
  <li>Item de la lista</li>
  <li>Item de la lista</li>
</ol>

Consideraciones

  • Las listas ul y ol solo pueden contener como hijos directos: items de listas (li).
  • Las viñetas son propiedades de las ul y ol, y se pueden modificar desde CSS.
  • Elemento de lista (display: list-item).

Lista de Definición

<dl>
  <dt>Tema de definir</dt>
  <dd>Definición del tema dentro de párrafos</dd>
</dl>

Elemento de bloque (display: block).

Citas

Cita Larga

<blockquote cite="http://cita.com">
  Cita larga extraída de otro lugar
</blockquote>

El atributo cite proporciona un enlace al documento original o fuente.

Elemento de bloque (display: block).

Cita Corta

<q>Cita corta</q>

Elemento de línea (display: inline).

Etiqueta de Referencia

<cite>
  Título de un trabajo, autor, obra
</cite>

Esta etiqueta se usa para hacer referencia a una fuente o autor de una cita.

Elemento de línea (display: inline).

Otros

<abbr title="expansión de la abreviatura">
  Abreviatura
</abbr>

<dfn>Definición</dfn>

<small>Comentario anexo que no es esencial para la comprensión</small>

<sub>Subíndice</sub>
<sup>Superíndice</sup>

Elementos de línea (display: inline).

Elemento Desplegable

<details>
  <summary>
    Título visible
  </summary>
  <p>
    Detalles adicionales que el usuario puede mostrar u ocultar
  </p>
</details>

Esta etiqueta genera un elemento desplegable del cual solamente queda visible el texto dentro de la etiqueta summary, dejando al párrafo dentro del apartado desplegable.

Elemento de bloque (display: block).