Estructura básica del cuerpo HTML
El elemento principal dentro de un documento HTML es, sin duda, el <body>. Aquí es donde se incluye el contenido visible de la página. Sin este elemento, el navegador no podría renderizar ninguna información al usuario.
<body>
<header>
<h1>Título de la Página</h1>
<nav></nav>
</header>
<main></main>
<footer></footer>
</body>Uso de etiquetas semánticas
El uso de etiquetas semánticas es fundamental para mejorar la accesibilidad y el SEO de un sitio web. Empecemos analizando las principales etiquetas que podemos utilizar dentro del <body>.
<header>
La etiqueta <header> se suele utilizar para contener la información introductoria de la página, como el título principal y la navegación.
<header>
<h1>Bienvenidos a Mi Sitio Web</h1>
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
</ul>
</nav>
</header><main>
Dentro del <body>, es recomendable utilizar la etiqueta <main> para delimitar el contenido principal de la página, lo que ayuda a los motores de búsqueda a identificar la información más relevante.
<main>
<section id="section1">
<h2>Sección 1</h2>
<p>Contenido de la sección 1.</p>
</section>
<section id="section2">
<h2>Sección 2</h2>
<p>Contenido de la sección 2.</p>
</section>
</main><footer>
Finalmente, el <footer> se reserva para la información adicional o de contacto, como derechos de autor y enlaces importantes.
<footer>
<p>© 2023 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>Conclusión
La correcta utilización de las etiquetas dentro del <body> mejora significativamente la organización y la semántica del contenido. Familiarizarse con estas estructuras no solo optimiza la experiencia del usuario, sino que también brinda ventajas en motores de búsqueda, mejorando la visibilidad de tu sitio web.
Deja una respuesta