Conceptos básicos del diseño HTML
El diseño en HTML define la estructura de una página web: el marco sobre el cual se organiza el contenido, incluyendo el encabezado, la navegación, el contenido principal y el pie de página.
Estructura de diseño típica
Un diseño básico en HTML suele incluir las secciones <header>, <nav>, <main>, <aside> y <footer>. Estos elementos semánticos proporcionan una estructura clara a la página.
html
<body>
<header>Header content</header>
<nav>Navigation</nav>
<main>Main content area</main>
<aside>Sidebar</aside>
<footer>Footer content</footer>
</body>Por qué importa el HTML semántico
Los elementos semánticos ayudan a los motores de búsqueda y a las herramientas de accesibilidad a comprender mejor la estructura de tu página. Se recomiendan en todos los sitios web modernos.
Diseño con soporte de CSS
A menudo usamos CSS Grid o Flexbox para implementar estructuras de diseño. Estos permiten posicionamiento preciso y disposición adaptable en diferentes tamaños de pantalla.
css
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}Ejemplo de diseño simple
El siguiente ejemplo HTML muestra una estructura de diseño básica, donde el contenido se coloca dentro de un contenedor y se organiza en secciones lógicas.
html
<div class="container">
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>Flexibilidad del diseño
El diseño HTML no está limitado a una estructura específica. Puedes aplicar diseños de cuadrícula, contenido en una o varias filas, o diseños responsivos.
Buenas prácticas
Apunta siempre a un diseño simple y bien estructurado. Usa etiquetas semánticas y confía en CSS para los ajustes de diseño, no en <table> ni en exceso de <div> anidados.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.