Apuntes html

HTML nunca falla, solo se ve raro.

Títulos, párrafos y formateo

En esta lección aprenderemos a estructurar y dar formato al contenido de una página web usando etiquetas como <h1> para títulos, <p> para párrafos, y otras como <strong> o <blockquote> para resaltar texto. Estas etiquetas son esenciales para organizar información y hacerla clara para los usuarios y navegadores. También veremos otras etiquetas mas especializadas como <address>, <cite>, <abbr>.

Títulos (<h1> a <h6>)

Los títulos organizan el contenido en secciones, como capítulos de un libro. Usa <h1> para el título principal, <h2> para subtítulos, y así hasta <h6>.

Recomendación:

  • Usa <h1> una vez por página (título principal).
  • Sigue un orden lógico basado en jerarquía (<h1>, luego <h2>, no saltes a <h4>).
  • Son elementos de bloque (ocupan toda la anchura de la página: cualquier texto que siga se mostrará en una nueva línea).

Ejemplo:

<h1>Mi sitio web</h1>
<h2>Introducción</h2>
<h3>Historia</h3>

El texto dentro de estas etiquetas se muestra como un título, con un tamaño que disminuye de <h1> (el más grande) a <h6> (el más pequeño). Pero las cabeceras no son solo para apariencia; también indican la importancia jerárquica del contenido. Por ejemplo, <h1> debería usarse para el título principal de la página, <h2> para secciones importantes, y así sucesivamente.

Párrafos (<p>)

La etiqueta <p> delimita párrafos de texto. Es un elemento de bloque (cualquier texto que siga a una etiqueta </p> que cierra el párrafo, se presentará en nueva línea), siendo ideal para contenido largo.

Ejemplo:

<p>Este es un párrafo. Puede incluir <a href="https://example.com">enlaces</a> o texto formateado.</p>
<p>Otro párrafo con el texto: dábale arroz a la zorra el abad.</p>

Resultado: Dos párrafos separados por un espacio.
Aunque en el pasado algunos autores omitían la etiqueta de cierre </p> (porque el navegador "adivinaba" el fin del párrafo al encontrar otro <p>), esto no es una buena práctica. Siempre cierra tus párrafos con </p> para que el código sea claro y cumpla con los estándares.
No te fijes por ahora en la etiqueta <a> del primer párrafo. Es un enlace que veremos posteriormente.

Saltos de línea y líneas horizontales (<br> y <hr>)

  • <br>: Inserta un salto de línea dentro de un elemento (por ejemplo, en <p>). Es un elemento vacío (no necesita cierre).
  • <hr>: Crea una línea horizontal para separar secciones. También es vacío.

Ejemplo:

<p>Primera línea<br>Segunda línea</p>
<hr>
<p>Nueva sección después de la línea.</p>

Resultado: Salto de línea dentro del párrafo y una línea horizontal entre secciones.

Ten en cuenta que el navegador ignora por completo los saltos de línea y los espacios múltiples que escribas en tu editor de texto. Por ejemplo:

<p>Este texto
    tiene     espacios
       y saltos</p>

Se mostrará como una sola línea en el navegador, a menos que uses <p> (para un nuevo párrafo) o <br> (para un salto de línea).

Espacios ininterrumpidos

Si necesitas más de un espacio entre palabras o quieres evitar que dos palabras se separen al final de una línea, usa la entidad non-breaking space. Por ejemplo: 

<p>Coca&nbsp;Cola</p>

Esto asegura que "Coca" y "Cola" aparezcan juntas, incluso si están al final de una línea. Sin embargo, evita usarlo como elemento de diseño (como simular tabuladores), ya que eso debe hacerse con CSS (padding o margin).

Formateo de texto (<strong>, <em>, <span>)

Estas etiquetas dan énfasis o estilo al texto:

  • <strong>: Indica importancia (normalmente en negrita).
  • <em>: Indica énfasis (normalmente en cursiva).
  • <span>: marca el texto que encierra para aplicarle estilos CSS. No tiene significado semántico por sí mismo (por sí no hace nada), pero es útil para aplicar estilos específicos a una parte concreta del documento

Ejemplo:

<p>Este texto es <strong>importante</strong> y este está <em>enfatizado</em>.</p>
<p><span style="color: red;">Texto rojo</span> con CSS.</p>

Resultado: Texto en negrita, cursiva, o con color.

Hay otras etiquetas similares como <u>, <b> o <i> que siguen siendo válidas, pero no se recomienda su uso, sino para finalidades específicas. La etiqueta <u> (underline) subraya el texto, <b> lo muestra en negrita, y <i> lo muestra en cursiva. Sin embargo, estas etiquetas no tienen un significado semántico claro y su uso puede llevar a confusiones.

Citas y definiciones (<blockquote>, <cite>, <dfn>)

  • <blockquote>: indica que el texto que encierra es un bloque de texto de otra fuente (elemento de bloque, introduce salto de línea).
  • <cite>: Indica la fuente de una cita (elemento en línea).
  • <dfn>: Señala el término que está siendo objedo de definición.

Ejemplo:

<blockquote>
  <p>La vida es lo que pasa mientras estás ocupado haciendo otros planes.</p>
  <cite>John Lennon</cite>
</blockquote>
<p>El término <dfn>HTML</dfn> significa HyperText Markup Language.</p>

Resultado: Cita con sangría y definición resaltada.

La vida es lo que pasa mientras estás ocupado haciendo otros planes.

John Lennon

El término HTML significa HyperText Markup Language.

Abreviaturas y direcciones (<abbr>, <address>)

  • <abbr>: Indica que encierra abreviatura, con title para la forma completa, que usualmente se muestra como tooltip al pasar el ratón por encima.
  • <address>: Proporciona información de contacto (elemento de bloque).

Ejemplo:

<p>Trabajo en la <abbr title="Organización de las Naciones Unidas">ONU</abbr>.</p>
<address>
  John Doe<br>
  Correo: john@doe.net
</address>

Resultado: Abreviatura con tooltip y dirección formateada.

Trabajo en la ONU.

John Doe
Correo: john@doe.net

Alineación de texto

Para centrar el texto en pantalla se usaba la etiqueta <center> o el atributo align (como <p align="center">). Ambos están obsoletos. Hoy, la alineación se logra con CSS, usando la propiedad text-align:

<p style="text-align: center;">Texto centrado</p>
<p style="text-align: left;">Texto alineado a la izquierda</p>
<p style="text-align: right;">Texto alineado a la derecha</p>
<p style="text-align: justify;">Texto justificado</p>

Para un proyecto real, idealmente todas estas reglas se colocan en un archivo CSS externo

Líneas separadoras

La etiqueta <hr> inserta una línea horizontal para separar secciones de contenido:

<p>Primer bloque de texto.</p>
<hr>
<p>Segundo bloque de texto.</p>

Por defecto, <hr> ocupa el ancho completo de la página y crea un bloque separado (con saltos de línea antes y después). Antes, se usaban atributos como width, align, size o noshade para personalizarla, pero están obsoletos.

Comentarios en HTML

Los comentarios son notas en el código que el navegador no muestra. Se escriben con la sintaxis <!-- -->:

<!-- Este es un comentario -->
<p>Este texto sí se ve.</p>
<!-- Recordatorio: revisar este párrafo -->

Los comentarios son muy útiles para:

  • Añadir notas sobre el propósito de una sección.
  • Marcar tareas pendientes (por ejemplo, "Añadir imagen aquí").
  • Desactivar temporalmente código sin borrarlo:
<!-- <p>Este párrafo está desactivado.</p> -->

No dudes en incluir comentarios para aclarar tu trabajo. Es muy frecuente olvidar por o para que algo se hizo de manera determinada.

Ejemplo completo

Página con títulos, párrafos, y formateo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formateo - ignit.xyz</title>
  <style>
    blockquote { border-left: 2px solid #333; padding-left: 10px; }
    address { font-style: italic; }
  </style>
</head>
<body>
  <header>
    <h1>Bienvenidos a mi web</h1>
  </header>
  <main>
    <h2>Sobre nosotros</h2>
    <p>Este es un <strong>sitio importante</strong> creado por <em>John Doe</em>.</p>
    <blockquote>
      <p>La web es para todos.</p>
      <cite>Tim Berners-Lee</cite>
    </blockquote>
    <p>El término <dfn>HTML</dfn> es clave en la <abbr title="World Wide Web">WWW</abbr>.</p>
    <hr>
    <h2>Contacto</h2>
    <address>
      John Doe de ignit.xyz<br>
      Correo: John@Doe.net
    </address>
    <p>dábale arroz a la zorra el abad</p>
  </main>
  <footer>
    <p>© 2025 ignit.xyz</p>
  </footer>
</body>
</html>

Instrucciones:

  • Guarda como formateo.html en UTF-8 (en VS Code: "Archivo" → "Guardar como" → selecciona UTF-8).
  • Abre en un navegador para verificar títulos, citas, y estilos.
  • Verifica que las entidades (letras acentuadas) se muestren correctamente.

Recordatorio para evitar problemas

  1. Usa UTF-8: Declara <meta charset="UTF-8"> para caracteres como á.
  2. Ordena los títulos: Usa <h1>, <h2>, etc., en secuencia para accesibilidad.
  3. Evita <br> excesivo: Usa <p> para párrafos en lugar de múltiples <br>.
  4. Añade title en <abbr>: Mejora la accesibilidad (lectores de pantalla).
  5. Prueba siempre en varios navegadores: Verifica en Chrome, Firefox, o Safari.

Recapitulación

En este tema hemos cubierto mucho terreno y aprendido a:

  • Crear títulos con <h1> a <h6> y párrafos con <p>.
  • Usar <br> para saltos de línea y <hr> para líneas horizontales.
  • Resaltar texto con <strong>, <em>, y estilizar con <span>.
  • Citar con <blockquote>, <cite>, y definir términos con <dfn>.
  • Indicar abreviaturas con <abbr> y direcciones con <address>.

En el próximo tema, abordaremos los problemas que genera mostrar texto en distintas alfabetizaciones y como solucionarlos.

TOP