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!
