glunty

HTML Elements Reference

Every standard HTML element, searchable. Filter by category and see what each tag does.

Element What it does
<html> structure Root element that wraps the entire document and sets the page language.
<head> structure Container for metadata such as the title, links, and scripts that is not shown on the page.
<body> structure Holds all visible page content such as text, images, and controls.
<header> structure Introductory content or a group of navigation aids for its nearest section.
<footer> structure Footer for its nearest section, often with author, copyright, or related links.
<main> structure The main unique content of the document, used once per page.
<nav> structure A section that holds major navigation links.
<section> structure A standalone thematic grouping of content, usually introduced by a heading.
<article> structure A self contained composition that could be distributed or reused on its own.
<aside> structure Content tangentially related to the main content, such as a sidebar.
<div> structure A generic block container with no semantic meaning, used for styling or scripting.
<h1> text The top level heading, usually the main page title.
<h2> text A second level heading below h1.
<h3> text A third level heading below h2.
<h4> text A fourth level heading below h3.
<h5> text A fifth level heading below h4.
<h6> text The lowest level section heading.
<p> text A paragraph of text.
<span> text A generic inline container with no semantic meaning, used for styling a run of text.
<a> text A hyperlink to another page, file, or location, set by the href attribute.
<strong> text Text with strong importance, shown bold by default.
<em> text Text with stress emphasis, shown italic by default.
<b> text Draws attention to text without adding importance, bold by default.
<i> text Sets off text in an alternate voice or mood, italic by default.
<br> text A line break inside text; a void element with no closing tag.
<hr> text A thematic break between paragraphs, drawn as a horizontal rule; a void element.
<blockquote> text A block of content quoted from another source.
<code> text A fragment of computer code, shown in a monospace font.
<pre> text Preformatted text that keeps its whitespace and line breaks.
<ul> text An unordered list, rendered with bullets by default.
<ol> text An ordered list, rendered with numbers by default.
<li> text A single item inside an ordered or unordered list.
<mark> text Text highlighted for reference or relevance.
<small> text Side comments and small print such as legal text.
<img> media Embeds an image; a void element that needs the src and alt attributes.
<picture> media Offers multiple image sources so the browser can pick the best fit.
<video> media Embeds a video player with optional controls and captions.
<audio> media Embeds sound content with optional playback controls.
<source> media Specifies one media resource for a picture, video, or audio element; a void element.
<figure> media Self contained media, such as an image or diagram, often paired with a caption.
<figcaption> media A caption or legend for the contents of its parent figure.
<svg> media A container for scalable vector graphics drawn with markup.
<canvas> media A drawing surface for graphics rendered with scripts.
<iframe> media Embeds another HTML page inside the current one.
<form> forms A section that collects user input and can submit it to a handler.
<input> forms A form control whose behavior depends on its type; a void element.
<textarea> forms A multi line plain text input control.
<button> forms A clickable button that can submit a form or run script.
<select> forms A drop down list of options.
<option> forms A single choice inside a select or datalist.
<label> forms A caption tied to a form control to improve usability and accessibility.
<fieldset> forms Groups related form controls together.
<legend> forms A caption for the contents of its parent fieldset.
<datalist> forms A list of suggested values for an input.
<output> forms A container for the result of a calculation or user action.
<table> tables Displays data in rows and columns.
<thead> tables Groups the header rows of a table.
<tbody> tables Groups the main body rows of a table.
<tfoot> tables Groups the footer rows of a table, such as totals.
<tr> tables A single row of table cells.
<td> tables A standard data cell in a table.
<th> tables A header cell for a row or column, set by the scope attribute.
<caption> tables A title for the table, read out to assistive technology.
<colgroup> tables Groups one or more columns for shared styling.
<meta> meta Document level metadata such as charset, viewport, or description; a void element.
<link> meta Links the document to external resources like stylesheets; a void element.
<script> meta Embeds or references executable JavaScript.
<style> meta Holds CSS rules that apply to the document.
<title> meta The document title shown in the browser tab and in search results.
<base> meta Sets a base URL for all relative links in the document; a void element.
<details> meta A disclosure widget that the user can open and close.
<summary> meta The visible label for a details disclosure widget.
<dialog> meta A dialog box or modal window.
<template> meta Holds markup that is not rendered until it is cloned by script.
<time> meta A machine readable date or time.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable reference for the standard HTML elements, the building blocks you use to structure a web page. Every tag on the page lists its category (structure, text, media, forms, tables, or meta) and a short plain-English description of what it does. Type in the filter box to narrow the table by tag name or meaning, or tap a category button to show just one family. The whole dataset is baked into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering img narrows the list to the image tag; entering list surfaces the list-related tags; entering form shows the form controls. The category buttons (All, Structure, Text, Media, Forms, Tables, Meta) combine with the text filter, so you can pick Forms and type select to zero in on a single control. Clear the box to see every element again. Nothing is submitted and there is no result limit.

Common use cases

  • Looking up which tag to reach for when marking up a new piece of content.
  • Refreshing your memory on lesser-used elements such as figure, details, or output.
  • Checking which category an element belongs to while learning HTML.
  • Explaining the right tag to a teammate with a shared, precise definition.
  • Studying for interviews or coursework where HTML structure comes up.

Common pitfalls

  • Div is not always the answer. Reaching for div and span by default skips the semantic tags (header, nav, main, article, section, footer) that improve accessibility and SEO. Use a meaningful element first.
  • Void elements take no closing tag. Tags such as img, input, br, and meta cannot wrap content, so they never get a separate closing tag.
  • Section is not a styling hook. Use section for a thematic group with a heading, not as a generic box; that job belongs to div.
  • Headings should not skip levels. Move from h1 to h2 to h3 in order rather than picking a heading for its size, and control the size with CSS instead.

Frequently asked questions

What is a semantic element?
A semantic element clearly describes its meaning to both the browser and the developer. Tags like header, nav, main, article, section, and footer say what their content is, unlike a generic div. Semantic markup improves accessibility, because screen readers can expose landmarks, and it helps search engines understand the structure of a page.
What is the difference between div and span?
Both are generic containers with no built in meaning, but div is block level while span is inline. Use div to group larger blocks such as sections or layout regions, and use span to wrap a small run of text or inline content inside a line. Reach for a semantic element first, and fall back to div or span only when no meaningful tag fits.
When should I use section versus article?
Use article for a self contained piece that would still make sense on its own, such as a blog post, a comment, or a product card. Use section for a thematic grouping of related content within a page, usually introduced by a heading. A rough test: if the content could be syndicated or reused elsewhere as a unit, article fits; if it is just one part of a larger whole, section fits.
What is the difference between button and input type submit?
The button element is a flexible control that can contain HTML such as text and icons, and its type can be submit, reset, or button. An input with type submit is a void element that shows a push button whose label comes from its value attribute and cannot contain markup. Both submit a form by default, but button allows richer content and clearer intent.
What are void elements?
Void elements are tags that cannot have any child content, so they never take a separate closing tag. Common examples include img, input, br, hr, meta, link, source, and base. In HTML you write them as a single opening tag; the trailing slash seen in XHTML is allowed but not required.
Does this tool send anything I search to a server?
No. The full list of elements is baked into the page, and all filtering happens in your browser with JavaScript. You can confirm this by opening DevTools and watching the Network tab: typing in the search box makes zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com