HTML Element Reference – By Category

ByDibya Mendali

Explore a complete HTML element reference by category. Learn basic, formatting, forms, media, tables, semantic, and HTML5 supported tags easily.

HTML Element Reference – By Category (Complete Guide)

HTML (HyperText Markup Language) uses elements (tags) to structure content on the web. Each tag has a specific role, and many tags evolved or became obsolete with HTML5.

This article explains what each tag does, where it is used, and whether it is still supported.

1. Basic HTML Elements

These elements form the foundation of every HTML document.

TagDescription
<!DOCTYPE>Declares the document type and HTML version. In HTML5, use <!DOCTYPE html>
<html>Root element that wraps the entire HTML document
<head>Contains metadata such as title, styles, scripts, and SEO info
<title>Sets the title shown in the browser tab
<body>Contains all visible page content
<h1> to <h6>Headings from highest (h1) to lowest (h6) importance
<p>Defines a paragraph
<br>Inserts a single line break
<hr>Represents a thematic break (horizontal rule)
<!-- ... -->Adds comments (not visible in browser)

Best Practice:

  • Use only one <h1> per page
  • Keep <head> clean and SEO-friendly

2. Formatting Elements

Formatting tags control text appearance, meaning, and emphasis.

Supported in HTML5

TagPurpose
<abbr>Abbreviation or acronym with full form
<address>Contact or author information
<b>Bold text (no extra importance)
<bdi>Isolates bidirectional text
<bdo>Overrides text direction
<blockquote>Long quotation from another source
<cite>Title of a creative work
<code>Inline code snippet
<del>Deleted text
<dfn>Term being defined
<em>Emphasized text (semantic importance)
<i>Alternate voice or mood
<ins>Inserted text
<kbd>Keyboard input
<mark>Highlighted text
<meter>Scalar measurement
<pre>Preformatted text
<progress>Progress of a task
<q>Short quotation
<ruby>Ruby annotations (East Asian text)
<rt>Pronunciation explanation
<rp>Fallback for ruby support
<s>Text no longer accurate
<samp>Sample output
<small>Smaller text
<strong>Important text
<sub>Subscript
<sup>Superscript
<template>Hidden reusable HTML content
<time>Date or time
<u>Stylistically different text
<var>Variable
<wbr>Optional line break

Not Supported in HTML5 (Avoid Using)

TagReplacement
<acronym>Use <abbr>
<big>Use CSS
<center>Use CSS
<font>Use CSS
<strike>Use <del> or <s>
<tt>Use CSS

3. Forms and Input Elements

Used to collect user data.

TagDescription
<form>Form container
<input>Single-line input
<textarea>Multi-line text input
<button>Clickable button
<select>Drop-down list
<optgroup>Group of options
<option>Individual option
<label>Label for input
<fieldset>Groups form fields
<legend>Caption for fieldset
<datalist>Predefined input options
<output>Result of calculation

Tip: Always associate <label> with inputs for accessibility.

4. Frames (Mostly Obsolete)

TagStatus
<frame>❌ Not supported
<frameset>❌ Not supported
<noframes>❌ Not supported
<iframe>✅ Supported (used for embedding content)

5. Image & Graphics Elements

TagDescription
<img>Displays images
<map>Image map
<area>Clickable area
<canvas>Script-based graphics
<figure>Self-contained content
<figcaption>Caption for figure
<picture>Responsive images
<svg>Scalable vector graphics

6. Audio / Video Elements

TagDescription
<audio>Sound content
<video>Video content
<source>Multiple media sources
<track>Subtitles / captions

7. Link & Navigation Elements

TagDescription
<a>Hyperlink
<link>External resource (CSS)
<nav>Navigation menu

8. List Elements

TagDescription
<ul>Unordered list
<ol>Ordered list
<li>List item
<menu>Alternative list
<dl>Description list
<dt>Term
<dd>Description
<dir>❌ Not supported

9. Table Elements

TagDescription
<table>Table container
<caption>Table title
<tr>Table row
<th>Header cell
<td>Data cell
<thead>Table header group
<tbody>Table body
<tfoot>Table footer
<col>Column styling
<colgroup>Group of columns

10. Styles & Semantic Layout Elements

Semantic tags improve SEO, accessibility, and structure.

TagPurpose
<style>Internal CSS
<div>Generic container
<span>Inline container
<header>Header section
<footer>Footer section
<main>Main content
<section>Page section
<article>Independent content
<aside>Side content
<details>Expandable info
<summary>Heading for details
<dialog>Dialog box
<data>Machine-readable data
<hgroup>Grouped headings
<search>Search section

11. Meta Information Elements

TagDescription
<meta>Metadata (SEO, charset)
<base>Base URL
<basefont>❌ Not supported

12. Programming & Embedded Content

TagDescription
<script>JavaScript code
<noscript>Fallback for no JS
<embed>External content
<object>External resource
<param>Object parameter
<applet>❌ Not supported

Final Thoughts

  • HTML5 favors semantic elements
  • Deprecated tags should be avoided
  • Use CSS for styling, not HTML
  • Proper tag usage improves SEO, accessibility, and performance

This reference works as a complete HTML cheat sheet and learning guide for modern web development.

Similar Posts

Leave a Reply