What is a void element in HTML?

A void element has no content model and no closing tag — examples are img, input, br, hr, meta and link. You cannot place children inside them, and the self-closing slash (like ) is optional in HTML syntax.

What does the content model column mean?

The content model describes what an element is allowed to contain. Flow content covers most body-level elements, phrasing content is inline text-level content, and some elements restrict children to specific tags — for example ul may only contain li, script and template.

What is an implicit ARIA role?

Most HTML elements map to a default ARIA role that assistive technology uses, such as nav becoming navigation or button becoming button. You usually should not restate the implicit role, and overriding it can harm accessibility.

Why should I prefer semantic elements over div?

Semantic elements like header, nav, main, article and footer carry meaning that browsers, search engines and screen readers understand, giving you built-in landmarks and better accessibility. A div is a generic box with no role, useful only when no semantic element fits.

Can section and article be used interchangeably?

No. An article is self-contained content that could stand alone or be syndicated, like a blog post or comment. A section is a thematic grouping within a document, usually introduced by a heading. Use article when the content makes sense on its own.

What is the HTML Elements Reference?

A searchable HTML5 element reference covering metadata, sectioning, grouping, embedded, tabular and form elements with each one's content model, whether it is a void element and its implicit ARIA role. It runs free in your browser on Gera Tools, with nothing uploaded.

HTML Elements Reference

Name: HTML Elements Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

This is a searchable reference for the common HTML5 elements — the building blocks of every web page. It groups them by category (metadata, sectioning, grouping, text-level, embedded, tabular, forms and interactive) and, for each, shows the content model it permits, whether it is a void element, and the implicit ARIA role browsers assign it.

Content categories explained

Every element participates in one or more named content categories, and its content model is defined in terms of those same categories:

Metadata content — elements that configure the document without rendering anything visible: <head>, <title>, <meta>, <link>, <style>, <script>, <noscript>.
Flow content — nearly everything that appears in the body of a document. Most elements fall here.
Sectioning content — creates a new section in the document outline: <article>, <aside>, <nav>, <section>.
Heading content — <h1> through <h6>, and <hgroup>.
Phrasing content — the inline, text-level subset: <a>, <em>, <strong>, <span>, <abbr>, <code>, <time>, etc.
Embedded content — imports external content: <img>, <video>, <audio>, <iframe>, <canvas>, <svg>.
Interactive content — elements that a user can interact with: <a> (with href), <button>, <details>, <input>, <select>, <textarea>.

Void elements

Void elements — <img>, <input>, <br>, <hr>, <meta>, <link>, <area>, <base>, <col>, <embed>, <param>, <source>, <track>, <wbr> — have no content model and no children. The self-closing slash (<br />) is syntactically optional in HTML5, but has no meaning; it is only required in XHTML.

Implicit ARIA roles

The browser maps most elements to an ARIA role that assistive technology exposes, giving you landmarks for free:

Element	Implicit ARIA role
`<main>`	main
`<nav>`	navigation
`<header>`	banner (when a descendant of body)
`<footer>`	contentinfo (when a descendant of body)
`<article>`	article
`<section>`	region (when named)
`<button>`	button
`<a href>`	link
`<h1>`–`<h6>`	heading
`<ul>` / `<ol>`	list

Restating the implicit role is redundant; overriding it can mislead assistive tech.

Transparent content model

The <a> element has a transparent content model — it inherits the model of its parent. If <a> is inside a paragraph (phrasing context), it may only contain phrasing content. If it is inside a <div> or <article> (flow context), it may wrap block-level elements like <h2> or <p>. This is why a large card-style link wrapping a heading and paragraph is valid HTML5.

Tips for choosing the right element

Use <article> when the content could stand alone (a blog post, a product card, a comment).
Use <section> for thematic groupings that need a heading but are not self-contained.
Prefer <aside> for tangential content — a sidebar, an author bio — rather than a decorative <div>.
Use exactly one <main> per page; it marks the primary content and is a key screen-reader landmark.
Prefer <figure> / <figcaption> over a bare <img> when you need a caption.

Example

<article>
  <header>
    <h2>Post title</h2>
    <time datetime="2026-06-06">6 June 2026</time>
  </header>
  <p>Body text with a <a href="/more">link</a>.</p>
  <aside>Related reading: <a href="/topic">Topic overview</a></aside>
  <footer>Filed under <a href="/category">Category</a></footer>
</article>

Everything runs in your browser; nothing you search is uploaded.