Below is a sample content area. The header contains meta data, title, subtitle, and a featured image, with the body content located beneath. .article-content.
Introduction
This paragraph introduces the key points this article will illustrate.
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 is closed before the content section starts.
Step 2: Add IDs
Ensure each H2/H3 in the Table of Contents has a matching identifier. id.
Step 3: Test ToC Links
Click on the sidebar ToC links to ensure smooth scrolling to the respective sections.
Conclusion
Proper separation of the header and content area eliminates layout conflicts and improves both SEO and UX.