1. Basic Document Structure

Essential tags that form the foundation of every HTML document

<html> - HTML Tag

The <html> tag is the root element of an HTML document.

Example: <html lang="en">...</html>

<head> - Head Tag

The <head> tag contains metadata and links to resources.

Example: <head><title>Title</title></head>

<body> - Body Tag

The <body> tag defines the main content of an HTML document.

Example: <body>Content here</body>

<title> - Title Tag

The <title> tag defines the title of the document (shown in browser tab).

Example: <title>Page Title</title>

<meta> - Meta Tag

The <meta> tag provides metadata about the HTML document.

Example: <meta charset="UTF-8">

<link> - Link Tag

The <link> tag defines a link to an external resource (like a stylesheet).

Example: <link rel="stylesheet" href="style.css">

2. Text Content

Basic tags for displaying text and creating document structure

<h1> - Heading Tag

The <h1> tag defines a top-level heading on a webpage. Headings range from <h1> to <h6>.

Example: <h1>This is a Heading</h1>

Live Example:

This is a Heading

<hgroup> - Heading Group

The <hgroup> tag groups a heading with subheadings or secondary content. Previously deprecated, it has been reinstated in HTML Living Standard.

Example: <hgroup><h1>Title</h1><p>Subtitle</p></hgroup>

Live Example:

Main Article Title

A descriptive subtitle or tagline

<p> - Paragraph Tag

The <p> tag defines a paragraph of text.

Example: <p>This is a paragraph.</p>

Live Example:

This is a paragraph.

<br> - Line Break

The <br> tag inserts a line break.

Example: Line one<br>Line two

Live Example:

Line one
Line two

<hr> - Horizontal Rule

The <hr> tag creates a horizontal line (thematic break).

Example: <hr>

Live Example:

3. Text Formatting & Semantics

Tags for styling, emphasizing, and giving meaning to text content

<strong> - Strong Text

The <strong> tag defines text with strong importance (typically bold).

Example: <strong>Important text</strong>

Live Example: This is Important text in a sentence.

<em> - Emphasized Text

The <em> tag defines emphasized text (typically italic).

Example: <em>Emphasized text</em>

Live Example: This is Emphasized text in a sentence.

<b> - Bold Text

The <b> tag makes text bold without adding extra importance.

Example: <b>Bold text</b>

Live Example: This is Bold text in a sentence.

<i> - Italic Text

The <i> tag makes text italic without adding emphasis.

Example: <i>Italic text</i>

Live Example: This is Italic text in a sentence.

<u> - Underline Text

The <u> tag underlines text.

Example: <u>Underlined text</u>

Live Example: This is Underlined text in a sentence.

<mark> - Highlighted Text

The <mark> tag highlights or marks text for reference or notation purposes.

Example: <mark>highlighted text</mark>

Live Example: This is highlighted text in a sentence.

<small> - Small Text

The <small> tag represents side comments or small print (like copyright or legal text).

<sub> / <sup> - Subscript & Superscript

The <sub> tag creates subscript text, while <sup> creates superscript text.

Example: H<sub>2</sub>O or x<sup>2</sup>

Live Example: H₂O (water) and E=mc² (Einstein's equation)

<code> - Code Text

The <code> tag defines a piece of computer code.

Example: <code>console.log()</code>

Live Example: Use console.log() to print output.

<kbd> - Keyboard Input

The <kbd> tag represents keyboard input or user input from other sources.

Example: Press <kbd>Ctrl</kbd> + <kbd>C</kbd>

Live Example: Press Ctrl + C to copy.

<abbr> - Abbreviation

The <abbr> tag defines an abbreviation or acronym, with an optional title for the full description.

Example: <abbr title="HyperText Markup Language">HTML</abbr>

Live Example: HTML (hover to see full text)

<time> - Time/Date

The <time> tag represents a specific time or date in a machine-readable format.

Example: <time datetime="2026-01-03">January 3, 2026</time>

Live Example: The event is on January 3, 2026.

<wbr> - Word Break Opportunity

The <wbr> tag suggests where text can break if needed (for long words or URLs).

Example: verylongword<wbr>continuation

Live Example:

supercalifragilisticexpialidocious

<pre> - Preformatted Text

The <pre> tag defines preformatted text (preserves spaces and line breaks).

Example: <pre>Formatted text</pre>

Live Example:

Line 1
  Indented Line 2
    More indented Line 3

<blockquote> - Block Quote

The <blockquote> tag defines a section quoted from another source.

Example: <blockquote>Quote here</blockquote>

Live Example:

"This is a quotation from another source."

4. Links & Media

Tags for hyperlinks, images, video, audio, and embedded content

<a> - Anchor Tag

The <a> tag defines a hyperlink, which is used to link from one page to another.

Example: <a href="https://example.com">Visit Example</a>

Live Example: Visit Example

<img> - Image Tag

The <img> tag is used to embed an image in a webpage.

Example: <img src="image.jpg" alt="Image description">

Live Example:

<picture> / <source> - Responsive Images

The <picture> tag contains multiple <source> elements for responsive images that adapt to different screen sizes.

Example: <picture><source media="(min-width: 800px)" srcset="large.jpg"><img src="small.jpg"></picture>

Live Example:

Resize your browser to see the image change!

<figure> / <figcaption> - Figure with Caption

The <figure> tag groups media content with a caption defined by <figcaption>.

Example: <figure><img src="photo.jpg"><figcaption>Caption</figcaption></figure>

Live Example:

Sample photo — Figure 1: A sample photo caption

<video> - Video Tag

The <video> tag embeds video content in a webpage.

Example: <video src="video.mp4" controls></video>

<audio> - Audio Tag

The <audio> tag embeds audio content in a webpage.

Example: <audio src="audio.mp3" controls></audio>

<iframe> - Inline Frame

The <iframe> tag embeds another HTML page within the current page.

Example: <iframe src="page.html"></iframe>

5. Lists

Tags for creating ordered and unordered lists

<ul> - Unordered List

The <ul> tag defines an unordered (bulleted) list.

Example: <ul><li>Item 1</li><li>Item 2</li></ul>

Live Example:

Item 1
Item 2
Item 3

<ol> - Ordered List

The <ol> tag defines an ordered (numbered) list.

Example: <ol><li>First</li><li>Second</li></ol>

Live Example:

First
Second
Third

<li> - List Item

The <li> tag defines an item in a list (used with <ul> or <ol>).

Example: <li>List item</li>

6. Page Structure & Layout

Semantic HTML5 tags for organizing page layout and content structure

<div> - Division Tag

The <div> tag is a block-level container for content, typically used to group elements.

Example: <div>Content here</div>

<span> - Inline Container

The <span> tag is an inline container used to style or manipulate a specific part of text.

Example: <span style="color:red">Red text</span>

<header> - Header Section

The <header> tag defines a header section for a document or section.

Example: <header><h1>Site Title</h1></header>

<footer> - Footer Section

The <footer> tag defines a footer section for a document or section.

<nav> - Navigation Section

The <nav> tag defines a section of navigation links.

Example: <nav><a href="/home">Home</a></nav>

<main> - Main Content

The <main> tag specifies the main content of a document.

Example: <main>Main content here</main>

<section> - Section Tag

The <section> tag defines a thematic grouping of content.

Example: <section><h2>About</h2>...</section>

<article> - Article Tag

The <article> tag defines independent, self-contained content.

Example: <article><h2>Article Title</h2>...</article>

<aside> - Aside Tag

The <aside> tag defines content aside from the main content (like a sidebar).

Example: <aside>Related links...</aside>

<menu> - Menu/Toolbar

The <menu> tag represents a toolbar or menu of commands. It can contain list items or other menu content.

Example: <menu><li><button>Copy</button></li><li><button>Paste</button></li></menu>

Live Example:

7. Tables

Tags for creating and structuring data tables

<table> - Table Tag

The <table> tag defines a table for displaying data in rows and columns.

Example: <table><tr><td>Data</td></tr></table>

Live Example:

Name	Age
John	25
Jane	30

<tr> - Table Row

The <tr> tag defines a row in a table.

Example: <tr><td>Cell 1</td><td>Cell 2</td></tr>

<td> - Table Data Cell

The <td> tag defines a standard data cell in a table.

Example: <td>Table data</td>

<th> - Table Header Cell

The <th> tag defines a header cell in a table.

Example: <th>Column Header</th>

8. Forms

Tags for creating interactive forms and user input elements

<form> - Form Tag

The <form> tag defines an HTML form for user input.

Example: <form action="/submit">...</form>

<input> - Input Field

The <input> tag defines an input field where users can enter data. It has many types and can be easily styled with CSS.

Example: <input type="text" name="username">

Common Input Types:

text:

email:

password:

number:

tel:

url:

search:

date:

time:

datetime-local:

color:

range:

file:

checkbox: I agree to terms

radio:

Option 1 Option 2

CSS Tip: Use :focus, :hover, and transition for smooth interactions!

<button> - Button Tag

The <button> tag defines a clickable button.

Example: <button>Click me</button>

Live Example:

<label> - Label Tag

The <label> tag defines a label for an input element.

Example: <label for="email">Email:</label>

<select> - Dropdown List

The <select> tag creates a dropdown list.

Example: <select><option>Option 1</option></select>

Live Example:

<option> - Dropdown Option

The <option> tag defines an option in a dropdown list.

Example: <option value="1">Option 1</option>

<textarea> - Text Area

The <textarea> tag defines a multi-line text input control.

Example: <textarea rows="4" cols="50"></textarea>

Live Example:

<datalist> - Autocomplete Options

The <datalist> tag provides a list of predefined options for an input element (autocomplete).

Example: <input list="browsers"><datalist id="browsers">...</datalist>

Live Example:

<output> - Output Element

The <output> tag represents the result of a calculation or user action.

Example: <output>Result: 42</output>

Live Example:

Result: 42

9. Semantic HTML5

Modern HTML5 tags that provide meaning to document structure

<header> - Header Section

The <header> tag defines a header section for a document or section.

Example: <header><h1>Site Title</h1></header>

<footer> - Footer Section

The <footer> tag defines a footer section for a document or section.

<nav> - Navigation Section

The <nav> tag defines a section of navigation links.

Example: <nav><a href="/home">Home</a></nav>

<main> - Main Content

The <main> tag specifies the main content of a document.

Example: <main>Main content here</main>

<section> - Section Tag

The <section> tag defines a thematic grouping of content.

Example: <section><h2>About</h2>...</section>

<article> - Article Tag

The <article> tag defines independent, self-contained content.

Example: <article><h2>Article Title</h2>...</article>

<aside> - Aside Tag

The <aside> tag defines content aside from the main content (like a sidebar).

Example: <aside>Related links...</aside>

11. Modern Interactive Elements

Contemporary HTML5 tags for interactive and enhanced user experiences

<details> / <summary> - Collapsible Content

The <details> tag creates a disclosure widget that can be toggled open/closed. <summary> provides the visible heading.

Example: <details><summary>Click to expand</summary>Hidden content</details>

Live Example:

Click to expand

This content is hidden until you click the summary!

<details> with name - Accordion Group

Multiple <details> elements with the same name attribute behave like radio buttons - only one can be open at a time.

Example: <details name="accordion"><summary>Section 1</summary>...</details>

Live Example:

Section 1

Content for section 1. Try opening another section!

Section 2

Content for section 2. Opening this closes Section 1.

Section 3

Content for section 3. This is an accordion pattern!

<dialog> - Dialog Box

The <dialog> tag represents a dialog box or modal window.

Example: <dialog id="myDialog">This is a dialog</dialog>

Live Example:

<mark> - Highlighted Text

The <mark> tag highlights or marks text for reference or notation purposes.

Example: <mark>highlighted text</mark>

Live Example: This is highlighted text in a sentence.

<progress> - Progress Bar

The <progress> tag represents the progress of a task.

Example: <progress value="70" max="100"></progress>

Live Example:

70% complete

<meter> - Gauge/Meter

The <meter> tag represents a scalar measurement within a known range (like a gauge).

Example: <meter value="6" min="0" max="10"></meter>

Live Example:

6 out of 10

<time> - Time/Date

The <time> tag represents a specific time or date in a machine-readable format.

Example: <time datetime="2026-01-03">January 3, 2026</time>

Live Example: The event is on January 3, 2026.

<datalist> - Autocomplete Options

The <datalist> tag provides a list of predefined options for an input element (autocomplete).

Example: <input list="browsers"><datalist id="browsers">...</datalist>

Live Example:

<figure> / <figcaption> - Figure with Caption

The <figure> tag groups media content with a caption defined by <figcaption>.

Example: <figure><img src="photo.jpg"><figcaption>Caption</figcaption></figure>

Live Example:

<output> - Output Element

The <output> tag represents the result of a calculation or user action.

Example: <output>Result: 42</output>

Live Example:

Result: 42

<picture> / <source> - Responsive Images

The <picture> tag contains multiple <source> elements for responsive images that adapt to different screen sizes.

Example: <picture><source media="(min-width: 800px)" srcset="large.jpg"><img src="small.jpg"></picture>

Live Example:

Resize your browser to see the image change!

<template> - Template Element

The <template> tag holds HTML content that is not rendered when the page loads but can be cloned and inserted via JavaScript.

Example: <template id="myTemplate"><p>Template content</p></template>

Visual Note: Templates are invisible by default and used for JavaScript templating.

<kbd> - Keyboard Input

The <kbd> tag represents keyboard input or user input from other sources.

Example: Press <kbd>Ctrl</kbd> + <kbd>C</kbd>

Live Example: Press Ctrl + C to copy.

<abbr> - Abbreviation

The <abbr> tag defines an abbreviation or acronym, with an optional title for the full description.

Example: <abbr title="HyperText Markup Language">HTML</abbr>

Live Example: HTML (hover to see full text)

<wbr> - Word Break Opportunity

The <wbr> tag suggests where text can break if needed (for long words or URLs).

Example: verylongword<wbr>continuation

Live Example:

supercalifragilisticexpialidocious

<sub> / <sup> - Subscript & Superscript

The <sub> tag creates subscript text, while <sup> creates superscript text.

Example: H<sub>2</sub>O or x<sup>2</sup>

Live Example: H₂O (water) and E=mc² (Einstein's equation)

<small> - Small Text

The <small> tag represents side comments or small print (like copyright or legal text).

10. Scripting & Graphics

Tags for JavaScript, CSS, dynamic content, and graphics rendering

<script> - Script Tag

The <script> tag embeds or references JavaScript code.

Example: <script src="script.js"></script>

<style> - Style Tag

The <style> tag defines CSS styles for a document.

Example: <style>body { color: blue; }</style>

<template> - Template Element

The <template> tag holds HTML content that is not rendered when the page loads but can be cloned and inserted via JavaScript.

Example: <template id="myTemplate"><div>Template content</div></template>

Live Example:

<canvas> - Canvas Tag

The <canvas> tag is used to draw graphics via JavaScript.

Example: <canvas id="myCanvas" width="200" height="100"></canvas>

Live Example:

<svg> - SVG Graphics

The <svg> tag defines Scalable Vector Graphics.

Example: <svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>

Live Example: