Structural Elements

HTML5 introduced semantic elements that define the structure of a web page. These replace generic divs and improve accessibility.

Header Element

The <header> element:

• Contains introductory content
• Can be used for page header or section headers
• Typically contains headings, logo, navigation

Nav Element

The <nav> element:

• Major navigation blocks only
• Not every group of links
• Use aria-label for multiple navs

Main Element

The <main> element:

• Contains the dominant content
• Only ONE per page
• Skip links should target main
• Excludes repeated content (nav, footer)

Aside Element

The <aside> element:

• Content tangentially related
• Sidebars, pull quotes, ads
• Could be removed without affecting main content

Footer Element

The <footer> element:

• Closing content for its nearest ancestor
• Can be page footer or section footer
• Contains copyright, links, author info

Section Element

The <section> element:

• Thematic grouping of content
• Should have a heading
• Generic section of a document

Complete Page Structure

Exercise: Build Page Structure

Create a complete semantic page structure:

Structural elements create a clear, accessible page hierarchy!