En los últimos posts, vimos un par de etiquetas en HTML que no eran muy conocidas (la etiqueta BDI y la etiqueta BDO), por no decir que no las conocía ni el tato.
Pero en esta lección, veremos todo lo contrario. Vamos a hablar sobre la etiqueta Body, una etiqueta que se utiliza prácticamente en todos los documentos en HTML y que muy probablemente ya hayas utilizado.
Aquí veremos para qué sirve exactamente la etiqueta Body y también verás cómo se debe utilizar a través de un ejemplo.
Y por si fuera poco, al final del post, voy a dar una serie de recomendaciones que has de tener en cuenta a la hora de utilizar esta etiqueta.
Antes de nada, recordarte que esta lección forma parte del Diccionario HTML, donde vemos cada una de las etiquetas de este lenguaje.
Como esto lleva un curro que flipas, agradezco mucho que le des un like al vídeo y te suscribas al canal de Youtube (si no lo estás ya).
¡Y ahora vamos al lío!
¿Qué es la etiqueta Body?
Esta etiqueta es fundamental en HTML y se utiliza para definir el contenido principal de un documento en HTML.
Dentro de esta etiqueta vamos a colocar todo lo que queremos que se muestre en nuestra página, es decir, vamos a colocar todo el contenido visible.
Se podría decir que esta etiqueta forma parte de la estructura principal de un documento en HTML.
Ejemplo sobre cómo usar la etiqueta body
Vamos a ver un ejemplo en el editor (VSCode)para que veas a lo que me refiero.
Si os fijáis, aquí tenemos un Index.html y dentro del propio Index tenemos la estructura básica de HTML.
<!DOCTYPE html>
<html>
<head>
<!-- Aquí irían otros elementos como el título, estilos, scripts, etc. -->
</head>
<body>
<h1>Título de la página</h1>
<main>
<!-- Contenido principal de la página -->
</main>
<footer>
<!-- Aquí iría el contenido del pie de página -->
</footer>
</body>
</html>
¿Cómo se compone la estructura básica?
Pues muy fácil, tenemos el doctype por un lado y luego tenemos la etiqueta Head y luego siempre deberemos tener la etiqueta Body.
Si os fijáis, dentro de la etiqueta Body vamos a poner todo el contenido principal, lo que hemos dicho antes, todo el contenido que queremos que se vea en la página web.
En este caso, tenemos un h1 que sería el título y luego tenemos un Main.
Bueno, esto realmente lo ideal sería poner una etiqueta Main y de la etiqueta Main el contenido principal. Perfecto, y luego podríamos poner el footer, pero ojo, el footer iría dentro de la etiqueta Body. Ojo, porque un error muy común es colocar el footer así.
Y realmente tiene que ir dentro de la etiqueta Body.
Recuerda que toda la información que no pongas en el body no se va a ver en el navegador. ¡Así que mucho cuidado con esto!
Y bueno, como has visto, esta etiqueta no tiene más misterio, pero es importante tener clara su función y, sobre todo, ten cuidado con su cierre, que a veces lo colocamos donde no debemos.
Espero que te haya sido útil esta lección del diccionario HTML y ya sabes que si tienes alguna pregunta o tienes alguna sugerencia puedes dejarla en los comentarios.
¡Nos vemos en la próxima lección! Adiós.