CSS Website Layout

HTML5 Semantic Layout Elements

HTML5 introduced several semantic elements that define the different parts of a web page. Using these helps with SEO and accessibility.

• <header> - Defines a header for a document or section.
• <nav> - Defines a set of navigation links.
• <section> - Defines a section in a document.
• <article> - Defines an independent, self-contained article.
• <aside> - Defines content aside from the content (like a sidebar).
• <footer> - Defines a footer for a document or section.

Modern Layout Techniques

While older layouts used floats and tables, modern CSS provides much more powerful and flexible tools: CSS Flexbox and CSS Grid.

.container { display: flex; }

nav { width: 20%; }

main { flex-grow: 1; }

aside { width: 20%; }

This simple example creates a three-column layout where the main content area grows to fill the available space, while the navigation and sidebar have fixed widths. Flexbox and Grid offer robust solutions for almost any layout challenge.