Complete List of HTML Elements & Tags with Clickable Tag Links

Hello my friend! Welcome to the Complete List of HTML Elements & Tags reference guide on dev.rean.me!

HTML (HyperText Markup Language) consists of over 100 native elements used to structure web pages. In this guide, we group HTML elements by category, provide code examples, and include clickable tag links (#table, #dropdown, #list, #forms, etc.) so you can easily find related tutorials and deep-dive posts across our blog!

1. Document Structure, Metadata & Scripting Elements

These elements define the root document structure, character encoding, title, viewport, base URLs, and external resource links.

Tag	Name	Description
`<!DOCTYPE html>`	Document Type	Tells the browser to parse the document as standard HTML5.
`<html>`	Root Element	Top-level container for all HTML elements on the page (`lang="en"`).
`<head>`	Head Section	Contains page metadata, title, CSS stylesheets, and scripts.
`<title>`	Page Title	Sets the document title displayed in the browser tab and search results.
`<meta>`	Metadata	Specifies viewport, character set, SEO descriptions, and social tags.
`<link>`	Resource Link	Links external stylesheets (`style.css`), favicons, or Google Fonts.
`<style>`	Internal CSS	Holds internal CSS styling rules inside `<head>`.
`<script>`	JavaScript Script	Embeds or links executable JavaScript code (`src="..."`, `defer`).
`<noscript>`	No Script	Fallback markup rendered when JavaScript is disabled in the browser.
`<base>`	Base URL	Specifies default base URL and target for all relative links in document.
`<body>`	Body Container	Contains all visible content displayed on the webpage.

Example Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="My first HTML page" />
    <link rel="stylesheet" href="style.css" />
    <title>My Web Page</title>
    <style>
      body { font-family: Arial, sans-serif; }
    </style>
    <script defer src="app.js"></script>
    <noscript>Please enable JavaScript to use this site.</noscript>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

Output:

🌐 Browser tab shows: My Web Page | Page renders: Hello, World! in Arial font. If JS is disabled, the <noscript> message appears instead.

Explore related articles by clicking any tag below:

📌 #html — Browse all general HTML guides
📌 #html5 — Discover modern HTML5 features & standards
📑 Tutorial: HTML Cheat Sheet with Examples & Best Practices

2. Semantic Structural & Layout Elements

Semantic elements give meaning to page structure, improving Google SEO ranking and accessibility for screen readers.

Tag	Name	Description
`<header>`	Header	Represents introductory content, branding logo, or top nav bar.
`<nav>`	Navigation	Section containing main navigation menus and links.
`<main>`	Main Content	Primary content container (must be unique per page).
`<article>`	Article	Self-contained composition (blog post, news item, card).
`<section>`	Section	Generic standalone section grouping related thematic content.
`<aside>`	Sidebar	Sidebar content indirectly related to main content (links, ads).
`<footer>`	Footer	Bottom footer section containing copyright, sitemap, and contact links.
`<hgroup>`	Heading Group	Groups a set of `<h1>`–`<h6>` headings when multi-level heading is needed.
`<figure>`	Figure Container	Encapsulates self-contained media content (diagrams, photos, code snippets).
`<figcaption>`	Figure Caption	Represents caption text for a `<figure>` parent container.
`<address>`	Address Info	Contact information for author/owner of article or webpage.
`<search>`	Search Section	Represents a section containing search elements (search bar, form).

Example Code:

<header>
  <hgroup>
    <h1>My Blog</h1>
    <p>A place to share ideas</p>
  </hgroup>
  <nav>
    <a href="/">Home</a> |
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <section>
      <h2>Getting Started with HTML</h2>
      <p>HTML is the backbone of every web page...</p>
      <figure>
        <img src="html-diagram.png" alt="HTML structure diagram" />
        <figcaption>Fig 1. Basic HTML page structure.</figcaption>
      </figure>
    </section>
  </article>

  <aside>
    <p>📌 Related: <a href="/css-guide">CSS Guide</a></p>
  </aside>
</main>

<footer>
  <address>Contact: <a href="mailto:hello@dev.rean.me">hello@dev.rean.me</a></address>
  <p>&copy; 2026 dev.rean.me</p>
</footer>

Output:

🖥️ Page renders with a header containing a title & nav links, a main area with an article, image with caption, a sidebar with a related link, and a footer with contact info and copyright.

📌 #html5 — Learn modern layout structure
📌 #frontend — Web design & structural best practices
📑 Tutorial: HTML Tips and Tricks with Examples (Bad vs Good Code)

3. Text Formatting & Inline Typography Elements

Elements used to format text, headings, hyperlinks, inline code, and technical typography.

Example Code:

<h1>Main Title (H1)</h1>
<h2>Sub Heading (H2)</h2>
<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<p>Visit <a href="https://dev.rean.me" target="_blank">dev.rean.me</a> for tutorials.</p>
<p>User shortcut: press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Inline <code>const x = 10;</code> code tag.</p>
<p>Water formula: H<sub>2</sub>O &nbsp;|&nbsp; Einstein: E = mc<sup>2</sup></p>
<p><mark>Highlighted text</mark> and <del>deleted text</del> and <ins>inserted text</ins>.</p>
<p>Abbr: <abbr title="HyperText Markup Language">HTML</abbr></p>
<blockquote cite="source-url">"The web is for everyone." — Tim Berners-Lee</blockquote>
<pre>  Preformatted
  Text Block</pre>

Output:

Main Title (H1)

Sub Heading (H2)

Paragraph with bold and italic text. Visit dev.rean.me for tutorials. User shortcut: press Ctrl + C to copy. Inline const x = 10; code tag. Water formula: H₂O | Einstein: E = mc² ==Highlighted text== and ~~deleted text~~ and inserted text. Abbr: HTML (hover to see: HyperText Markup Language)

"The web is for everyone." — Tim Berners-Lee

  Preformatted
  Text Block

Tag	Description
`<h1>` to `<h6>`	Six levels of section headings (`<h1>` is highest priority).
`<p>`	Paragraph text container.
`<a>`	Hyperlink anchor element (`href`, `target`, `rel`).
`<div>`	Generic block-level container for grouping layout elements.
`<span>`	Generic inline container for styling specific words.
`<hr>`	Horizontal rule representing a thematic break between paragraphs.
`<br>`	Line break (forces a new line within text).
`<strong>`	Strong importance (renders bold).
`<em>`	Stress emphasis (renders italic).
`<mark>`	Highlighted text background for relevance.
`<code>`	Inline code snippet identifier.
`<pre>`	Preformatted block preserving spaces and line breaks.
`<kbd>`	Keyboard shortcut input indicator (e.g., `<kbd>Ctrl</kbd> + <kbd>S</kbd>`).
`<samp>`	Computer sample output text.
`<var>`	Variable name in computer programming or math equations.
`<time>`	Machine-readable date/time representation (`datetime="2026-09-10"`).
`<small>`	Side comments and fine print text.
`<sub>`	Subscript text (e.g. H₂O).
`<sup>`	Superscript text (e.g. E = mc²).
`<del>`	Deleted text representing a document edit (strikethrough).
`<ins>`	Inserted text representing an addition (underline).
`<blockquote>`	Block quotation from an external source (`cite="..."`).
`<q>`	Short inline quotation enclosed in quotation marks automatically.
`<abbr>`	Abbreviation or acronym with `title` attribute expansion.
`<cite>`	Title of a work (book, paper, research article).
`<dfn>`	Defining instance of a term or concept.
`<bdo>`	Bi-Directional Override to force text direction (`dir="rtl\|ltr"`).
`<bdi>`	Bi-Directional Isolation from surrounding text.
`<wbr>`	Word break opportunity for long URLs or long words.

📌 #web-development — Fundamentals of web text & layout
📌 #fonts — Pairing and configuring web typography
📑 Tutorial: How to Add Multiple Google Fonts in HTML

4. List Elements (`<ul>`, `<ol>`, `<dl>`)

Lists structure items into bullet points, numbered order, or dictionary key-value definitions.

Tag	Element Name	Description
`<ul>`	Unordered List	Bullet point list container.
`<ol>`	Ordered List	Numbered list container (`type="1\|a\|i"`).
`<li>`	List Item	Individual item inside `<ul>` or `<ol>`.
`<dl>`	Description List	Container for definition key-value pairs.
`<dt>`	Term	Term/Key name inside description list.
`<dd>`	Description	Description/Value details inside description list.

Example Code:

<!-- Unordered List -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered List -->
<ol type="1">
  <li>Install VS Code</li>
  <li>Create index.html</li>
  <li>Write your first HTML</li>
</ol>

<!-- Description List -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — structures web content.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — styles and layouts web pages.</dd>
</dl>

Output:

Unordered List:

HTML

CSS

JavaScript

Ordered List:

Install VS Code

Create index.html

Write your first HTML

Description List: HTML HyperText Markup Language — structures web content. CSS Cascading Style Sheets — styles and layouts web pages.

Click tags below to view dedicated list tutorials:

📌 #list — All articles about HTML lists
📌 #ol — Ordered list guides
📌 #ul — Unordered list navigation guides
📑 Tutorial: Lists in HTML (Ordered, Unordered, and Description Lists)

5. Table Elements (`<table>`, `<tr>`, `<th>`, `<td>`, `<col>`)

Used to render structured tabular data in rows and columns.

Tag	Description
`<table>`	Outer table container.
`<caption>`	Title caption for the table.
`<thead>`	Header row group container.
`<tbody>`	Data rows container.
`<tfoot>`	Table summary/footer row group.
`<tr>`	Table Row container for cells.
`<th>`	Header cell (centered & bold by default).
`<td>`	Standard data cell.
`<colgroup>`	Group container of one or more `<col>` columns.
`<col>`	Column properties specifier for styling table columns.

Example Code:

<table border="1">
  <caption>Student Scores</caption>
  <colgroup>
    <col style="background-color: #f0f4ff" />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Math</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Science</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>91.5</td>
    </tr>
  </tfoot>
</table>

Output:

Student Scores

Name Subject Score
Alice Math 95
Bob Science 88
Average 91.5

Name	Subject	Score
Alice	Math	95
Bob	Science	88
Average		91.5

Click tags below to filter table tutorials:

📌 #table — All table tutorials & guides
📌 #colspan — Multi-column spanning guide
📌 #rowspan — Multi-row spanning guide
📑 Tutorial: How to Use Table Tag in HTML (Headers, Rows & Cells)

6. Form, Input & Control Elements

Used to create user interactive forms, search bars, check boxes, radio buttons, drop-down menus, and range controls.

Tag	Description
`<form>`	Form container with `action` and `method` attributes.
`<input>`	Input field (`type="text\|email\|password\|checkbox\|radio\|submit\|file\|range\|date"`).
`<label>`	Accessible input caption linked via `for="id"`.
`<textarea>`	Multiline text input box.
`<button>`	Clickable button element (`type="submit\|button\|reset"`).
`<select>`	Drop-down selection list.
`<option>`	Single choice option inside `<select>` or `<datalist>`.
`<optgroup>`	Group of options under a heading inside `<select>`.
`<datalist>`	Predefined auto-complete options linked to `<input list="...">`.
`<fieldset>`	Form field group container with border box.
`<legend>`	Caption title for a `<fieldset>`.
`<output>`	Represents the result of a calculation or user action in a form.

Example Code:

<form action="/submit" method="post">
  <fieldset>
    <legend>User Registration</legend>

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" placeholder="John Doe" required />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="john@example.com" />

    <label for="country">Country:</label>
    <select id="country" name="country">
      <optgroup label="Asia">
        <option value="kh">Cambodia</option>
        <option value="th">Thailand</option>
      </optgroup>
      <optgroup label="Europe">
        <option value="fr">France</option>
      </optgroup>
    </select>

    <label for="browser">Preferred Browser:</label>
    <input list="browsers" id="browser" name="browser" />
    <datalist id="browsers">
      <option value="Chrome" />
      <option value="Firefox" />
      <option value="Safari" />
    </datalist>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="40"></textarea>

    <label><input type="checkbox" name="agree" /> I agree to the terms</label>

    <button type="submit">Register</button>
    <button type="reset">Clear</button>
  </fieldset>
</form>

Output:

📋 A bordered box labeled "User Registration" renders with:

A text field for Full Name

An email field for Email

A grouped Country dropdown (Asia / Europe groups)

An auto-complete browser input field

A multiline textarea for messages

A checkbox for agreement

Two buttons: Register (submit) and Clear (reset)

Filter form posts by clicking tags below:

📌 #dropdown — Dropdown menus & custom select tutorials
📌 #select — <select> and <option> guides
📌 #datalist — Native auto-complete dropdown guide
📌 #fieldset — Grouping radio & checkbox inputs
📑 Tutorial 1: Everything About Dropdown List in HTML (<select> & <option>)
📑 Tutorial 2: Dropdown List with Auto-Complete (<datalist>)
📑 Tutorial 3: Fieldsets with Radios and Checkboxes
📑 Tutorial 4: How to Create a Simple Calculator in HTML

7. Native Interactive UI Elements (`<details>`, `<dialog>`, `<progress>`, `<meter>`)

Modern native HTML5 interactive UI components without external JavaScript dependencies!

Tag	Description
`<details>`	Collapsible disclosure accordion widget.
`<summary>`	Heading label for `<details>` disclosure box.
`<dialog>`	Native modal dialog or popup window (`showModal()`).
`<progress>`	Task completion progress bar (`value="70" max="100"`).
`<meter>`	Scalar measurement gauge within a known range (`value="0.8"`).

Example Code:

<!-- Collapsible Accordion -->
<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language and is the standard language for creating web pages.</p>
</details>

<!-- Progress Bar -->
<label>Course Progress:</label>
<progress value="70" max="100">70%</progress>

<!-- Meter Gauge -->
<label>Disk Usage:</label>
<meter value="0.75" min="0" max="1" low="0.3" high="0.8" optimum="0.5">75%</meter>

<!-- Native Dialog Modal -->
<dialog id="myDialog">
  <h2>Notice</h2>
  <p>This is a native HTML modal dialog!</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Output:

▶ What is HTML? (click to expand) HTML stands for HyperText Markup Language and is the standard language for creating web pages.

Course Progress: ████████████░░░░ 70/100

Disk Usage: ▓▓▓▓▓▓▓▓▓▓▓▓░░░ 75% (gauge turns red as it approaches high threshold)

[ Open Dialog ] → clicking opens a centered native browser modal with a Close button

📌 #cheat-sheet — Full HTML reference & code examples
📌 #html5 — Interactive native UI components
📑 Tutorial: HTML Cheat Sheet with Examples & Best Practices

8. Media & Embedded Content Elements

Elements for displaying graphics, audio tracks, videos, embedded frames, and client-side templates.

Tag	Description
`<img>`	Embeds an image file (`src`, `alt`, `loading="lazy"`).
`<picture>`	Container for responsive image sources (`<source>`).
`<source>`	Media source for `<picture>`, `<video>`, or `<audio>`.
`<track>`	Subtitles or captions text track for `<video>` or `<audio>`.
`<audio>`	Embeds sound or audio player with controls.
`<video>`	Embeds video media player.
`<iframe>`	Inline frame embedding external webpage or YouTube video.
`<embed>`	Embeds external application or interactive content.
`<object>`	External resource container (PDFs, Flash, media plugins).
`<param>`	Parameter values for an `<object>` container.
`<svg>`	Scalable Vector Graphics container.
`<canvas>`	Scriptable 2D/3D graphics rendering surface via JS.
`<template>`	Hidden client-side content fragment rendered dynamically by JS.
`<slot>`	Placeholder inside Web Component shadow DOM template.

Example Code:

<!-- Responsive Image with picture -->
<picture>
  <source srcset="banner.webp" type="image/webp" />
  <img src="banner.jpg" alt="HTML tutorial banner" loading="lazy" width="800" height="400" />
</picture>

<!-- Audio Player -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<!-- Video Player with Subtitles -->
<video controls width="640" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4" />
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English" />
  Your browser does not support the video element.
</video>

<!-- Embedded YouTube iframe -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameborder="0"
  allowfullscreen
></iframe>

<!-- Inline SVG Circle -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="#4f46e5" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">SVG</text>
</svg>

<!-- Canvas (drawn via JS) -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(20, 20, 160, 60);
  ctx.fillStyle = 'white';
  ctx.font = '18px Arial';
  ctx.fillText('Canvas!', 65, 57);
</script>

Output:

🖼️ <picture> — Renders banner.jpg (or .webp if supported) lazily loaded with proper dimensions.

🔊 <audio> — Native browser audio player with play/pause/volume controls appears.

🎬 <video> — Video player with thumbnail poster, play controls, and English subtitle track.

📺 <iframe> — Embedded YouTube video player rendered inline on the page.

🔵 <svg> — A purple filled circle with white "SVG" label text drawn inline.

🟪 <canvas> — A 200×100 canvas box with a purple rectangle and white "Canvas!" text drawn by JavaScript.

9. Developer Tools & Code Editor Extensions

To build websites efficiently with HTML tags, proper developer tools and extensions are essential.

Tool / Extension	Type	Purpose
VS Code	Editor	Most popular free code editor with HTML IntelliSense.
Prettier	Extension	Auto-formats HTML/CSS/JS code on save.
Live Server	Extension	Instantly previews HTML in browser with hot-reload.
Auto Rename Tag	Extension	Automatically renames paired HTML opening/closing tags.
HTML CSS Support	Extension	Provides class/id auto-complete from linked CSS files.
emmet	Built-in	Shorthand HTML snippets (e.g., `div.container>ul>li*3`).

Example Code (Emmet Shorthand → Expanded HTML):

<!-- Type this shorthand in VS Code and press Tab: -->
<!-- div.container>ul>li*3 -->

<!-- VS Code expands it into: -->
<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Output:

⚡ In VS Code, typing div.container>ul>li*3 then pressing Tab instantly expands to a full <div> with a <ul> containing three <li> items — saving significant typing time!

📌 #vs-code — Visual Studio Code productivity guides
📌 #ide — Web development code editors
📑 Tutorial 1: Essential VS Code Extensions for Modern HTML
📑 Tutorial 2: Top IDEs and Code Editors for Web Developers
📑 Tutorial 3: Best Free Coding Fonts for VS Code

Below is the quick clickable tag directory to explore all topics across dev.rean.me:

#html #html5 #table #dropdown #select #datalist #fieldset #list #ol #ul #fonts #vs-code #cheat-sheet

Happy coding and building web applications! 🚀

Complete List of HTML Elements & Tags with Clickable Tag Links

HTML & Web Development Complete Tutorial Series & Course List

1. Document Structure, Metadata & Scripting Elements

2. Semantic Structural & Layout Elements

3. Text Formatting & Inline Typography Elements

Main Title (H1)

Sub Heading (H2)

4. List Elements (`<ul>`, `<ol>`, `<dl>`)

5. Table Elements (`<table>`, `<tr>`, `<th>`, `<td>`, `<col>`)

6. Form, Input & Control Elements

7. Native Interactive UI Elements (`<details>`, `<dialog>`, `<progress>`, `<meter>`)

8. Media & Embedded Content Elements

9. Developer Tools & Code Editor Extensions

HTML & Web Development Complete Tutorial Series & Course List

HTML & Web Development Complete Tutorial Series & Course List

1. Document Structure, Metadata & Scripting Elements

🏷️ Clickable Tags & Related Tutorials:

2. Semantic Structural & Layout Elements

🏷️ Clickable Tags & Related Tutorials:

3. Text Formatting & Inline Typography Elements

Main Title (H1)

Sub Heading (H2)

🏷️ Clickable Tags & Related Tutorials:

4. List Elements (<ul>, <ol>, <dl>)

🏷️ Clickable Tags & Related Tutorials:

5. Table Elements (<table>, <tr>, <th>, <td>, <col>)

🏷️ Clickable Tags & Related Tutorials:

6. Form, Input & Control Elements

🏷️ Clickable Tags & Related Tutorials:

7. Native Interactive UI Elements (<details>, <dialog>, <progress>, <meter>)

🏷️ Clickable Tags & Related Tutorials:

8. Media & Embedded Content Elements

9. Developer Tools & Code Editor Extensions

🏷️ Clickable Tags & Related Tutorials:

Summary Tag Cloud Directory

HTML & Web Development Complete Tutorial Series & Course List

4. List Elements (`<ul>`, `<ol>`, `<dl>`)

5. Table Elements (`<table>`, `<tr>`, `<th>`, `<td>`, `<col>`)

7. Native Interactive UI Elements (`<details>`, `<dialog>`, `<progress>`, `<meter>`)