Estructura de una página HTML

Estructura básica del documento

Toda página web parte de una estructura mínima con tres bloques principales: la declaración del tipo de documento, la cabecera y el cuerpo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera pagina</title>
</head>
<body>
    <h1>Hola, mundo</h1>
    <p>Esta es mi primera pagina web.</p>
</body>
</html>

<!DOCTYPE html> indica al navegador que se trata de un documento HTML5
<head> contiene metadatos como el título que aparece en la pestaña del navegador
<body> contiene todo el contenido visible de la página

La etiqueta <title> dentro de <head> define el texto que aparece en la pestaña del navegador, no en la página en sí.

Encabezados y párrafos

Los encabezados organizan el contenido en una jerarquía de seis niveles, desde <h1> (el más importante) hasta <h6>. Cada página debería tener un único <h1> como título principal.

<h1>Titulo principal</h1>
<h2>Subtitulo</h2>
<p>Un parrafo de texto con informacion relevante.</p>
<h2>Otro subtitulo</h2>
<p>Otro parrafo con mas contenido.</p>

La etiqueta <p> representa un párrafo de texto. El navegador añade automáticamente un espacio vertical entre párrafos para mejorar la legibilidad.

Enlaces e imágenes

La etiqueta <a> crea un enlace que permite navegar a otra página. El atributo href indica la dirección de destino.

<a href="https://developer.mozilla.org">Documentacion de MDN</a>

La etiqueta <img> muestra una imagen. Es una etiqueta sin cierre que necesita dos atributos: src para la ruta de la imagen y alt para un texto alternativo descriptivo.

<img src="foto.jpg" alt="Descripcion de la imagen">

El atributo alt en las imágenes es importante tanto para la accesibilidad (lectores de pantalla) como para el SEO. Debe describir brevemente lo que muestra la imagen.

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, HTML es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de HTML

Explora más contenido relacionado con HTML y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de HTML Explorar todas las tecnologías

Aprendizajes de esta lección

Conocer las etiquetas HTML fundamentales y la estructura básica de una página web.