The header above contains meta information, title, subtitle, and a featured image, with the main content situated underneath in this example area. .article-content.
Introduction
An introductory paragraph outlining the purpose of this article.
Requirements
- Proper IDs on section headings
- Table of Contents links match these IDs
- Responsive header sizing
Steps
Step 1: Verify Structure
The header should be properly closed prior to the start of the content.
Step 2: Add IDs
Assign a corresponding identifier to each H2/H3 used in the Table of Contents. id.
Step 3: Test ToC Links
Use the sidebar ToC links to ensure smooth transitions to different sections.
Conclusion
Separating the header and content avoids layout problems and enhances SEO and user experience.