El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como desees, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y _utilizar el elemento adecuado para cada tipo de sección_.

La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?

En tu código HTML puedes crear secciones de contenido basadas en su funcionalidad — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente.

HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:

• encabezado: <header>.
• menú de navegación : <nav>.
• contenido principal: <main>, con varias subsecciones (además de la barra lateral) representadas por los elementos <article>, <section>, y <div>.
• barra lateral: <aside>; a menudo colocada dentro de <main>.
• pie de página: <footer>.