La estructura de un documento HTML se refiere a la organización bajo la cual está construido un documento HTML, utilizando etiquetas y elementos específicos. Dichas etiquetas son considerados como bloques de construcción básicos y le indican al navegador cómo mostrar el contenido de la página web.
<!DOCTYPE html>: esta etiqueta le indica al navegador en que versión de HTML se está trabajando.
<html>: esta es la raíz del documento HTML y contiene todos los demás elementos.
<head>: esta sección contiene información meta sobre la página, cómo el título, la codificación de caracteres y los enlaces a las hojas de estilo. Además, el contenido de esta sección no es visible en la ventana del navegador.
<body>: esta sección contiene todo el contenido visible de la página web como textos, imágenes, videos y formularios.
Encabezados: los cuales utilizan etiquetas de la <h1> a la <h6>.Párrafos: se definen mediante la etiqueta <p>Secciones: definidas por las etiquetas <section> y <article>, y son utilizadas para dividir el contenido de la página en secciones temáticas.Enlazar a otras páginas: esto se realiza mediante la etiqueta <a> y se utiliza para crear hipervínculos a otras páginas web o secciones.Imágenes: la etiqueta <img> se utiliza para insertar imágenes en la página.Listas: son definidas mediante las etiquetas <ul> y <ol> y utilizan para crear listas sin orden y con orden, respectivamente.Tablas: la etiqueta <table> se utiliza para crear tablas.Para finalizar, son muchos los beneficios de utilizar una buena estructura HTML: permite mejor accesibilidad, mayor facilidad de mantenimiento, mejora el posicionamiento SEO, además hace que la experiencia del usuario sea agradable.
En el siguiente ejemplo se muestra la estructura básica de un sitio HTML, formado por secciones semánticas.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Web</title> <link rel="stylesheet" href="style.css"></head><body> <header> <h1>Mi sitio</h1> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header> <main> <section> <h2>Bienvenido</h2> <p>Párrafo de texto.</p> <img src="image.jpg" alt="Descripción de imagen"> </section> <section> <h2>Productos</h2> </section> </main> <footer> <p>© 2024 Mi sitio web</p> </footer></body></html>
Recuerde que es una estructura base y usted puede hacer sus adaptaciones.