<html>
<div>
<p>
<img>
<a>
</>

📝 Complete HTML Tags Reference

Comprehensive guide to all HTML elements with examples, use cases, and live demonstrations

<html>
<head>
<body>
<div>
<p>
<img>
<a>

HTML Tags Statistics

140+
Total HTML Tags
12
Categories
HTML5
Latest Standard

🏗️ Document Structure Tags

Fundamental tags that define the basic structure and metadata of an HTML document

Element Description Example Use Case & Output
<!DOCTYPE> Declares the document type and HTML version
<!DOCTYPE html>
Use Case:
Must be the first line in HTML5 documents to ensure proper rendering
Output:
Tells browser to use HTML5 standards
<html> Root element that wraps all content on the page
<html lang="en"> <!-- content --> </html>
Use Case:
Container for entire HTML document, includes lang attribute for accessibility
Output:
Defines document boundaries
<head> Contains metadata about the document
<head> <title>Page Title</title> <meta charset="UTF-8"> </head>
Use Case:
Contains title, meta tags, links to CSS/JS files, not visible to users
Output:
Not displayed on page
<body> Contains all visible content of the webpage
<body> <h1>Welcome</h1> <p>Content here</p> </body>
Use Case:
All visible content like text, images, links goes inside body
Output:

Welcome

Content here
<title> Sets the title shown in browser tab
<title>My Website</title>
Use Case:
Appears in browser tab, bookmarks, and search results
Output:
Shows "My Website" in browser tab
<meta> Provides metadata about the HTML document
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width">
Use Case:
Character encoding, viewport settings, SEO descriptions
Output:
Not visible, affects page behavior
<link> Links external resources like CSS files
<link rel="stylesheet" href="style.css">
Use Case:
Link CSS files, fonts, favicons, and other external resources
Output:
Applies external styles to page
<script> Embeds or references JavaScript code
<script src="script.js"></script> <script>alert('Hello');</script>
Use Case:
Add interactivity, dynamic behavior, and functionality
Output:
Executes JavaScript code
<style> Contains CSS styles for the document
<style> body { background: blue; } </style>
Use Case:
Internal CSS styles, usually placed in head section
Output:
Applies styles to page elements
<base> Sets base URL for all relative URLs in document
<base href="https://example.com/">
Use Case:
Useful when all links should be relative to a specific base URL
Output:
Affects all relative links

📝 Text Content Tags

Tags used to structure and format text content, including headings, paragraphs, and text formatting

Element Description Example Use Case & Output
<h1> - <h6> Heading elements from largest (h1) to smallest (h6)
<h1>Main Title</h1> <h2>Subtitle</h2> <h3>Section</h3>
Use Case:
Create document hierarchy, improve SEO and accessibility
Output:

Main Title

Subtitle

Section
<p> Paragraph element for blocks of text
<p>This is a paragraph of text.</p>
Use Case:
Main text content, articles, descriptions
Output:

This is a paragraph of text.
<br> Line break element (self-closing)
First line<br>Second line
Use Case:
Force line breaks in addresses, poems, or short lines
Output:
First line
Second line
<hr> Horizontal rule/line separator
Section 1<hr>Section 2
Use Case:
Separate content sections, thematic breaks
Output:
Section 1
Section 2
<pre> Preformatted text with preserved whitespace
<pre> Code here with spacing </pre>
Use Case:
Display code, ASCII art, or formatted text
Output:
  Code here
    with spacing
<blockquote> Block-level quotation element
<blockquote cite="source"> "Quote text here" </blockquote>
Use Case:
Long quotations, testimonials, cited content
Output:
"Quote text here"
<address> Contact information for author or owner
<address> 123 Main St<br> City, State 12345 </address>
Use Case:
Contact details, author information, business addresses
Output:
123 Main St
City, State 12345
<bdi> Isolates text direction in bidirectional text environments
<p>Usernames: <bdi>علي</bdi>, <bdi>John</bdi></p>
Use Case:
When inserting user-generated names or content into a multilingual site to preserve correct direction
Output:

Usernames: علي, John
<bdo> Overrides the text direction (LTR or RTL) manually
<p><bdo dir="rtl">This is reversed text.</bdo></p>
Use Case:
Forcing direction on content (e.g., for Arabic/Hebrew styling or testing)
Output:

This is reversed text.

✨ Text Formatting Tags

Inline elements used to format and style text content for emphasis, importance, and semantic meaning

Element Description Example Use Case & Output
<strong> Strong importance, typically bold
<strong>Important text</strong>
Use Case:
Emphasize important content, warnings, key points
Output:
Important text
<em> Emphasized text, typically italic
<em>Emphasized text</em>
Use Case:
Stress emphasis, foreign words, technical terms
Output:
Emphasized text
<b> Bold text without semantic importance
<b>Bold text</b>
Use Case:
Stylistic bold text, keywords, product names
Output:
Bold text
<i> Italic text without semantic emphasis
<i>Italic text</i>
Use Case:
Stylistic italic text, icons, alternative voice
Output:
Italic text
<u> Underlined text
<u>Underlined text</u>
Use Case:
Misspelled words, proper names in Chinese text
Output:
Underlined text
<small> Smaller text, fine print
<small>Fine print text</small>
Use Case:
Copyright notices, disclaimers, side comments
Output:
Fine print text
<mark> Highlighted/marked text
<mark>Highlighted text</mark>
Use Case:
Search results, important passages, annotations
Output:
Highlighted text
<del> Deleted/removed text
<del>Deleted text</del>
Use Case:
Show removed content, document changes, corrections
Output:
Deleted text
<ins> Inserted/added text
<ins>Inserted text</ins>
Use Case:
Show added content, document updates, additions
Output:
Inserted text
<sub> Subscript text
H<sub>2</sub>O
Use Case:
Chemical formulas, mathematical expressions, footnotes
Output:
H2O
<sup> Superscript text
E=mc<sup>2</sup>
Use Case:
Mathematical powers, ordinal numbers, footnote references
Output:
E=mc2
<code> Inline code element
<code>console.log()</code>
Use Case:
Code snippets, function names, programming terms
Output:
console.log()
<kbd> Keyboard input element
Press <kbd>Ctrl+C</kbd>
Use Case:
Keyboard shortcuts, user input instructions
Output:
Press Ctrl+C
<samp> Sample output from computer program
<samp>Error: File not found</samp>
Use Case:
Program output, error messages, console output
Output:
Error: File not found
<var> Variable in mathematical or programming context
<var>x</var> = 10
Use Case:
Mathematical variables, programming variables
Output:
x = 10

📋 List Tags

Elements for creating ordered, unordered, and definition lists to organize content

Element Description Example Use Case & Output
<ul> Unordered list container
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Use Case:
Bullet point lists, navigation menus, feature lists
Output:
  • Item 1
  • Item 2
<ol> Ordered list container
<ol> <li>First step</li> <li>Second step</li> </ol>
Use Case:
Numbered lists, instructions, rankings, procedures
Output:
  1. First step
  2. Second step
<li> List item element
<li>List item content</li>
Use Case:
Individual items within ul or ol lists
Output:
  • List item content
    		•
    <dl> Description list container
    <dl> <dt>Term</dt> <dd>Definition</dd> </dl>
    Use Case:
    Glossaries, metadata, name-value pairs
    Output:
    Term
    Definition
    <dt> Description term
    <dt>HTML</dt>
    Use Case:
    Terms being defined in description lists
    Output:
    HTML
    <dd> Description definition
    <dd>HyperText Markup Language</dd>
    Use Case:
    Definitions or descriptions in description lists
    Output:
    HyperText Markup Language

    🎬 Multimedia Tags

    Elements for embedding images, audio, video, and other multimedia content

    Element Description Example Use Case & Output
    <img> Image element (self-closing)
    <img src="image.jpg" alt="Description" width="200">
    Use Case:
    Photos, illustrations, icons, logos, graphics
    Output:
    Image
    <video> Video content element
    <video controls width="320"> <source src="video.mp4" type="video/mp4"> Your browser doesn't support video. </video>
    Use Case:
    Movie clips, tutorials, presentations, advertisements
    Output:
    Video Player
    <audio> Audio content element
    <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser doesn't support audio. </audio>
    Use Case:
    Music, podcasts, sound effects, voice recordings
    Output:
    Audio Player
    <source> Media resource for video/audio
    <source src="video.webm" type="video/webm">
    Use Case:
    Multiple format support for cross-browser compatibility
    Output:
    Provides media source (not visible)
    <track> Text tracks for video/audio
    <track kind="subtitles" src="subs.vtt" srclang="en">
    Use Case:
    Subtitles, captions, descriptions for accessibility
    Output:
    Provides text tracks (not visible)
    <embed> Embeds external content
    <embed src="document.pdf" type="application/pdf" width="500" height="600">
    Use Case:
    PDFs, Flash content, plugins, external applications
    Output:
    Embedded Content
    <object> Generic embedded object
    <object data="movie.swf" type="application/x-shockwave-flash"> <param name="movie" value="movie.swf"> </object>
    Use Case:
    Flash content, Java applets, multimedia objects
    Output:
    Object Content
    <param> Parameters for object element
    <param name="autoplay" value="false">
    Use Case:
    Configure embedded objects, plugin parameters
    Output:
    Sets object parameters (not visible)
    <iframe> Inline frame for embedding content
    <iframe src="https://example.com" width="500" height="300"></iframe>
    Use Case:
    Embed websites, maps, videos, social media content
    Output:
    Embedded Page
    <picture> Responsive image container
    <picture> <source media="(min-width: 800px)" srcset="large.jpg"> <img src="small.jpg" alt="Image"> </picture>
    Use Case:
    Responsive images, art direction, different formats
    Output:
    Responsive Image
    <figure> Self-contained content with caption
    <figure> <img src="chart.png" alt="Sales Chart"> <figcaption>Q1 Sales Data</figcaption> </figure>
    Use Case:
    Images with captions, diagrams, code examples
    Output:
    Chart
    Q1 Sales Data
    <figcaption> Caption for figure element
    <figcaption>Image caption text</figcaption>
    Use Case:
    Captions, descriptions, credits for figures
    Output:
    Image caption text

    📊 Table Tags

    Elements for creating structured tabular data with rows, columns, headers, and captions

    Table in Short Table in Detail
    Element Description Example Use Case & Output
    <table> Table container element
    <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>25</td> </tr> </table>
    Use Case:
    Data tables, pricing tables, schedules, comparisons
    Output:
    Name Age
    John 25
    <tr> Table row element
    <tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
    Use Case:
    Horizontal rows of data in tables
    Output:
    Cell 1 Cell 2
    <td> Table data cell
    <td>Data content</td>
    Use Case:
    Individual data cells within table rows
    Output:
    Data content
    <th> Table header cell
    <th>Header</th>
    Use Case:
    Column or row headers, table titles
    Output:
    Header
    <thead> Table header group
    <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead>
    Use Case:
    Group header rows, styling, accessibility
    Output:
    Column 1 Column 2
    <tbody> Table body group
    <tbody> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </tbody>
    Use Case:
    Group data rows, separate from header/footer
    Output:
    Data 1 Data 2
    <tfoot> Table footer group
    <tfoot> <tr> <td>Total</td> <td>$100</td> </tr> </tfoot>
    Use Case:
    Summary rows, totals, footer information
    Output:
    Total $100
    <caption> Table caption/title
    <caption>Sales Data 2024</caption>
    Use Case:
    Table titles, descriptions, accessibility
    Output:
    Sales Data 2024
    Sample data
    <colgroup> Column group for styling
    <colgroup> <col style="background-color: yellow"> <col span="2" style="background-color: red"> </colgroup>
    Use Case:
    Apply styles to entire columns
    Output:
    Groups columns for styling (not visible)
    <col> Column properties
    <col span="2" style="background-color: #f0f0f0">
    Use Case:
    Define column properties and styling
    Output:
    Defines column properties (not visible)

    📝 Form Tags

    Elements for creating interactive forms, input fields, and user data collection

    See a Form
    Element Description Example Use Case & Output
    <form> Form container element
    <form action="/submit" method="post"> <input type="text" name="username"> <button type="submit">Submit</button> </form>
    Use Case:
    Contact forms, login forms, surveys, data collection
    Output:
    <input> Input field (various types)
    <input type="text" name="name" placeholder="Enter name"> <input type="email" name="email"> <input type="password" name="pass"> <input type="checkbox" name="agree"> <input type="radio" name="gender" value="male">
    Use Case:
    Text input, email, passwords, checkboxes, radio buttons
    Output:
    <textarea> Multi-line text input
    <textarea name="message" rows="4" cols="50" placeholder="Enter message"></textarea>
    Use Case:
    Comments, messages, descriptions, long text input
    Output:
    <button> Clickable button element
    <button type="submit">Submit</button> <button type="button" onclick="alert('Hi')">Click Me</button> <button type="reset">Reset</button>
    Use Case:
    Form submission, actions, navigation, interactions
    Output:
    <select> Dropdown selection list
    <select name="country"> <option value="us">United States</option> <option value="uk">United Kingdom</option> <option value="ca">Canada</option> </select>
    Use Case:
    Country selection, categories, options, choices
    Output:
    <option> Option in select dropdown
    <option value="red" selected>Red</option>
    Use Case:
    Individual choices in dropdown menus
    Output:
    <optgroup> Option group in select
    <optgroup label="Colors"> <option value="red">Red</option> <option value="blue">Blue</option> </optgroup>
    Use Case:
    Group related options, organize dropdown choices
    Output:
    <label> Label for form controls
    <label for="username">Username:</label> <input type="text" id="username" name="username">
    Use Case:
    Accessibility, form field descriptions, click targets
    Output:
    <fieldset> Group related form controls
    <fieldset> <legend>Personal Info</legend> <input type="text" name="name"> <input type="email" name="email"> </fieldset>
    Use Case:
    Group related fields, form sections, accessibility
    Output:
    Personal Info
    <legend> Caption for fieldset
    <legend>Contact Information</legend>
    Use Case:
    Fieldset titles, form section headers
    Output:
    Contact Information
    <datalist> Predefined options for input
    <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
    Use Case:
    Autocomplete suggestions, predefined options
    Output:
    Provides autocomplete suggestions
    <output> Result of calculation or user action
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> + <input type="number" id="b" value="50"> = <output name="result" for="a b">100</output> </form>
    Use Case:
    Calculations, form results, dynamic values
    Output:
    + = 100

    🏛️ Semantic Structure Tags

    HTML5 semantic elements that provide meaning and structure to web content for better accessibility and SEO

    Element Description Example Use Case & Output
    <header> Header section of document or section
    <header> <h1>Site Title</h1> <nav>Navigation</nav> </header>
    Use Case:
    Site headers, article headers, section introductions
    Output:

    Site Title
    <main> Main content area of document
    <main> <article>Main article content</article> <aside>Sidebar content</aside> </main>
    Use Case:
    Primary content area, skip navigation target
    Output:
    Main article content
    Sidebar content
    <footer> Footer section of document or section
    <footer> <p>© 2024 Company Name</p> <nav>Footer links</nav> </footer>
    Use Case:
    Site footers, article footers, copyright info
    Output:

    © 2024 Company Name
    <article> Independent, self-contained content
    <article> <h2>Article Title</h2> <p>Article content goes here...</p> <footer>Published: Jan 1, 2024</footer> </article>
    Use Case:
    Blog posts, news articles, forum posts, comments
    Output:

    Article Title

    Article content goes here...

    Published: Jan 1, 2024
    <section> Thematic grouping of content
    <section> <h2>Section Title</h2> <p>Section content...</p> </section>
    Use Case:
    Document sections, chapters, thematic groups
    Output:

    Section Title

    Section content...
    <aside> Content aside from main content
    <aside> <h3>Related Links</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </aside>
    Use Case:
    Sidebars, related content, advertisements, pull quotes
    Output:
    <details> Disclosure widget for additional details
    <details> <summary>Click to expand</summary> <p>Hidden content that can be shown/hidden</p> </details>
    Use Case:
    FAQ sections, expandable content, progressive disclosure
    Output:
    Click to expand

    Hidden content that can be shown/hidden
    <summary> Summary/caption for details element
    <summary>Show more information</summary>
    Use Case:
    Clickable heading for details element
    Output:
    ▶ Show more information
    <time> Date/time element
    <time datetime="2024-01-15">January 15, 2024</time> <time datetime="2024-01-15T14:30">2:30 PM</time>
    Use Case:
    Publication dates, event times, machine-readable dates
    Output:

    🎮 Interactive Elements

    Elements that provide user interaction, dynamic content, and enhanced user experience

    Element Description Example Use Case & Output
    <dialog> Dialog box or modal window
    <dialog id="myDialog"> <p>This is a dialog box</p> <button onclick="document.getElementById('myDialog').close()">Close</button> </dialog> <button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
    Use Case:
    Modal dialogs, confirmations, popup windows
    Output:
    Creates modal dialog window
    <progress> Progress indicator
    <progress value="70" max="100">70%</progress>
    Use Case:
    Loading bars, completion status, file uploads
    Output:
    70% 70%
    <meter> Scalar measurement within range
    <meter value="6" min="0" max="10">6 out of 10</meter> <meter value="0.6">60%</meter>
    Use Case:
    Ratings, scores, disk usage, temperature gauges
    Output:
    6 out of 10 6/10

    📦 Generic Container Tags

    Generic elements used for grouping, styling, and structuring content without semantic meaning

    Element Description Example Use Case & Output
    <div> Generic block-level container
    <div class="container"> <p>Content inside div</p> </div>
    Use Case:
    Layout containers, styling wrappers, grouping elements
    Output:

    Content inside div
    <span> Generic inline container
    <p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>
    Use Case:
    Inline styling, text highlighting, JavaScript targets
    Output:

    This is highlighted text in a paragraph.

    ⚠️ Deprecated/Obsolete Tags

    HTML elements that are deprecated or obsolete and should not be used in modern web development

    Element Description Example Use Case & Output
    <font> Font styling (use CSS instead)
    <font color="red" size="4">Red text</font>
    Use Case:
    ❌ Deprecated - Use CSS for styling
    Output:
    Red text
    Use CSS: style="color:red; font-size:1.2rem;"
    <center> Center alignment (use CSS instead)
    <center>Centered content</center>
    Use Case:
    ❌ Deprecated - Use CSS text-align: center
    Output:
    Centered content
    Use CSS: text-align: center
    <marquee> Scrolling text (use CSS animations)
    <marquee>Scrolling text</marquee>
    Use Case:
    ❌ Deprecated - Use CSS animations
    Output:
    Scrolling text
    Use CSS: @keyframes for animations
    <blink> Blinking text (removed from browsers)
    <blink>Blinking text</blink>
    Use Case:
    ❌ Obsolete - No longer supported
    Output:
    Blinking text
    No longer works in modern browsers
    <frame> Frame for framesets (use iframe instead)
    <frame src="page.html" name="content">
    Use Case:
    ❌ Deprecated - Use iframe for embedding
    Output:
    Frame content
    Use <iframe> instead
    <frameset> Container for frames (obsolete)
    <frameset cols="50%,50%"> <frame src="left.html"> <frame src="right.html"> </frameset>
    Use Case:
    ❌ Obsolete - Use CSS Grid or Flexbox
    Output:
    Frameset layout
    Use modern CSS layout methods
    Document Structure
    Text Content
    Text Formatting
    Links & Navigation
    Lists
    Multimedia
    Tables
    Forms
    Semantic Structure
    Interactive Elements
    Containers
    Deprecated Tags
    ↑