Article vs Section Elements: A Guide to Accessible HTML Structure

Understanding Semantic HTML and Accessibility

Semantic HTML forms the foundation of accessible web content. When you use HTML elements according to their intended meaning rather than merely for their visual appearance, you provide assistive technologies with the context they need to interpret and present your content effectively to users.

What Makes HTML Semantic

Semantic HTML uses elements that carry inherent meaning about their content and purpose. Rather than using generic <div> elements styled to look like navigation menus, semantic markup employs <nav> to explicitly indicate a navigation section. This distinction matters profoundly for users of screen readers and other assistive technologies that rely on markup semantics to build mental models of page structure.

As noted in MDN's accessibility documentation, "a great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times." This principle of using "the right element for the right job" transforms accessibility from an afterthought into a natural byproduct of thoughtful markup practices.

The benefits extend beyond accessibility. Semantic HTML typically results in cleaner, more maintainable code, improves search engine optimization, and provides consistent behavior across browsers and devices. Every time you choose a semantic element over a generic container, you're making an investment in your content's longevity and reach.

How Assistive Technologies Interpret Structure

Screen readers and other assistive technologies build navigation systems based on the semantic structure of your HTML. When a user invokes a screen reader's heading navigation, they expect to encounter a logical hierarchy that reflects the content's organization. When they use landmark navigation, they anticipate finding distinct regions of the page clearly marked and labeled.

Landmark roles provide high-level navigation shortcuts for assistive technology users, allowing them to jump directly to major page regions without tabbing through all content. Essential landmarks include <main> for primary content, <nav> for navigation, <header> for introductory content, <footer> for footer content, <aside> for tangential content, and <form> for forms with accessible names. When used correctly, these elements create an accessible navigation framework that benefits all users.

Essential Landmarks for Accessibility

Modern web development should incorporate these key landmarks to create an accessible navigation framework. Properly structured landmark regions also support your overall content strategy by making your content discoverable and navigable for all audiences.

The Article Element: Independent, Self-Contained Content

The <article> element represents a complete, self-contained composition intended for independent distribution or reuse. Think of it as content that could make sense on its own, outside the context of the surrounding page.

When to Use Article

Use the <article> element when content meets any of these criteria: it could be syndicated as a standalone piece (such as a blog post, news article, or forum post), it represents a complete widget or application unit, or it constitutes an independently distributable unit of content. The key question to ask is: "Would this content still make sense if extracted from this page and presented elsewhere?"

Article Implementation Example

<article>
 <header>
 <h1>Understanding Web Accessibility</h1>
 <p class="byline">By Jane Developer | January 7, 2026</p>
 </header>

 <p>Web accessibility ensures that websites and web applications are usable by everyone...</p>

 <footer>
 <p>Tags: accessibility, web development, HTML</p>
 </footer>
</article>

Article and Accessibility

For accessibility purposes, the <article> element signals to assistive technologies that the enclosed content represents a discrete unit of information. Screen readers may announce the presence of articles and allow users to navigate between them, providing a structured way to consume collections of independent content. This semantic structure aligns with our content strategy services that emphasize creating well-organized, accessible content for diverse audiences. Additionally, following best practices for formatting blog posts ensures your articles are both semantically correct and reader-friendly.

The Section Element: Thematic Grouping of Content

The <section> element represents a thematic grouping of content, typically with a heading. Unlike <article>, which emphasizes independence, <section> emphasizes related content that forms a logical division within a larger document.

When to Use Section

The <section> element is appropriate when content thematically belongs together and logically requires a heading to introduce it. Common use cases include grouping sections of a long article, dividing a product description into features, organizing chapters or major subsections of content, or creating distinct areas within a page's main content.

As the WebAbility guide notes, "using elements like <nav>, <main>, <article>, and <aside> creates a clear roadmap" for assistive technology users.

Section Implementation Example

<section>
 <h2>Getting Started with Semantic HTML</h2>
 <p>Semantic HTML provides meaning to your content...</p>

 <section>
 <h3>Choosing the Right Elements</h3>
 <p>Selecting appropriate elements requires understanding their purpose...</p>
 </section>

 <section>
 <h3>Avoiding Common Mistakes</h3>
 <p>Many developers use section elements incorrectly...</p>
 </section>
</section>

Section and Accessibility

The <section> element creates a new navigation landmark when given an accessible name, but otherwise contributes to the overall document structure. When used appropriately, sections help users understand the organization of complex content and navigate efficiently between related topics. Proper sectioning improves the effectiveness of our web development services by ensuring all content is accessible to everyone. For a comprehensive approach to planning your content structure, explore our guide on creating a content strategy roadmap.

Key Differences: Article vs Section

Understanding when to use <article> versus <section> requires examining their fundamental purposes and the relationships they establish between content and context.

Independence vs. Grouping

The primary distinction lies in the relationship to context. Content within an <article> should be understandable independently--it doesn't require surrounding content for meaning. Content within a <section> exists in relationship to its parent document and typically requires that context for full understanding.

Heading Requirements

Both elements commonly include headings, but the heading's role differs. In <article>, the heading represents the title of the self-contained piece. In <section>, the heading introduces a thematic division within a larger context. The HTML specification recommends that sections should always have a heading "to explicitly identify the section's purpose."

Nesting Patterns

Articles can contain sections, and sections can contain articles--nesting is perfectly acceptable when content relationships warrant it. A blog post (article) might contain multiple sections for different topics, while a section of a document might include individual articles within a feed or listing.

<!-- Article containing sections -->
<article>
 <h1>Complete Guide to HTML5</h1>

 <section>
 <h2>Introduction</h2>
 <p>HTML5 introduced many new features...</p>
 </section>

 <section>
 <h2>Semantic Elements</h2>
 <p>New semantic elements improve document structure...</p>
 </section>
</article>

<!-- Section containing articles -->
<section class="news-feed">
 <h1>Latest News</h1>

 <article>
 <h2>Breaking: New Accessibility Guidelines</h2>
 <p>WCAG 2.2 introduces new success criteria...</p>
 </article>

 <article>
 <h2>Industry Trends</h2>
 <p>Semantic HTML adoption continues to grow...</p>
 </article>
</section>

This semantic approach to content structure is essential for creating inclusive digital experiences, whether you're building a marketing site or a complex web application. Our SEO services also benefit from proper HTML structure, as search engines rely on semantic markup to understand and rank content effectively. For teams building content experiences, understanding these structural principles is crucial--consider reviewing our guide on roles needed for content marketing teams to ensure you have the right expertise.

Heading Hierarchies and Document Structure

Proper heading structure (H1 through H6) creates an accessible navigation framework that benefits all users, not just those with assistive technologies.

Creating Logical Heading Sequences

Headings should follow a logical, sequential order without skipping levels. Beginning with H1, each subsequent heading represents a subdivision of the previous content. Skipping from H2 to H4, for example, creates confusion about document structure and breaks the logical outline that assistive technology users rely on.

MDN emphasizes that "using heading tags (<h1> to <h6>) in sequential order" is a key implementation tip for semantic HTML accessibility.

One H1 Per Page Recommendation

While HTML5 allows multiple H1 elements when used within different sectioning roots (like articles), best practices generally recommend a single H1 per page representing the main title or purpose. This creates a clear top-level entry point for assistive technology navigation. Maintaining proper heading hierarchy is one of the key aspects of our content quality standards that ensure all content is accessible and well-organized.

Common Accessibility Mistakes to Avoid

Understanding common errors helps developers write better semantic markup from the start.

Misusing Sectioning Elements

The most frequent mistake is using <section> where <article> would be more appropriate, or vice versa. Sectioning elements should not be used merely for styling hooks--generic <div> elements serve that purpose without introducing semantic implications that may mislead assistive technology users.

Empty Alt Text and Decorative Images

Images that convey meaning require descriptive alt text, while purely decorative images should have empty alt attributes (alt="") to be ignored by assistive technologies. This distinction ensures screen readers don't clutter their output with irrelevant descriptions.

Missing Form Labels

Every form control must have an associated <label> element. Placeholder text does not replace labels, and purely visual associations (such as surrounding text) don't provide programmatic connections that assistive technologies can detect.

Quick Reference: Common Mistakes

Testing and Validating Accessibility

Automated and manual testing ensure semantic markup serves its intended purpose.

Automated Testing Tools

Browser developer tools, accessibility audit extensions, and comprehensive testing platforms can identify many semantic markup issues. These tools check for missing labels, improper heading hierarchy, and sectioning element misuse.

Manual Testing Approaches

No automated tool catches everything. Manual testing with screen readers (NVDA, JAWS, VoiceOver), keyboard-only navigation, and visual inspection ensures that semantic structure genuinely improves the user experience. For guidance on creating comprehensive content experiences, our guide on usability testing provides additional insights into ensuring your content works for all users.

Recommended Testing Workflow

1. Automated Audit: Run accessibility tools to catch obvious issues
2. Keyboard Navigation Test: Navigate entire site using only keyboard
3. Screen Reader Test: Experience the site through a screen reader
4. Heading Structure Check: Verify logical heading hierarchy
5. Landmark Verification: Confirm landmark regions are identifiable

Regular accessibility testing is a core component of our quality assurance process, ensuring all content meets the highest standards of accessibility and user experience.

Sources

1. MDN Web Docs: HTML Accessibility
2. WebAbility: 10 Essential Website Accessibility Best Practices for 2025
3. DEV Community: Accessibility in HTML Best Practices