HTML Layout

HTML Layout Elements

Using semantic layout elements makes your code easier to read and understand for both developers and search engines.

<header>
  <h1>Website Title</h1>
  <nav>...</nav>
</header>
<section>
  <article>...</article>
</section>
<aside>...</aside>
<footer>...</footer>

• <header> - Defines a header for a document or section.
• <nav> - Defines a set of navigation links.
• <section> - Defines a thematic grouping of content.
• <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.
• <main> - Specifies the main content of a document.

Modern Layout Techniques

For creating multi-column layouts, modern CSS techniques are preferred over older methods like tables or floats.

• CSS Flexbox: A one-dimensional layout method perfect for arranging items in rows or columns and distributing space.
• CSS Grid: A powerful two-dimensional layout system for creating complex grid-based layouts with rows and columns.

For modern web design, Flexbox and Grid are the recommended techniques for creating page layouts.