Por si no lo sabías, el documento HTML es la base sobre la que se construyen todos los sitios web, no importa que tan simple sea el sitio web o qué tan avanzado parezca, todos lo tienen.
Hoy quiero enseñarte qué es un documento HTML y cómo se estructura paso a paso para que logres que funcione correctamente.
¿Qué es un documento HTML?
Un documento HTML es simplemente un archivo con código HTML que define cómo está organizada una página web. Recuerda que HTML (HyperText Markup Language) es un lenguaje que usa etiquetas para estructurar el contenido, permitiéndote agregar títulos, párrafos, imágenes, enlaces y más. Como te deciá, básicamente es la base de cualquier sitio web.
Absolutamente todas las páginas web que ves en Internet están basada en un archivo HTML. Sin él, los navegadores no sabrían cómo mostrar el contenido. Haz de cuenta que es el esqueleto que sostiene cualquier sitio web.
¿Cómo se estructura un documento HTML paso a paso?
Te voy a mostrar que todo documento HTML sigue una estructura básica para que los navegadores interpreten correctamente su contenido. Vamos a desglosarlo paso a paso.
Declaración del tipo de documento (DOCTYPE)
Lo primero que vas a incluir en un documento HTML es la declaración DOCTYPE, que le indica al navegador qué versión de HTML se está utilizando. En HTML5, esta declaración es así:
<!DOCTYPE html>
Este pequeño fragmento de código le dice al navegador que estamos utilizando HTML5, la versión más moderna y estándar.
Elemento <html>: La raíz del documento
Jamás olvides que todo el contenido de una página web está contenido dentro de la etiqueta <html>. Esta etiqueta es el elemento raíz del documento HTML y debe envolver todos los demás elementos.
<html>
<!-- Contenido del documento HTML -->
</html>
La cabecera del documento (<head>)
Ahora, dentro del elemento <html>, el primer bloque importante es la cabecera, definida por la etiqueta <head>. Aquí es donde van incluidos los metadatos y los recursos esenciales para que el documento HTML funcione como debe.
<head>
<!-- Elementos de la cabecera -->
</head>
Elementos importantes dentro del <head>:
- Título de la página (<title>)
Define el título de la página que aparece en la pestaña del navegador.
<title>Mi primera página HTML</title>- Metaetiquetas (<meta>)
Son etiquetas que proporcionan información sobre el documento, como la codificación de caracteres, la descripción y las palabras clave.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Una introducción a la estructura de un documento HTML.">- Enlaces a hojas de estilo (<link>)
Permiten conectar el documento HTML con archivos CSS para mejorar el diseño.
<link rel="stylesheet" href="styles.css">- Scripts (<script>)
Se utilizan para incluir archivos JavaScript que añaden funcionalidad a la página.
<script src="script.js"></script>Ten presente que todo lo que está dentro del <head> no se muestra en la página directamente, pero lo necesitamos para su configuración y optimización.
El cuerpo del documento (<body>)
Después del <head>, encontramos el cuerpo del documento, definido por la etiqueta <body>. Aquí debe ir el contenido visible de la página web.
<body>
<!-- Contenido de la página -->
</body>
Dentro del <body>, podemos incluir elementos como:
- Encabezados (<h1> – <h6>)
Úsalos para estructurar los títulos y subtítulos dentro de tu página.
<h1>Bienvenido a mi página</h1>
<h2>Subtítulo importante</h2>- Párrafos (<p>)
Para insertar texto en la página.
<p>Este es un párrafo de ejemplo en HTML.</p>- Imágenes (<img>)
Te sirve para mostrar imágenes dentro del documento.
<img src="imagen.jpg" alt="Descripción de la imagen">- Enlaces (<a>)
Te dejan enlazar a otras páginas web.
<a href="https://keepcoding.io">Visita KeepCoding</a>- Listas (<ul> y <ol>)
Es para organizar información en forma de listas.
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>Así te queda la estructura completa de un documento HTML
Ya vimos cada parte por separado, entonces te dejo la estructura básica completa de un documento HTML funcional, para que el ejemplo te quede más claro:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hola, mundo</h1>
<p>Bienvenido a mi primera página HTML.</p>
</body>
</html>
Recuerda muy bien que un documento HTML es el cimiento de cualquier página web. Tienes que saber estructurarlo si de verdad quieres desarrollar sitios bien organizados y optimizados. Con esta guía que te hice paso a paso creo que ya entiendes cómo funciona cada elemento y cómo combinarlos para crear páginas funcionales y atractivas.
Puedes ser un experto en desarrollo web y aprender a crear sitios profesionales desde cero en el Bootcamp de Desarrollo Web de KeepCoding. No solo dominarás HTML, sino también CSS, JavaScript y las tecnologías más demandadas del mercado. ¡Apúntate y transforma tu futuro en la industria IT!
