HTML Semantic Elements and Why They Matter

A page built entirely from elements looks fine in a browser, but to a screen reader or a search engine it is an undifferentiated pile of boxes. Semantic elements say what each part of the page is, not just how it looks.

The page skeleton

What each element means

Element	Use it for
	introductory content for the page or a section, such as a logo and navigation
	a block of major navigation links
	the primary content. Use one per page
	a self-contained piece that would make sense on its own, such as a blog post or a comment
	a themed group of content, normally with its own heading
	content related to, but separate from, the main content, such as a sidebar
	closing information, such as copyright or links

and are still correct when nothing semantic fits. Just do not reach for them first.

Headings form an outline

Use to to describe structure, not to pick a font size. Keep one per page and do not skip levels (an followed by an ). Screen reader users often jump from heading to heading to scan a page, so a clean outline is their table of contents. Control the look with CSS.

Use the right element for interactive things

A performs an action on the page. An with an navigates somewhere. Choosing correctly gives you keyboard support and the right behavior for free.

Other small things that matter

• Give every meaningful image an attribute describing it. Use for purely decorative images so screen readers skip them.
• Connect each form control to a label with and a matching .
• Set the page language with so screen readers pronounce text correctly.
• Write real text in real elements, rather than using images of text.

Why it pays off

• Accessibility: assistive technology can jump straight to or .
• SEO: search engines understand which content is primary.
• Maintainability: is easier to find in a file than the seventh nested .
• Less code: native elements come with behavior that you would otherwise have to rebuild with JavaScript and ARIA attributes.