Below is an example content section. The header above contains meta information, title, subtitle, and a featured image, with all body text located beneath. .article-content.
Introduction
This opening paragraph explains what the article aims to demonstrate.
Requirements
- Proper IDs on section headings
- Table of Contents links match these IDs
- Responsive header sizing
Steps
Step 1: Verify Structure
Confirm that the header closes before the content section initiates.
Step 2: Add IDs
Assign a corresponding identifier to every H2/H3 element in the Table of Contents. id.
Step 3: Test ToC Links
Use the sidebar Table of Contents links to verify seamless navigation to sections.
Conclusion
Clear division between header and content prevents layout issues and boosts SEO and UX.