Comprehensive Guide to All HTML Tags and Their Uses

Shorya Sajwan

January 21, 2025

Here is a comprehensive list of HTML tags categorized based on their functionality:

Minimalist image of HTML keycaps against a gray background, perfect for digital and web design themes.

Basic Structure

<html>: Defines the root of an HTML document.
<head>: Contains metadata, links to stylesheets, and other information.
<body>: Represents the main content of the document.

Metadata

<title>: Specifies the title of the document.
<meta>: Defines metadata (e.g., charset, description, viewport).
<link>: Links external resources like stylesheets.
<style>: Embeds CSS styles.
<script>: Embeds or links JavaScript.

Text Formatting

<h1> to <h6>: Headings from largest to smallest.
<p>: Paragraph.
<br>: Line break.
<hr>: Horizontal rule (thematic break).
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
<em>: Emphasized text (italic by default).
<strong>: Strong importance (bold by default).
<small>: Smaller text.
<mark>: Highlighted text.
<sub>: Subscript text.
<sup>: Superscript text.
<blockquote>: Block quotation.
<q>: Inline quotation.
<pre>: Preformatted text (preserves spacing and line breaks).
<code>: Inline code snippet.
<kbd>: Keyboard input.
<samp>: Sample output.
<var>: Variable in programming or mathematical expressions.
<abbr>: Abbreviation.
<cite>: Citation title.
<bdi>: Bi-directional text isolation.
<bdo>: Overrides text direction.
<span>: Inline container for styling.

Lists

<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<dl>: Description list.
<dt>: Term in a description list.
<dd>: Description of the term.

Links and Navigation

<a>: Anchor (hyperlink).
<nav>: Section for navigation links.

Images and Media

<img>: Embeds an image.
<figure>: Self-contained content, often with <img>.
<figcaption>: Caption for <figure>.
<audio>: Embeds audio content.
<video>: Embeds video content.
<source>: Specifies media sources for <audio> and <video>.
<track>: Specifies text tracks (e.g., captions) for <video> and <audio>.

Tables

<table>: Table structure.
<tr>: Table row.
<th>: Table header.
<td>: Table data cell.
<thead>: Groups header content.
<tbody>: Groups body content.
<tfoot>: Groups footer content.
<caption>: Table caption.
<colgroup>: Groups table columns.
<col>: Defines column properties.

Forms

<form>: Creates a form for user input.
<input>: Input field.
<label>: Labels an input field.
<textarea>: Multi-line text input.
<button>: Button.
<select>: Drop-down list.
<option>: Option in a drop-down list.
<optgroup>: Grouping for options.
<fieldset>: Groups related form elements.
<legend>: Caption for <fieldset>.
<datalist>: Predefined options for <input>.
<output>: Displays calculation results.

Scripting

<script>: Embeds or links JavaScript.
<noscript>: Content for users with no JavaScript support.

Semantics

<header>: Introductory content or navigation links.
<footer>: Footer content.
<main>: Main content of the document.
<section>: Thematic grouping of content.
<article>: Self-contained content.
<aside>: Content tangentially related to the main content.
<address>: Contact information.
<div>: Generic container for styling and layout.

Interactive Elements

<details>: Creates a disclosure widget.
<summary>: Summary for <details>.
<dialog>: Represents a dialog box or interactive UI element.

Embedded Content

<iframe>: Embeds another HTML document.
<embed>: Embeds external content.
<object>: Embeds external content (e.g., multimedia, applications).
<param>: Parameters for <object>.

Miscellaneous

<canvas>: Graphics container (requires JavaScript).
<svg>: Scalable vector graphics.
<math>: MathML for mathematical notations.
<template>: Container for reusable content.
<time>: Represents time or date.
<progress>: Progress bar.
<meter>: Measurement within a range.

Leave a Reply Cancel reply