La maquetación es un aspecto muy importante en el diseño web, ya que por medio de esta le damos una organización adecuada a los elementos que contiene la página, de esta manera le damos un mejor aspecto a esta.

Para maquetar adecuadamente una página se debe tener en cuenta algunos aspectos y propiedades de los elementos HTML, así como también necesitaremos incluir un poco de estilos CSS

Antes de empezar a maquetar o a distribuir nuestra página web debemos imaginarnos como queremos que esta se vea, o que secciones queremos que contenga, es decir, podemos imaginarnos una sección donde irá una cabecera con la imagen de la organización, una sección para el menú, una sección para el contenido general etc. Luego que hemos establecido esto debemos plasmarlo en un diagrama con las medidas de cada sección. A continuación, veamos un ejemplo de una maquetación simple:

Cada uno de los recuadros vamos a llamarlo contenedor y se le a asociar un nombre acorde a lo que va a presentar, así:

• Contenedor 1: Logo con un ancho de 800 px (pixeles) y un alto de 200 px.
• Contenedor 2: Menú con un ancho de 200px y alto de 400px
• Contenedor 4: Contenido con un ancho de 600px y un alto de 400px

Una pantalla de las antiguas (monitor CRT) tiene una resolución a lo ancho de 800px y a lo alto de 600 px (por ello se toman esos valores de referencia), pensando en ello, se dimensionan los ancho de una página a monitores de este tipo.

la suma de los contenedores contiguos a lo ancho siempre tendrá que dar 800px independientes de su cantidad y a lo alto deberá dar 600px.