La estructura básica de un documento HTML5 es esencial para crear páginas web organizadas, accesibles y funcionales.
En primer lugar, es importante entender que HTML5 define un conjunto de reglas que estructuran el contenido de una página, y conocer cómo implementar estas reglas de manera correcta te permitirá desarrollar sitios web eficientes y bien optimizados.
Tipo de documento
Para comenzar, todo archivo HTML5 comienza con la declaración del tipo de documento (DOCTYPE), que indica al navegador qué versión de HTML se está utilizando. En el caso de HTML5, la declaración es simple y se ve así:
<!DOCTYPE html>
A continuación, el contenido HTML está contenido dentro de la etiqueta <html>, que es el elemento raíz del documento. Dentro de esta etiqueta, se encuentran dos secciones principales: el <head> y el <body>. Cada una de estas secciones tiene un propósito específico y es clave entender su función.
Head
El <head> contiene metadatos sobre el documento, que son datos que no se muestran directamente en la página pero que son esenciales para el correcto funcionamiento del sitio. En esta sección se incluyen elementos como el título de la página <title>, los enlaces a archivos CSS para la estilización y los scripts de JavaScript.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
<link rel="stylesheet" href="estilos.css">
</head>
<meta charset="UTF-8">: Define la codificación de caracteres del documento como UTF-8, que soporta caracteres especiales, incluidos los acentos, diéresis, virgulilla de la ñ y caracteres especiales propios de cada idioma.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ajusta el diseño de la página para que sea responsive, es decir, se adapte correctamente al tamaño de pantalla del dispositivo (móvil, tablet, escritorio). Establece el ancho del área visible a la anchura del dispositivo y la escala inicial a 1.<title>Mi Página Web</title>: Define el título de la página, que se muestra en la pestaña del navegador o en los resultados de búsqueda.<link rel="stylesheet" href="estilos.css">: Vincula un archivo externo de hojas de estilo CSS (en este caso,estilos.css), que se utiliza para aplicar el formato y diseño visual al contenido HTML de la página.
Body
En el <body> es la parte visible de la página web, donde se coloca todo el contenido que los usuarios ven y con el que interactúan. Esta sección puede incluir texto, imágenes, videos, formularios y más. Dentro de <body>, es común estructurar el contenido usando etiquetas semánticas como <header>, <nav>, <section>, <article>, <footer>.
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre nosotros</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Introducción a HTML5</h2>
<p>HTML5 es la última versión del lenguaje para la creación de páginas web.</p>
</article>
</section>
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
</body>
En resumen, la estructura básica de HTML5 está compuesta por elementos clave que organizan tanto los metadatos como el contenido visual de la página. Al usar correctamente estas etiquetas, los desarrolladores pueden crear sitios web claros, accesibles y bien estructurados, lo cual es fundamental para una buena experiencia de usuario.
En conclusión, comprender esta estructura es el primer paso para diseñar páginas web eficientes y adaptadas a las necesidades de los usuarios.