HTML tags are the building blocks of every webpage.
They define the structure, meaning, and presentation of web content - from headings and paragraphs to images, videos, forms, and layout elements.
Below is a categorized reference to the HTML elements covered in this tutorial, including commonly used, semantic, media, form, and scripting elements.
Document Structure Tags
| Tag | Description |
|---|
<!DOCTYPE> | Defines the document type (HTML5 declaration). |
<html> | Root element of an HTML page. |
<head> | Contains metadata and document information. |
<title> | Specifies the page title (shown in browser tab). |
<body> | Contains all visible page content. |
Metadata Tags
| Tag | Description |
|---|
<base> | Specifies the base URL for all relative links. |
<link> | Defines external resources (like CSS). |
<meta> | Provides metadata like charset, description, or keywords. |
<style> | Embeds CSS styles in the document. |
<script> | Embeds or links external JavaScript files. |
Text Content Tags
| Tag | Description |
|---|
<h1> to <h6> | Define headings, from largest to smallest. |
<hgroup> | Groups a heading with related subheading, alternative title, or tagline content. |
<p> | Defines a paragraph. |
<br> | Inserts a line break. |
<wbr> | Suggests an optional line-break position within text. |
<hr> | Inserts a horizontal line (thematic break). |
<pre> | Defines preformatted text. |
<b> | Bold text (stylistic). |
<strong> | Important (bold) text (semantic). |
<i> | Italic text (stylistic). |
<em> | Emphasized (italic) text (semantic). |
<mark> | Highlights text. |
<small> | Displays smaller text. |
<del> | Shows deleted text. |
<ins> | Shows inserted text. |
<sub> | Subscript text. |
<sup> | Superscript text. |
<u> | Underlined text. |
<code> | Represents a fragment of computer code. |
<kbd> | Represents keyboard or other user input. |
<samp> | Represents sample output from a program. |
<var> | Represents a variable or placeholder value. |
<s> | Marks content that is no longer accurate or relevant. |
<dfn> | Marks the defining instance of a term. |
<data> | Associates visible text with a machine-readable value. |
<ruby> | Wraps base text and its ruby annotations. |
<rt> | Provides the ruby annotation text. |
<rp> | Provides fallback punctuation around ruby text for unsupported browsers. |
<span> | Provides a generic inline container. |
Quotation & Citation Tags
| Tag | Description |
|---|
<blockquote> | Defines a section quoted from another source. |
<q> | Short inline quotation. |
<cite> | Reference to a creative work (e.g., book title). |
<abbr> | Defines an abbreviation or acronym. |
<address> | Defines contact information. |
<bdo> | Overrides text direction. |
<bdi> | Isolates text for bidirectional formatting. |
Link & Navigation Tags
| Tag | Description |
|---|
<a> | Defines a hyperlink. |
<nav> | Defines navigation links section. |
List Tags
| Tag | Description |
|---|
<ul> | Unordered (bulleted) list. |
<menu> | Represents a toolbar as an unordered list of commands. |
<ol> | Ordered (numbered) list. |
<li> | List item. |
<dl> | Description list. |
<dt> | Term/name in a description list. |
<dd> | Description of a term. |
Image & Media Tags
| Tag | Description |
|---|
<img> | Embeds an image. |
<figure> | Groups media content with a caption. |
<figcaption> | Caption for a figure. |
<audio> | Embeds audio content. |
<video> | Embeds video content. |
<source> | Specifies multiple media sources. |
<track> | Defines text tracks for media (subtitles). |
<embed> | Embeds external content. |
<object> | Embeds an external object. |
<picture> | Defines multiple image sources for responsive images. |
<canvas> | Used for drawing graphics via JavaScript. |
<map> | Defines an image map. |
<area> | Defines clickable areas in an image map. |
<iframe> | Embeds another HTML page or external document. |
Table Tags
Form & Input Tags
Semantic Layout Tags
| Tag | Description |
|---|
<header> | Defines a page or section header. |
<footer> | Defines a footer for a document or section. |
<article> | Represents independent, self-contained content. |
<section> | Defines a thematic section. |
<aside> | Defines content indirectly related to the main content. |
<main> | Represents the main content of a document. |
<search> | Contains controls or content for searching or filtering. |
<details> | Defines collapsible content. |
<summary> | Defines a summary for <details>. |
<dialog> | Represents a dialog box or popup. |
<time> | Represents time and date. |
<div> | Provides a generic block-level container. |
Script & Style Tags
| Tag | Description |
|---|
<script> | Embeds or references JavaScript. |
<noscript> | Defines alternate content for users without JavaScript. |
<style> | Embeds CSS code. |
Interactive & Web App Tags
| Tag | Description |
|---|
<slot> | Placeholder inside a web component. |
<template> | Defines a template for client-side rendering. |
Deprecated / Obsolete Tags (Avoid Using)
Browser Support
 Chrome |  Edge |  Firefox |  Safari |  Opera |  IE9+ |
|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
This reference provides a broad overview of the HTML elements covered in this tutorial, categorized for easy learning.
Understanding these elements will help you structure webpages semantically and improve accessibility, SEO, and maintainability.
