Micro Tools
Advertisement

Semantic HTML Guide

Master semantic HTML5. Browse every meaningful element from article to time, with plain-English explanations and copy-ready usage examples.

Search elements

Elements

Advertisement

Why semantics matter

Semantic elements describe what content is, not how it looks. Search engines use them to understand page structure, screen readers announce them as landmarks for navigation, and future developers (including you) can read the markup like an outline. A div soup conveys none of that.

Using this reference

Search by element name or by what you want to express, like "quote" or "date". Each card shows the element's purpose and a copy-ready example. When in doubt between article, section and div: article for standalone content, section for themed groups with headings, div for pure styling hooks.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Semantic HTML Guide FAQs

What is the difference between article and section?
An article is self-contained and makes sense on its own, like a blog post. A section is a thematic grouping within a larger context, like chapters of a page.
Can I use multiple header or footer elements?
Yes. Each article or section can have its own header and footer; they are not limited to the top and bottom of the page.
Should every section have a heading?
Ideally yes. A section without a heading is hard to identify for screen-reader users; if there is no natural heading, a div is usually the better choice.
Is div bad to use?
No. Div is correct for styling hooks and layout containers with no semantic meaning. The mistake is using div where a meaningful element exists.
Do semantic elements affect SEO?
Indirectly but genuinely. They help search engines parse your content structure, which supports rich results and better understanding of the page.
Advertisement