HTML Tags are fundamental building blocks of a web page.
They serve as instructions for browsers to structure, style and present content. Most tags come in pairs.
An opening tag starts an element.
A closing tag ends that element, preceded by a forward slash '/'.
Together they define how content appears on various browsers and devices.
Types of HTML Tag
NOTE: Tag name must be in lower case.
1. Opening and Closing Tags
HTML elements generally have an opening tag and a closing tag. The opening tag contains the name of the element, and the closing tag has the same name but is preceded by a forward slash ‘/’.
Example:
<p>This is a paragraph.</p>
<a href="https://www.example.com">Click here</a>
2. Self-Closing Tags (Void Elements)
Some elements don't require a closing tag and are called self-closing tags or void elements.
Example:
<img src="image.jpg" alt="An image">
<br> <!-- Line break - also a self-closing tag -->
HTML All Tag Lists by Categories
1. Document Structure Tags
These tags define the overall layout or skeleton of the page.
Tag
Description
Example
<!DOCTYPE>
Declares the document type
-
<html>
Root of HTML document
<html lang="en">...</html>
<head>
Contains meta info, links, title, scripts
<head><title>Page</title></head>
<body>
Main content of the document
<body>Content here</body>
<title>
Title shown in browser tab
<title>My website</title>
<base>
Base URL for links
<base href="https://example.com/">
<link>
External resources like CSS
<link rel="stylesheet" href="style.css">
<meta>
Metadata like charset, description
<meta charset="UTF-8">
<style>
Internal CSS styles
<style> body{ color: red; } </style>
<script>
JavaScript code or links
<script src="app.js"></script>
2. Sectioning Tags
Used to structure the content into logical parts.
Tag
Description
Example
<header>
Top section, usually with logo/nav
<header><h1>Logo</h1></header>
<nav>
Navigation links
<nav><ul><li>Home</li></ul></nav>
<main>
Main unique content of the page
<main><h2>Blog</h2></main>
<section>
Thematic grouping of content
<section><h2>News</h2></section>
<article>
Self-contained content
<article><h3>Post</h3></article>
<aside>
Sidebar or related content
<aside>Ads or tips</aside>
<footer>
Bottom section, usually with info
<footer>Copyright 2025 MySite</footer>
<address>
Contact info
<address>Email us</address>
3. Text Content Tags
Tags used for content and text formatting.
Tag
Description
Example
<h1> to <h6>
Headings (h1 = biggest)
<h1> Main Title </h1>
<p>
Paragraph
<p>This is a paragraph.</p>
<br>
Line break
Line 1 <br> Line 2
<hr>
Horizontal line
<hr>
<pre>
Preformatted text
<pre> Code block </pre>
<blockquote>
Quoted section
<blockquote> Quoted text </blockquote>
<ol>
Ordered list
<ol><li> Item </li></ol>
<ul>
Unordered list
<ul><li> Item </li></ul>
<li>
List item
<li> Item </li>
<dl>
Description list
<dl><dt> Term </dt><dd>Definition</dd></dl>
<dt>
Term in <dl>
<dt>HTML</dt>
<dd>
Description in <dl>
<dd> Markup Language </dd>
<figure>
Group image/media + caption
<figure><img><figcaption> Text </figcaption></figure>
