Índice

Elementos HTML5 y estilos CSS para el diseño

1. Objetivos

El HTML y las CSS ofrecen todas las soluciones necesarias para crear diseños elaborados. El propósito del presente manual no es estudiar el diseño y la composición Web, por ese motivo estudiaremos un ejemplo simple de composición con un diseño CSS también simple. Usted mismo podrá añadir todas las propiedades CSS que desee para crear un diseño atractivo.

2. Las cajas <div>

Las cajas <div> utilizan el elemento HTML <div> que permite crear un «contenedor no semántico» cuyos ancho y alto es posible determinar con más precisión. Podrá insertar en ese contenedor todo lo que desee: texto, tablas, imágenes, formularios o otras cajas.

3. Los elementos de estructura HTML5

Las cajas <div> permiten crear contenedores no semánticos. Es decir, no sabemos para qué sirven las cajas <div>. Para evitar ese problema, el W3C ha creado elementos de estructura semántica con HTML5.

Estos son los elementos de estructura de que dispone:

  • El elemento <main>: este elemento alberga el contenido principal de la página y puede contener otros elementos de estructura.

  • El elemento <header>: el contenido de este elemento es de tipo encabezado. Los encabezados se usan a dos niveles: encabezados de páginas y encabezados de contenidos.

  • El elemento <footer>: el contenido de este elemento es de tipo pie de página. Tiene los mismos usos que los encabezados. ...