Estructura del cuerpo de un documento html

26 de noviembre de 2024 OscarCG

El código que va entre las etiquetas <body> generará la parte visible del documento.

Desde los inicios html se organizo en primer lugar con tablas (<table>), en su día fue una revolución, ya que permitían acomodar todo tipo de datos, texto, imagenes. El elemento <div> entro en escena pero durante un tiempo fue valido, aunque tenia el incoveniente ya que no proporcionaba información de su contenido, simplemente era una division en el cuerpo.

HTML5 incorporo nuevos elementos que identifican cada sección del documento y organiza el cuerpo.En HTML5 las secciónes mas importantes son diferenciadas y la estructurar principal ya no depende más de los elementos <div> o <table>.

Normalmente un documente html esta dividida en varias secciónes o áreas visuales para mejorar la experiencia del usuario y facilitar la interactividad.

Organización

Como diseñadores podemos organizar la estructura de la web como ustedes deseen, aqui les presento una serie de estructuras básicas de html.

Vamos a ver las principales etiquetas para estructurar un documento html

<header>

Representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, logo, cuadro de búsqueda , subtitulo etc.

<nav>

Representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes son menús, tablas de contenido o índices.

<main>

Representa el contenido principal del <body> de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda

<aside>

Representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosarios, elementos relacionados indirectamente, como publicidad, la biografía del autor o en aplicaciones web, la información del perfil o enlaces a blog relacionados

<section>

Representa una sección genérica independiente de un documento, que no tiene un elemento semántico mas especifico para representarla. La secciones siempre deben tener un título.

Aqui tenemos una estructura basica de html sin css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estructura del cuerpo de un documento html</title>
</head>
<body>
  <header>header</header>
  <nav>nav</nav>
  <main>main</main>
  <aside>aside</main>
  <footer>footer</footer>
</body>
</html>

Que se vera asi

Para que esto se convierta en algo mas parecido a una página web debemos añadir css .

Por el momento nos quedamos aqui, mas adelante veremos Css , seguimos……..

https://developer.mozilla.org/es/docs/Web/HTML
mozilla.org