Keep Sections Ordered - Webflow

Keep Sections Ordered in Webflow

1. Open your Webflow project and navigate to the page where you want to verify the structural order of sections.
2. Open the Navigator panel (press F or click the layers icon) to view the page’s full element hierarchy.
3. Locate all top-level Section elements. These should appear as siblings in the Navigator and not be nested inside other sections, containers, or div blocks.
4. Drag any misplaced sections so they appear in the correct top-to-bottom order that matches the intended reading flow. Ensure:
   • The header or hero section sits at the top,
   • Main content sections follow in logical sequence,
   • Footer is placed at the bottom of the hierarchy.
5. Select each Section and confirm its Semantic Tag by opening the Element Settings panel (press D):
   • Use <header> for top-level page headers only.
   • Use <section> for major page content areas.
   • Use <main> once, wrapping the page’s primary content (optional but recommended).
   • Use <footer> for the footer section.
6. If a section contains multiple logical content blocks, add Div Blocks or Container elements inside it instead of creating nested sections.
7. Review heading structure within each section:
   • Top-level section titles use H2,
   • Subsection headings use H3–H4,
   • Avoid introducing multiple H1s; keep your single H1 outside or at the top of the sections.
8. Preview the page and scroll from top to bottom to ensure content appears in a natural, predictable sequence without unexpected jumps or misordered elements.
9. Publish the site and use your browser’s accessibility inspector to verify that landmark regions (header, main, section, footer) appear in the correct logical order.