HTML Layout Elements and Techniques

HTML Layout Elements

HTML comprises various semantic elements delineating distinct sections of a webpage.

• <header> – Specifies a document or section’s header
• <nav> – Indicates a set of navigation links
• <section> – Identifies a segment within a document
• <article> – Describes independent, self-contained content
• <aside> – Represents content distinct from the primary content (e.g., a sidebar)
• <footer> – Designates a document or section’s footer
• <details> – Specifies additional details that users can expand or collapse as needed
• <summary> – Defines a heading for the <details> element

For further details on semantic elements, refer to our HTML Semantics chapter.

HTML Layout Techniques

Four distinct methods exist for crafting multicolumn layouts, each presenting its own advantages and disadvantages.

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Float Layout

Utilizing the CSS float property for entire web layouts is a common practice. Float is straightforward to grasp, requiring only an understanding of how the float and clear properties function. However, there are drawbacks: floating elements are intricately linked to the document flow, potentially compromising flexibility. Further insights into float can be found in our CSS Float and Clear chapter.

Example

CSS Flexbox Layout

Employing flexbox guarantees consistent behavior of elements when adapting the page layout to varying screen sizes and display devices.

Example

CSS Grid Layout

The CSS Grid Layout Module provides a grid-centric layout system featuring rows and columns, simplifying webpage design without necessitating the use of floats and positioning.

Example