Page structure

A well-structured page communicates meaning to browsers, search engines, and assistive technologies.

HTML tags describe what content means, not just how it looks. When you use header for the top, nav for navigation, main for core content, and footer for the bottom, you create pages that make sense even without visual styling. This semantic structure is the foundation of accessibility and SEO.

Two key principles:

1. Use the right tag for the job. Each section of your page has a purpose — mark that purpose with the appropriate HTML tag.
2. Heading hierarchy matters. Structure headings logically: one h1 per page, then h2 for major sections, h3 for subsections, etc.

Typical page structure

Most websites follow this pattern:

header
  nav (primary menu)
main
  section (e.g., hero)
  section (e.g., features)
  section (e.g., testimonial)
footer
  nav (secondary links)

This is flexible — adapt to your content. A simple landing page might have just main and footer. A multi-section page might nest sections inside articles. The point is to use semantic tags intentionally.

Semantic container tags

Change any container's tag using the Tag Name dropdown in the Element settings (gear icon). Here's when to use each semantic tag.

Header

Header is introductory content, typically at the top of a page or section.

Page-level header: Contains the site logo, site title, tagline, and primary navigation. Usually appears on every page.

header
  img (logo)
  h1 (site title)
  nav

Section-level header: Inside a section or article to introduce it.

section
  header
    h2 (section title)
    p (description)
  (section content)

You can have multiple headers on a page — one for the page, one per section, one per article. Use as many as make sense for your structure.

Nav

Nav groups navigation links.

When to use: Major navigation blocks — main menu, breadcrumbs, table of contents, secondary navigation.

When not to use: A single link or a small group of sidebar links that aren't major navigation.

Pattern: Wrap links in a list for accessibility.

nav
  ul
    li
      a (home link)
    li
      a (about link)
    li
      a (contact link)

Screen readers announce "list of 3 items," helping visitors understand the structure.

Main

Main marks the dominant content — content unique to this page, not repeated across the site.

Rules: - Use only once per page - Must not be nested inside header, footer, nav, or aside — it's a top-level landmark - Wrap all page-specific content inside it

header (shared)
nav (shared)
main (page-specific)
  section
  section
  article
footer (shared)

Section

Section groups thematically related content.

Rules: - Should have a heading as the first or early child - Without a heading, use div instead — a heading less section defeats its purpose

Examples: - Features section on a homepage - Testimonials section - Pricing plans - Blog posts grouped by category

section
  h2 (section title)
  (section content)

Article

Article marks self-contained content that could stand alone.

Examples: - Blog post - News story - Product card - Forum post - Comment

article
  header
    h2 (article title)
    time (publication date)
  (article content)
  footer
    p (author bio)

Articles can be nested inside section. A blog page might be:

main
  section
    h1 (all blog posts)
    article (post 1)
    article (post 2)
    article (post 3)

Footer

Footer marks footer content.

Page-level footer: At the very bottom, contains copyright, contact info, secondary navigation, social links.

footer
  p (copyright)
  nav (secondary links)
  p (contact info)

Section-level footer: Inside a section or article to mark its conclusion.

article
  (article content)
  footer
    p (author)
    time (updated date)

You can have multiple footers — one for the page, one per section or article.

Aside

Aside marks tangentially related content: sidebars, callouts, pull quotes, related links.

main
  article (main content)
aside
  h3 (sidebar title)
  (related links, ads, callouts)

Heading hierarchy

Headings structure content. Use them logically:

• One h1 per page — the page's main topic
• h2 for major sections — direct children of main content
• h3 for subsections — inside h2 sections
• h4, h5, h6 — as needed for deeper nesting

Don't skip levels: h1 → h2 → h3 is correct. h1 → h3 (skipping h2) confuses screen readers.

Example:

h1 (page title: "Product Reviews")
  h2 (section: "Laptops")
    h3 (subsection: "Budget laptops")
    h3 (subsection: "Premium laptops")
  h2 (section: "Tablets")
    h3 (subsection: "iPads")
    h3 (subsection: "Android tablets")

To change a text element's heading level:

1. Select the text
2. Open the Tag Name dropdown in Element settings (gear icon)
3. Choose from the Headings group

Symbols for consistent headers/footers

If your header or footer is identical on every page, use a Symbol.

1. Create the header/footer structure on one page (logo, nav, etc.)
2. Select the container
3. Right-click and choose Create Symbol
4. The symbol appears on all pages automatically
5. Edit the symbol once, all pages update

See Symbols for details.

Practical example: blog post page structure

You're building a page to display a single blog post.

header (site-wide)
  nav (main menu)

main
  article
    header
      h1 (post title)
      p (publication date, author)
    (post content)
    footer
      p (author bio)

footer (site-wide)
  nav (secondary links)

In Silex:

1. Create the page-level header and footer as before (possibly using Symbols)
2. Add a Div inside main, change its tag to article
3. Add a Div inside article, change to header
4. Inside the header: h1 for title, p for date/author
5. Add content divs, text, images
6. Add a Div at the bottom of article, change to footer
7. Inside the footer: p with author bio

Practical example: homepage with sections

A homepage has a hero, features, testimonials, and CTA.

header
  nav

main
  section (hero)
    h2 (tagline)
    p (description)
    a (CTA button)
  section (features)
    h2 (section title)
    article (feature 1: icon + text)
    article (feature 2: icon + text)
    article (feature 3: icon + text)
  section (testimonials)
    h2 (section title)
    blockquote (testimonial 1)
    blockquote (testimonial 2)

footer

Common mistakes

• No h1 on the page. Every page needs one. It's the page's main topic.
• Skipping heading levels. h1 → h3 (skipping h2) confuses screen readers. Go in order: h1 → h2 → h3.
• Using headings for styling, not structure. If text looks like a heading but isn't, use p and style it, don't use h2.
• Multiple main elements. There's only one per page. Use section or article for additional content groupings.
• Section without a heading. If you're not adding a heading, use div instead.
• Forgetting to use semantic tags. Styling with CSS makes divs look like headers and footers, but only semantic tags communicate structure to browsers and assistive technologies.

Learn more

• MDN: HTML structural elements — semantic HTML overview
• MDN: header — detailed header reference
• MDN: nav — navigation reference
• MDN: main — main content reference
• MDN: section — section reference
• MDN: article — article reference
• Accessibility enhancements — on the roadmap
• Elements — all available HTML elements
• Symbols — shared header/footer across pages

---

Advanced: how the Tag Name selector works

The semantic plugin adds a "Tag name" trait to every component type in the editor. The trait renders a grouped dropdown with the following categories:

Group	Tags
Containers	DIV, SPAN, P
Headings	H1, H2, H3, H4, H5, H6
Main document structure	MAIN, SECTION, ARTICLE, NAV, ASIDE, HEADER, FOOTER
Content grouping	ADDRESS, BLOCKQUOTE, PRE
Lists	UL, OL, LI
Interactive/form	BUTTON, LABEL, DETAILS, SUMMARY

If the current element uses a tag not in any group, it appears in an "Other" category. Changing the tag updates the component's tagName property. The change is immediate -- the element re-renders on the canvas with its new tag.

When you select LABEL, a "For" field appears. Enter the ID of the form input this label describes. This generates the for attribute in the HTML, linking the label to the input for accessibility.

Reference: landmark roles created by semantic tags

HTML Tag	ARIA Landmark Role	Purpose
header (page-level)	banner	Site-wide header
nav	navigation	Navigation links
main	main	Primary content
aside	complementary	Supporting content
footer (page-level)	contentinfo	Site-wide footer
section (with heading)	region	Thematic content group
article	article	Self-contained content
form (with name)	form	Form landmark

Screen readers announce these landmarks and let users jump between them. The more accurately you use semantic tags, the better the experience for assistive technology users.

---

Quiz

Q1: You built a page with div for header, div for content, div for footer. A screen reader user can't find main content. What do you fix?

• A) Add more divs
• B) Change divs to semantic tags: header, main, section, footer
• C) Add more text labels

Answer

B) Change divs to semantic tags: header, main, section, footer — screen readers announce landmarks and let users jump directly to main.

Q2: Your page has h1, then three sections starting with h3 (no h2). Is this correct?

• A) Yes, it's fine
• B) No, you skipped h2 — should be h1 → h2 → h3
• C) No, there should be no h3

Answer

B) No, you skipped h2 — should be h1 → h2 → h3 — skipping heading levels breaks the outline for screen readers.

Q3: You want a "Related Posts" sidebar next to a blog post. Should it be section or aside?

• A) section
• B) aside
• C) div

Answer

B) aside — related posts are tangentially related to main content, not a primary section. aside communicates this to browsers and screen readers.

Q4: Same header on five pages. You edit it on the homepage, but other four pages don't update. What should you have done?

• A) Copy-paste to all pages
• B) Create a Symbol and place it on each page
• C) Use CSS to share styles

Answer

B) Create a Symbol and place it on each page — symbols are shared components. Editing one updates all instances.

Q5: You want a FAQ where questions are clickable to reveal answers. Which tags?

• A) article for each question
• B) details for each item, summary for question text
• C) Just styled paragraphs

Answer

B) details for each item, summary for question text — details/summary creates collapsible content with no JavaScript needed.