Aprende Inteligencia Artificial y Acelera tu Futuro

Descubre cómo la IA puede multiplicar tu productividad y cambiar tu forma de trabajar.

Acceder al Curso Ahora

Guía Básica de HTML: Encabezados, Listas y Navegación Paso a Paso

Introducción

¿Estás comenzando con HTML y no sabes por dónde empezar? ¡Estás en el lugar adecuado! En este artículo vamos a crear una página web simple desde cero utilizando Visual Studio Code. Aprenderás a estructurar un documento HTML, utilizar encabezados correctamente, trabajar con listas ordenadas y desordenadas, e incluso añadir una barra de navegación básica. ¡Acompáñanos paso a paso y dale vida a tus primeras páginas web!

Creando tu primer archivo HTML en Visual Studio Code

Empezamos creando un nuevo archivo llamado simple.html en Visual Studio Code. Utilizamos la estructura básica de HTML5 que puedes generar fácilmente escribiendo html y seleccionando la sugerencia del editor. Luego cambiamos el idioma del documento al español para mantener todo bien configurado.

El documento HTML está compuesto por diferentes secciones:

  • DOCTYPE: Indica el tipo de documento.
  • html: Define el idioma del contenido.
  • head: Aquí van los metadatos.
  • body: Todo el contenido visible para el usuario.

Encabezados en HTML: cómo y cuándo usarlos

Insertamos un encabezado principal con la etiqueta <h1>. Es muy importante recordar que solo debe haber un único H1 por página, ya que los motores de búsqueda pueden penalizar el uso excesivo.

Ejemplo:

<h1>¿Qué hemos aprendido hoy?</h1>

A continuación, usamos <h2> para secciones secundarias:

<h2>Conceptos básicos de Internet</h2>

Listas ordenadas: estructura con sentido

Las listas ordenadas (<ol>) son perfectas para mostrar elementos en un orden específico. Cada ítem se introduce con <li>:

<ol>
  <li>HTTP</li>
  <li>Dirección IP</li>
  <li>Servidores</li>
</ol>

Listas desordenadas: organiza sin jerarquías numéricas

También usamos listas desordenadas (<ul>), útiles para agrupar elementos sin necesidad de ordenarlos:

<ul>
  <li><strong>HTML</strong> - Hyper Text Markup Language</li>
  <li>Tenemos muchas etiquetas</li>
  <ul>
    <li>Boilerplate</li>
  </ul>
</ul>

Aquí vimos cómo anidar listas dentro de otras listas, algo totalmente válido en HTML.

Boilerplate y estructura completa de una página HTML

Cuando insertamos la estructura básica (boilerplate) con HTML5, se generan automáticamente los principales elementos:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Simple Web</title>
</head>
<body>
  <!-- Contenido -->
</body>
</html>

Y dentro del <body>, los elementos más comunes son:

  • Encabezados (<h1> a <h6>)
  • Párrafos (<p>)
  • Énfasis (<em>) que se ve en itálica
  • Resaltado (<strong>) que se muestra en negrita

Anidación de listas y buenas prácticas

Aprendimos a manejar correctamente la indentación y el cierre de etiquetas al trabajar con listas anidadas. Esto es fundamental para evitar errores de visualización y mantener el código limpio y legible.

Creando una barra de navegación básica

Para mejorar la navegación entre páginas, implementamos una barra de navegación dentro de la etiqueta <header> usando <nav>:

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/simple.html">Web Simple</a></li>
    </ul>
  </nav>
</header>

Esto nos permite movernos entre el índice principal y otras páginas HTML. Más adelante, con lenguajes como PHP o Python, podremos crear cabeceras reutilizables, pero por ahora las insertamos manualmente en cada página.

Conclusión

Y hasta aquí llega esta práctica guiada de HTML. Hemos aprendido a:

  • Crear la estructura básica de una página HTML.
  • Utilizar encabezados correctamente para el SEO.
  • Trabajar con listas ordenadas y desordenadas.
  • Implementar una navegación sencilla entre páginas.

Si te ha resultado útil, no olvides dejar un «me gusta», suscribirte al canal y activar la campanita para no perderte los próximos tutoriales. ¡Nos vemos en el siguiente vídeo!

Tutoriales Más Vistos

Posts Más Vistos