Section Element

The Section element defines the high-level semantic areas of your page, acting as the primary vertical container for all other content.

Live Preview

Section Preview

Specifications

Sections are specialized containers for page-level structural blocks:

  • Semantic Choice: Set the Section Type to main, footer, nav, aside, or article for better SEO and accessibility.
  • Anchor Support: Assign a unique ID to the section to enable direct scrolling interactions from other elements.
  • Structural Layout: Typically serves as a parent to multiple containers that manage internal padding and alignment.
  • Full-Width Styling: Commonly used with background images, gradients, or custom borders that span the entire screen width.
  • Semantic Hierarchy: Facilitates building a clean HTML document structure that can be easily parsed by AI and search engines.

AI Guidance

How to prompt for Sections:

  • Add a hero section with a dark background and white text.
  • Create a footer section with two columns for service links.
  • Insert a main section using the brand's secondary font style.