Gera Tools

HTML Tags Reference

Every common HTML element grouped and searchable.

A searchable HTML tags reference grouped by purpose — document, sectioning, text, forms, media and tables — each element with a plain-English description. Runs entirely in your browser, nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Last updated Source: Gera Tools

What is the difference between block and inline elements?

Block elements like div, p and section start on a new line and take the full width available. Inline elements like span, a and strong sit within a line of text and take only as much width as their content.

HTML tags — searchable reference

A grouped, searchable list of the HTML elements you reach for every day, each with a plain-English description. It is a fast cheat sheet for remembering the right element rather than guessing, and for learning semantic markup.

How it works

The reference holds a curated set of common HTML elements organised into groups by purpose: document (html, head, meta, title), sectioning (header, nav, main, section, article, footer), text (p, a, strong, em, span, headings), forms (form, input, button, label, select), media (img, video, audio, picture), and tables (table, tr, th, td). Typing in the search box filters every group at once, matching against both the tag name and its description, so you can search by what an element does as well as by its name.

Semantic vs presentational elements

HTML5 phased out purely presentational tags in favour of semantic elements that carry meaning about their content:

Old (avoid)Modern semantic equivalent
<b><strong> — marks important text
<i><em> — marks stressed/emphasised text
<div role="navigation"><nav>
<div role="main"><main>
<font>CSS font-family / color
<center>CSS text-align: center

Screen readers, search crawlers, and browser reading modes all use semantic elements to understand page structure. A <nav> tells a screen reader “this is a navigation landmark”; a <div> does not.

Void (self-closing) elements

Void elements have no content and no closing tag. Getting these right prevents parser confusion:

img · br · hr · input · meta · link · area · base · col · embed · param · source · track · wbr

These are written as a single tag. In HTML5 the trailing slash (<br />) is permitted but optional and purely cosmetic.

Heading order and accessibility

Use one <h1> per page (the page title), then <h2> for major sections and <h3> for sub-sections. Do not skip levels (jumping from <h2> to <h4>) — screen readers use heading order as a navigation landmark, and skipped levels create confusing “gaps” for keyboard users. WCAG 2.1 success criterion 1.3.1 (Info and Relationships) is relevant here.

Search examples

  • Type list to find ul, ol, li, dl, dt, dd.
  • Type table to find all table-related elements and their roles.
  • Type meta to find meta, title, link, and base.
  • Type interactive or form to find all form controls.

Everything runs in your browser; nothing is uploaded.

Choosing the right element

The most common source of poor HTML structure is reaching for <div> or <span> when a more specific semantic element exists:

  • Use <button> not <div onClick> — <button> is keyboard-focusable and screen-reader-announced by default. A <div> with a click handler is not accessible without extra ARIA work.
  • Use <a href> for navigation, <button> for actions — links go somewhere; buttons do something. Mixing them breaks keyboard navigation patterns.
  • Use <article> for self-contained content — a blog post, a comment, or a product card that could stand alone belongs in <article>, not a generic <section> or <div>.
  • Use <figure> and <figcaption> for captioned images — this semantically associates a caption with its image, rather than a <p> that happens to follow an <img>.
  • Use <time datetime="..."> for dates — the datetime attribute provides a machine-readable date even when the visible text says “3 days ago”.