{"id":796,"date":"2025-10-23T09:57:39","date_gmt":"2025-10-23T07:57:39","guid":{"rendered":"https:\/\/vermiip.es\/blog\/?p=796"},"modified":"2025-10-23T09:57:40","modified_gmt":"2025-10-23T07:57:40","slug":"curso-de-html5-y-css3-cuerpo-html-como-estructurar-el-contenido","status":"publish","type":"post","link":"https:\/\/vermiip.es\/blog\/curso-de-html5-y-css3-cuerpo-html-como-estructurar-el-contenido\/","title":{"rendered":"Curso de HTML5 y CSS3: Cuerpo HTML. C\u00f3mo estructurar el contenido"},"content":{"rendered":"

Estructura b\u00e1sica del cuerpo HTML<\/h3>\n

El elemento principal dentro de un documento HTML es, sin duda, el <body><\/strong>. Aqu\u00ed es donde se incluye el contenido visible de la p\u00e1gina. Sin este elemento, el navegador no podr\u00eda renderizar ninguna informaci\u00f3n al usuario.<\/p>\n

<body>\n    <header>\n        <h1>T\u00edtulo de la P\u00e1gina<\/h1>\n        <nav><\/nav>\n    <\/header>\n    <main><\/main>\n    <footer><\/footer>\n<\/body><\/code><\/pre>\n
Uso de etiquetas sem\u00e1nticas<\/h3>\n
El uso de etiquetas sem\u00e1nticas es fundamental para mejorar la accesibilidad y el SEO de un sitio web. Empecemos analizando las principales etiquetas que podemos utilizar dentro del <body><\/strong>.<\/p>\n
<header><\/h4>\n
La etiqueta <header><\/strong> se suele utilizar para contener la informaci\u00f3n introductoria de la p\u00e1gina, como el t\u00edtulo principal y la navegaci\u00f3n.<\/p>\n
<header>\n    <h1>Bienvenidos a Mi Sitio Web<\/h1>\n    <nav>\n        <ul>\n            <li><a href=\"#section1\">Secci\u00f3n 1<\/a><\/li>\n            <li><a href=\"#section2\">Secci\u00f3n 2<\/a><\/li>\n        <\/ul>\n    <\/nav>\n<\/header><\/code><\/pre>\n
<main><\/h4>\n
Dentro del <body><\/strong>, es recomendable utilizar la etiqueta <main><\/strong> para delimitar el contenido principal de la p\u00e1gina, lo que ayuda a los motores de b\u00fasqueda a identificar la informaci\u00f3n m\u00e1s relevante.<\/p>\n
<main>\n    <section id=\"section1\">\n        <h2>Secci\u00f3n 1<\/h2>\n        <p>Contenido de la secci\u00f3n 1.<\/p>\n    <\/section>\n    <section id=\"section2\">\n        <h2>Secci\u00f3n 2<\/h2>\n        <p>Contenido de la secci\u00f3n 2.<\/p>\n    <\/section>\n<\/main><\/code><\/pre>\n
<footer><\/h4>\n
Finalmente, el <footer><\/strong> se reserva para la informaci\u00f3n adicional o de contacto, como derechos de autor y enlaces importantes.<\/p>\n
<footer>\n    <p>\u00a9 2023 Mi Sitio Web. Todos los derechos reservados.<\/p>\n<\/footer><\/code><\/pre>\n
Conclusi\u00f3n<\/h3>\n
La correcta utilizaci\u00f3n de las etiquetas dentro del <body><\/strong> mejora significativamente la organizaci\u00f3n y la sem\u00e1ntica del contenido. Familiarizarse con estas estructuras no solo optimiza la experiencia del usuario, sino que tambi\u00e9n brinda ventajas en motores de b\u00fasqueda, mejorando la visibilidad de tu sitio web.<\/p>\n
Fuentes y lecturas recomendadas<\/h3>\n