Rajesh Rathod

Available for New Projects

HTML Tags

Written by

Rajesh Rathod

in

I’m clustering HTML tags into groups based on their importance and similarities.

A. Basic Structure Tags (Essential for Every Page)

These tags form the skeleton of an HTML document.

  • <!DOCTYPE html> – Defines the document type.
  • <html> – The root element.
  • <head> – Contains metadata (not displayed on the page).
  • <title> – Sets the page title.
  • <meta> – Provides metadata (like character set, viewport settings).
  • <link> – Links external stylesheets or resources.
  • <style> – Embeds CSS inside HTML.
  • <script> – Embeds JavaScript inside HTML.
  • <body> – Contains all visible content.

B. Semantic Layout & Structural Tags

Used to create meaningful sections of a webpage.

  • <header> – Defines page header.
  • <footer> – Defines page footer.
  • <section> – Defines a thematic section.
  • <article> – Defines independent content.
  • <aside> – Defines side content (sidebar).
  • <main> – Main content area.
  • <div> – Generic container for styling.
  • <span> – Inline container for styling.

C. Meta & SEO Tags

Used for metadata and search engine optimization.

  • <meta charset="UTF-8"> – Defines character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Responsive design.
  • <meta name="description" content="Page description"> – SEO description.
  • <meta name="keywords" content="keywords"> – Keywords for SEO.
  • <meta name="author" content="Author Name"> – Defines the author.

1. Text Formatting & Content Tags

Used to structure and format textual content.

  • <h1> to <h6> – Headings (largest to smallest).
  • <p> – Paragraphs.
  • <br> – Line break.
  • <hr> – Horizontal line.
  • <strong> – Bold text (semantic).
  • <b> – Bold text (non-semantic).
  • <em> – Italic (semantic).
  • <i> – Italic (non-semantic).
  • <u> – Underline.
  • <mark> – Highlight text.
  • <small> – Small text.
  • <del> – Strikethrough text.
  • <sup> – Superscript.
  • <sub> – Subscript.

2. Links & Navigation

Used to create hyperlinks and navigation menus.

  • <a> – Anchor tag for links.
  • href (attribute) – Specifies the link URL.
  • target="_blank" – Opens link in a new tab.
  • <nav> – Defines navigation sections.

3. Lists

Used to structure content in list format.

  • <ul> – Unordered list.
  • <ol> – Ordered list.
  • <li> – List item.
  • <dl> – Description list.
  • <dt> – Description term.
  • <dd> – Description definition.

4. Tables

Used to display tabular data.

  • <table> – Defines a table.
  • <tr> – Table row.
  • <th> – Table header cell.
  • <td> – Table data cell.
  • <thead> – Groups header content.
  • <tbody> – Groups body content.
  • <tfoot> – Groups footer content.
  • colspan & rowspan – Merges table cells.

5. Media Elements

Used to embed multimedia content.

  • <img> – Displays images (src attribute specifies the image URL).
  • <audio> – Embeds audio files.
  • <video> – Embeds video files.
  • <source> – Specifies multiple media sources.
  • <iframe> – Embeds external web pages.
  • <figure> – Groups media with a caption.
  • <figcaption> – Provides a caption for media.

6. Forms & Input Elements

Used to collect user data.

  • <form> – Form container.
  • <input> – Input field (text, password, email, etc.).
  • <textarea> – Multi-line text input.
  • <select> – Dropdown list.
  • <option> – Option inside a dropdown.
  • <button> – Clickable button.
  • <label> – Label for input.
  • <fieldset> – Groups form elements.
  • <legend> – Caption for fieldset.

7. Interactive & Advanced Elements

Used for dynamic and interactive content.

  • <details> – Creates a collapsible section.
  • <summary> – Defines a summary for <details>.
  • <dialog> – Creates a modal dialog box.
  • <progress> – Displays progress (e.g., loading bar).
  • <meter> – Displays a measurement value.

More posts