Los layouts HTML son la estructura básica de una página web, que define la disposición de los elementos en la pantalla. Permiten organizar el contenido en secciones lógicas y crear diseños atractivos y funcionales.
Elementos básicos para layouts HTML:
1. <div> (División):
- Es el elemento más básico para crear layouts.
- Se utiliza para agrupar elementos y crear secciones en la página.
- Ejemplo: <div id=”cabecera”>…</div>
- Uso: se utiliza para crear contenedores para diferentes secciones de la página, como la cabecera, el contenido principal y el pie de página.
2. <header> (Cabecera):
- Representa la cabecera de una sección o de la página.
- Suele contener el título del sitio, el logotipo y la navegación principal.
- Ejemplo: <header><h1>Mi Sitio Web</h1></header>
- Uso: se utiliza para definir la cabecera de la página o de una sección específica.
3. <nav> (Navegación):
- Representa la sección de navegación de la página.
- Suele contener enlaces a otras páginas del sitio.
- Ejemplo: <nav><ul><li><a href=”#”>Inicio</a></li></ul></nav>
- Uso: se utiliza para definir la navegación principal del sitio.
4. <main> (Contenido principal):
- Representa el contenido principal de la página.
- Debe contener el contenido único y relevante de la página.
- Ejemplo: <main><article>…</article></main>
- Uso: se utiliza para definir el contenido principal de la página.
5. <article> (Artículo):
- Representa un contenido independiente y autocontenido, como un artículo de blog o una noticia.
- Ejemplo: <article><h2>Título del Artículo</h2><p>…</p></article>
- Uso: se utiliza para definir contenido independiente y autocontenido.
6. <section> (Sección):
- Representa una sección temática de la página.
- Se utiliza para agrupar contenido relacionado dentro de la página.
- Ejemplo: <section><h2>Nuestros Servicios</h2><p>…</p></section>
- Uso: se utiliza para agrupar contenido relacionado dentro de la página.
7. <aside> (Contenido secundario):
- Representa contenido secundario o complementario, como una barra lateral o un bloque de anuncios.
- Ejemplo: <aside><h3>Anuncios</h3><p>…</p></aside>
- Uso: se utiliza para definir contenido secundario o complementario.
8. <footer> (Pie de página):
- Representa el pie de página de una sección o de la página.
- Suele contener información de contacto, enlaces a políticas de privacidad y derechos de autor.
- Ejemplo: <footer><p>© 2023 Mi Sitio Web</p></footer>
- Uso: se utiliza para definir el pie de página de la página o de una sección específica.