Skip to main content

HTML Elements Reference Guide

Searchable reference for all HTML elements with display type, semantic flag, and descriptions. Organized by category.

100% client-side - your data never leaves your browser.

61 elements shown

TagCategoryDescriptionSelf-closingExample
<html>DocumentRoot element of an HTML page.No<html lang="en">
<head>DocumentContainer for metadata (not displayed).No<head>
<body>DocumentContains all visible page content.No<body>
<title>MetadataDefines the browser tab title and SEO title.No<title>Page Title</title>
<meta>MetadataMetadata about the HTML document (charset, viewport, etc).Yes<meta name="description" content="...">
<link>MetadataRelationship between document and external resource (CSS, icons, canonical).Yes<link rel="stylesheet" href="style.css">
<style>MetadataInline CSS styles.No<style>body { margin: 0; }</style>
<script>MetadataEmbeds JavaScript code or links an external script.No<script src="app.js" defer></script>
<header>SectioningIntroductory content or navigation. Landmark when at page level.No<header><nav>...</nav></header>
<nav>SectioningNavigation links. Landmark role.No<nav aria-label="Main">
<main>SectioningMain content of the page. Only one per page.No<main>
<article>SectioningSelf-contained content (blog post, news article).No<article>
<section>SectioningGeneric standalone section. Should have a heading.No<section aria-labelledby="title">
<aside>SectioningContent tangentially related to the main content (sidebars, callouts).No<aside>
<footer>SectioningFooter for its nearest sectioning content.No<footer>
<h1>Text ContentHighest-level heading. Use one per page for main title.No<h1>Page Title</h1>
<h2>Text ContentSecond-level heading.No<h2>Section Title</h2>
<p>Text ContentParagraph of text.No<p>Paragraph content.</p>
<ul>Text ContentUnordered list (bullet points).No<ul><li>Item</li></ul>
<ol>Text ContentOrdered list (numbered items).No<ol><li>Step 1</li></ol>
<li>Text ContentList item inside ul, ol, or menu.No<li>Item</li>
<dl>Text ContentDescription list (term/definition pairs).No<dl><dt>Term</dt><dd>Definition</dd></dl>
<blockquote>Text ContentExtended quotation from another source.No<blockquote cite="https://...">Quote</blockquote>
<figure>Text ContentSelf-contained content like images, diagrams, code.No<figure><img><figcaption>Caption</figcaption></figure>
<pre>Text ContentPreformatted text preserving whitespace.No<pre><code>code here</code></pre>
<div>Text ContentGeneric block-level container with no semantic meaning.No<div class="container">
<a>Inline TextHyperlink to a URL or anchor. href required.No<a href="/about">About</a>
<span>Inline TextGeneric inline container with no semantic meaning.No<span class="highlight">text</span>
<strong>Inline TextImportant content. Rendered bold. Semantic emphasis.No<strong>Important</strong>
<em>Inline TextStressed emphasis. Rendered italic.No<em>emphasized</em>
<code>Inline TextInline code fragment.No<code>const x = 1</code>
<time>Inline TextMachine-readable time/date. Use datetime attribute.No<time datetime="2026-01-01">January 1</time>
<abbr>Inline TextAbbreviation or acronym. Use title attribute for full form.No<abbr title="HyperText">HTML</abbr>
<mark>Inline TextText highlighted for reference. Like a highlighter pen.No<mark>highlighted</mark>
<br>Inline TextLine break within text. Use sparingly.YesLine 1<br>Line 2
<wbr>Inline TextHint where a word may be broken if needed.Yesvery<wbr>longword
<img>EmbeddedImage element. Requires src and alt attributes.Yes<img src="photo.jpg" alt="Description" width="800" height="600">
<video>EmbeddedVideo content with controls.No<video controls><source src="video.mp4" type="video/mp4"></video>
<audio>EmbeddedAudio content with controls.No<audio controls src="audio.mp3"></audio>
<picture>EmbeddedMultiple image sources for responsive images.No<picture><source srcset="image.webp"><img src="image.jpg" alt="..."></picture>
<source>EmbeddedMultiple media resource for video, audio, or picture.Yes<source srcset="image.webp" type="image/webp">
<iframe>EmbeddedEmbeds another HTML page. Use title attribute.No<iframe src="embed.html" title="Embedded content"></iframe>
<canvas>EmbeddedBitmap canvas for JavaScript drawing.No<canvas id="chart" width="400" height="200"></canvas>
<svg>EmbeddedScalable Vector Graphics inline or external.No<svg aria-label="Logo" role="img"><circle r="50"/></svg>
<form>FormContains interactive controls for submitting information.No<form action="/submit" method="post">
<input>FormInteractive control field. Type attribute specifies kind.Yes<input type="email" id="email" name="email" required>
<label>FormAccessible label for a form control. Use for attribute.No<label for="email">Email</label>
<button>FormClickable button. Type: submit (default), button, reset.No<button type="submit">Submit</button>
<select>FormDropdown menu.No<select name="color"><option value="red">Red</option></select>
<textarea>FormMulti-line text input.No<textarea name="message" rows="4"></textarea>
<fieldset>FormGroups related form controls with optional legend.No<fieldset><legend>Shipping</legend>...</fieldset>
<table>TableTabular data. Not for layout.No<table>
<thead>TableTable header rows.No<thead>
<tbody>TableTable body rows.No<tbody>
<tr>TableTable row.No<tr>
<th>TableTable header cell. Use scope attribute.No<th scope="col">Name</th>
<td>TableTable data cell.No<td>Value</td>
<caption>TableTable caption. Important for accessibility.No<caption>Monthly sales</caption>
<details>InteractiveCollapsible disclosure widget.No<details><summary>More info</summary><p>Hidden content</p></details>
<summary>InteractiveVisible heading for a details element.No<summary>Click to expand</summary>
<dialog>InteractiveModal or modeless dialog box.No<dialog open><p>Content</p><button>Close</button></dialog>

Want automated scanning?

SCOUTb2 runs 25+ accessibility, performance, SEO, and security checks on any page automatically.

Install SCOUTb2 Free