List of All HTML Tags You’ll Find as a Web Developer!

All HTML Tags help structure web content using standardized elements like headings, paragraphs, images, forms, and media. Mastering these tags is essential for building responsive, accessible websites and ensuring browser compatibility and proper page rendering.
authorImageVarun Saharawat30 Oct, 2025
List of All HTML Tags You’ll Find as a Web Developer!

All HTML Tags: HTML (Hypertext Markup Language) is the backbone of web development, offering a structured framework to create and organise content on the internet. Through a series of tags, HTML defines the structure and presentation of web pages. Key tags include <html> for the document structure, <head> for metadata, <title> for page titles, and <body> for content.

Heading tags (<h1> to <h6>) establish hierarchy, while <p> signifies paragraphs. Links are formed with <a>, images with <img>, and lists with <ul> and <ol>. HTML is the cornerstone for crafting visually appealing and functional websites, providing a foundation for CSS (Cascading Style Sheets) and JavaScript to enhance interactivity.

In this blog, we’ll talk about All HTML Tags that you’ll encounter as a web developer, its examples, and much more

Html Codes List

HTML Codes List includes essential elements like <!DOCTYPE html>, <html>, <head>, <body>, <title>, <p>, <a>, and more. These codes form the basic structure of a webpage, helping you create and organize content effectively using standard HTML syntax.

Html Codes for Website

Whether you’re building a simple landing page or a full website, these ready-to-use HTML code snippets help you get started fast. Each example is copy-and-paste friendly and includes a short explanation so beginners know what to change.

1) Basic HTML Page Skeleton

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>My Website</title> <meta name="description" content="Short description of your page." /> </head> <body> <h1>Welcome to My Website</h1> <p>This is a basic HTML skeleton.</p> </body> </html>

Use this as the starting point for every page. The <meta> tags help with mobile responsiveness and SEO.

2) Header + Navigation Bar

<header> <nav> <a href="/">Home</a> | <a href="/about.html">About</a> | <a href="/contact.html">Contact</a> </nav> </header>

Simple, accessible navigation. Replace links with your page URLs.

3) Responsive Image with Alt Text

<img src="images/hero.jpg" alt="Person coding on a laptop" style="max-width:100%;height:auto;" />

Always include alt text for accessibility and SEO. max-width:100% keeps the image responsive.

4) Call-to-Action Button

<a href="/signup" class="btn">Get Started</a> <!-- Minimal CSS --> <style> .btn { display:inline-block; padding:10px 18px; background:#007BFF; color:#fff; text-decoration:none; border-radius:6px; } </style>

Use buttons for CTAs like signups or downloads.

5) Simple Contact Form

<form action="/submit-form" method="post"> <label>Name: <input type="text" name="name" required></label><br> <label>Email: <input type="email" name="email" required></label><br> <label>Message:<br><textarea name="message" rows="4" required></textarea></label><br> <button type="submit">Send</button> </form>

Always validate server-side, and use required for basic client-side validation.

6) Responsive Two-Column Layout (CSS Grid)

<div class="grid"> <main>Content area</main> <aside>Sidebar</aside> </div><style> .grid { display:grid; grid-template-columns: 2fr 1fr; gap:20px; } @media (max-width:700px) { .grid { grid-template-columns: 1fr; } } </style>

Grid makes responsive layouts easy—columns stack on small screens.

7) Table for Data Display

<table> <thead><tr><th>Name</th><th>Role</th></tr></thead> <tbody> <tr><td>Amy</td><td>Designer</td></tr> <tr><td>Ravi</td><td>Developer</td></tr> </tbody> </table>

Use tables for tabular data only (not for layout).

8) Embedding a YouTube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" frameborder="0" allowfullscreen></iframe>

Replace VIDEO_ID and ensure the embed fits responsively with CSS when needed.

9) SEO-Friendly Meta Tags (Head Example)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Page Title | Brand</title> <meta name="description" content="One-line summary for search engines."> <link rel="canonical" href="https://example.com/current-page" /> </head>

Canonical tags prevent duplicate-content issues. Keep title and description unique per page.

10) Accessibility Tips

  • Use semantic tags: <header>, <main>, <nav>, <footer>.
  • Provide alt text for images.
  • Ensure color contrast for readability.
  • Use label elements with form fields for screen readers.

HTML Code Example

A simple HTML code example helps beginners understand how structure, tags, and elements work together to form a webpage. By practicing with clean, well-formatted snippets, you’ll quickly grasp how browsers interpret markup and display content visually.

HTML Codes for Practice

HTML codes for practice give learners real-world scenarios to experiment with headings, images, forms, and layouts. These hands-on exercises strengthen your foundational skills and build confidence to create complete webpages from scratch.

HTML Codes Color Sample

HTML color code samples show how hexadecimal, RGB, and HSL values generate specific shades on a webpage. Testing different color combinations helps you design visually appealing interfaces and maintain consistent branding across your site.

HTML Code for Homepage

A homepage HTML code example demonstrates how to structure navigation, hero sections, call-to-action buttons, and content blocks. Practicing this helps you create a well-organized, user-friendly landing page that loads fast and engages visitors instantly.

HTML Color Codes

HTML color codes define the exact shades used for text, backgrounds, borders, and UI elements. Understanding hex, RGB, and named colors allows you to customize designs with precision and maintain visual consistency on every page you build.

How Many Tags in HTML

HTML includes more than 140 standard tags, each designed to structure, format, and present web content effectively. While not all tags are used daily, understanding the core set helps you build functional, accessible, and SEO-friendly webpages with ease.

2 Types of Tags in HTML

HTML tags fall into two main types: paired tags (with opening and closing tags) and self-closing tags (single, standalone tags). Paired tags wrap content and define structure, while self-closing tags handle tasks like line breaks, images, and metadata.

30 HTML Tags and Their Functions

A list of 30 essential HTML tags covers commonly used elements like <html>, <head>, <body>, <a>, <img>, <p>, and <div>. These tags define layout, add media, link pages, and control overall structure, making them key to building modern web interfaces.

All HTML Tags and Attributes

All HTML tags and their attributes form the full vocabulary of web markup, enabling developers to describe content precisely. Attributes like class, id, href, and src modify tag behavior, giving you granular control over styling, layout, and functionality.

Basic HTML Tags List

A basic HTML tags list includes foundational elements such as headings, paragraphs, links, images, lists, and tables. Mastering these tags helps beginners construct clean, well-structured pages that display correctly across devices and browsers.

HTML Tags List and Uses

An HTML tags list with uses explains what each element does and when to apply it—whether for layout (<div>), formatting (<strong>), media (<audio>), or navigation (<nav>). Knowing their uses helps you write semantic, accessible, and efficient code.

HTML Tags List with Explanation

An HTML tags list with explanations provides concise details about each tag’s role, expected attributes, and typical placement in a webpage. This reference helps learners understand how elements interact and ensures proper, standards-compliant HTML coding.

Types of Tags in HTML

HTML Tags can be categorized into different types based on their use:
  1. Structural Tags
<html>, <head>, <body>, <title>
  1. Text Formatting Tags
<p>, <b>, <i>, <u>, <strong>, <em>
  1. Heading Tags
<h1> to <h6>
  1. List Tags
<ul> – Unordered List <ol> – Ordered List <li> – List Item

How many list tags are in HTML?

HTML has 3 main list tags:
  • <ul> (unordered list)
  • <ol> (ordered list)
  • <dl> (description list)

HTML Tags List

HTML Tags List includes the core building blocks of web pages, such as headings (<h1> to <h6>), paragraphs (<p>), links (<a>), images (<img>), lists (<ul>, <ol>, <li>), tables (<table>), and many more for structuring content.

HTML Tags List with Examples

HTML Tags List with Examples provides a practical reference to common tags like <p> for paragraphs, <a> for links, <img> for images, and <ul> for lists—each paired with sample code snippets to illustrate how they're used in real HTML documents.

What Are the 100 Tags in Html with Examples

Here's a comprehensive list of 100 HTML tags with examples, grouped by category to help you better understand their purpose and usage. Let's explore list of all html tags with examples:

1. Basic HTML Structure Tags

Tag Description Example
<html> Root of the HTML document <html> ... </html>
<head> Metadata container <head> ... </head>
<body> Main document content <body> ... </body>
<title> Page title (in browser tab) <title>My Page</title>
<!DOCTYPE> Declares document type <!DOCTYPE html>

2. Text Formatting Tags

Tag Description Example
<p> Paragraph <p>This is a paragraph.</p>
<br> Line break Hello<br>World
<hr> Horizontal line <hr>
<h1> to <h6> Headings <h1>Heading 1</h1>
<strong> Bold (semantic) <strong>Important</strong>
<b> Bold (visual only) <b>Bold Text</b>
<i> Italic (visual only) <i>Italic Text</i>
<em> Emphasis (semantic italic) <em>Emphasized</em>
<mark> Highlighted text <mark>Highlight</mark>
<small> Smaller text <small>Note</small>
<sub> Subscript H<sub>2</sub>O
<sup> Superscript E = mc<sup>2</sup>
<u> Underline <u>Underlined</u>
<del> Deleted text <del>Old</del>
<ins> Inserted text <ins>New</ins>
Tag Description Example
<a> Hyperlink <a href="https://example.com">Visit</a>
<link> External resources (e.g., CSS) <link rel="stylesheet" href="style.css">
<nav> Navigation block <nav><a href="#home">Home</a></nav>
Tag Description Example
<img> Image <img src="img.jpg" alt="Image">
<video> Video <video controls><source src="video.mp4"></video>
<audio> Audio <audio controls><source src="audio.mp3"></audio>
<source> Media source <source src="movie.mp4" type="video/mp4">
<track> Captions/subtitles <track src="subs.vtt" kind="subtitles">
<embed> External resource (e.g., PDF) <embed src="file.pdf">
Tag Description Example
<ul> Unordered list <ul><li>Item</li></ul>
<ol> Ordered list <ol><li>First</li></ol>
<li> List item <li>Element</li>
<dl> Description list <dl><dt>HTML</dt><dd>Markup</dd></dl>
<dt> Term in <dl> <dt>Term</dt>
<dd> Description in <dl> <dd>Definition</dd>
Tag Description Example
<table> Table container <table> ... </table>
<tr> Table row <tr> ... </tr>
<td> Table data cell <td>Data</td>
<th> Table header cell <th>Header</th>
<thead> Table header section <thead><tr><th>Col</th></tr></thead>
<tbody> Table body section <tbody><tr><td>Row</td></tr></tbody>
<tfoot> Table footer section <tfoot><tr><td>Foot</td></tr></tfoot>
<caption> Table caption/title <caption>Sales Data</caption>
<col> Column formatting <col span="2">
<colgroup> Group of columns <colgroup><col></colgroup>
Tag Description Example
<form> Form container <form> ... </form>
<input> User input <input type="text">
<textarea> Multi-line input <textarea></textarea>
<label> Form label <label for="name">Name</label>
<select> Dropdown <select><option>One</option></select>
<option> Dropdown item <option value="1">One</option>
<button> Button <button>Click</button>
<fieldset> Group form fields <fieldset><legend>Info</legend></fieldset>
<legend> Caption for <fieldset> <legend>User Info</legend>
<datalist> Predefined input list <datalist id="browsers"><option>Chrome</option></datalist>
<output> Output result <output>Result</output>
Tag Description Example
<header> Page or section header <header> ... </header>
<footer> Page or section footer <footer> ... </footer>
<section> Generic section <section> ... </section>
<article> Independent content <article> ... </article>
<aside> Sidebar content <aside> ... </aside>
<main> Main content <main> ... </main>
<div> Generic container <div> ... </div>
<span> Inline container <span> ... </span>
Tag Description Example
<script> JavaScript code <script>alert('Hi')</script>
<noscript> Shown if JS disabled <noscript>No JS</noscript>
<meta> Metadata <meta charset="UTF-8">
<style> Internal CSS <style>p{color:red}</style>
Tag Description Example
<details> Toggle details <details><summary>Click</summary>Info</details>
<summary> Visible heading in <details> <summary>More</summary>
<dialog> Dialog box <dialog open>Hi</dialog>

11. Deprecated/Obsolete Tags (for reference only)

Tag Description Example
<center> Center align <center>Centered</center>
<font> Font formatting <font color="red">Text</font>
<marquee> Scrolling text <marquee>Scroll</marquee>
Tag Description Example
<iframe> Inline frame (embed) <iframe src="page.html"></iframe>
<base> Base URL for links <base href="https://example.com/">
<time> Time value <time datetime="2025-07-30">Today</time>
<code> Code snippet <code>print()</code>
<kbd> Keyboard input <kbd>Ctrl</kbd>
<samp> Sample output <samp>Hello</samp>
<var> Variable name <var>x</var>
<bdi> Isolate bidirectional text <bdi>abc</bdi>
<bdo> Override text direction <bdo dir="rtl">Text</bdo>

All HTML Tags with Examples

HTML, which stands for Hypertext Markup Language, utilises tags to organise content on the internet. Below are key tags along with short examples: <p> Paragraph Tag </p> The <p> and </p> represent HTML tags, and the term "Paragraph Tag" signifies the HTML element, specifically the text displayed on the page. This tag arranges any text positioned between the <p> opening tag and the </p> closing tag as a regular paragraph or primary body text. <h2> Heading Tag </h2> In this instance, <h2> and </h2> serve as the HTML tags, and the term "Heading Tag" denotes the HTML element, specifically the heading visible on the page. Employing this tag will style any text located between the <h2> opening tag and the </h2> closing tag as a Heading 2, which is a type of subheading. <b> Bold Tag </b> In this case, the <b> and </b> are HTML tags, and the "Bold Tag" is the HTML element, which means the text on the page. This element makes the text between the <b> opening tag and the </b> closing tag appear bold. <i> Italic Tag </i> In this instance, the <i> and </i> represent HTML tags, and the "Italic Tag" is the HTML element, referring to the on-page text. This tag is used to style the text between the opening <i> tag and the closing </i> tag, making it appear in italic format. <u> Underline Tag </u> In this scenario, the <u> and </u> serve as HTML tags, and the "Underline Tag" is the HTML element, denoting the on-page text. The purpose of this tag is to style the text between the opening <u> tag and the closing </u> tag, rendering it in an underlined format. These tags form the foundation for building structured and visually appealing web pages.

All HTML Tags and Their Functions

All HTML Tags and Their Functions define how web content is structured and displayed. Tags like <p> define paragraphs, <a> creates links, <img> embeds images, and <div> organizes layout. Each tag serves a specific purpose to format and present web pages effectively. If in your mind there is a question What are the 10 basic HTML tags? Refer below listed ones.

Here’s a list of all html tags and their functions:
  • <!DOCTYPE html>: Declares the HTML version.
  • <html>: Wraps the entire HTML document.
  • <head>: Contains metadata like title, character set, styles, and scripts.
  • <title>: Sets the document title.
  • <body>: Contains the main content of the HTML document.
  • <h1> to <h6>: Define headings, where <h1> is the largest and <h6> is the smallest.
  • <p>: Represents paragraphs of text.
  • <a>: Creates hyperlinks, linking to another document or resource.
  • <img>: Embeds images.
  • <ul> and <ol>: Define unordered and ordered lists.
  • <li>: Represents list items within <ul> or <ol>.
  • <div>: Groups content for styling or layout purposes.
  • <span>: Applies styles to inline elements.
  • <br>: Inserts a line break within text.
  • <hr>: Represents a horizontal rule or line.
  • <strong> and <em>: Emphasise text with strong and emphasised importance, respectively.
  • <input>: Creates input fields for forms.
  • <form>: Wraps form elements for user input.
  • <table>, <tr>, <td>, <th>: Constructs tables, rows, and cells for tabular data.
  • <iframe>: Embeds external content, like a webpage or video, within the current document.
These tags, among others, provide the structure and functionality needed to create well-formed and interactive web pages.

List of 20 HTML Tags

Here are 20 additional HTML tags along with their brief descriptions:
  • <article>: Represents a self-contained piece of content that could be distributed and reused independently.
  • <aside>: Defines content aside from the page content, often used for sidebars.
  • <footer>: Represents the footer of a section or page.
  • <header>: Defines the header of a section or page.
  • <nav>: Defines a navigation menu.
  • <section>: Represents a generic section of content.
  • <main>: Wraps the main content of the document, excluding headers, footers, and sidebars.
  • <figure>: Represents any content that is referenced from the main content, such as images and diagrams.
  • <figcaption>: Provides a caption for the content inside a <figure> element.
  • <mark>: Highlights text for reference or notation.
  • <abbr>: Represents an abbreviation or acronym, with an optional expansion.
  • <address>: Represents contact information for the nearest <article> or <body> ancestor.
  • <time>: Represents a specific period in time or a range of time.
  • <progress>: Represents the completion progress of a task.
  • <metre>: Represents a scalar measurement within a known range.
  • <cite>: Represents the title of a creative work or the name of a person cited.
  • <code>: Represents a piece of computer code.
  • <pre>: Defines preformatted text, preserving both spaces and line breaks.
  • <blockquote>: Represents a section that is a quotation from another source.
  • <q>: Defines a short inline quotation.
These tags enhance the semantic structure of HTML, providing more specific meaning to different parts of the content.

Also Read: How to Center Text & Headers in CSS Using the Text-Align Property

How to Write a List in HTML?

Type Example Code
Unordered List html<br><ul><br> <li>HTML</li><br> <li>CSS</li><br></ul>
Ordered List html<br><ol><br> <li>Step 1</li><br> <li>Step 2</li><br></ol>

How Many Total Tags Are in HTML?

HTML Version Approx. Number of Tags
HTML5 100+ (including semantic, multimedia, and interactive tags)
The number may vary slightly as new specifications are released or deprecated.

What Are the 100 Tags in html?

However, here's a concise list of 100 HTML tags with brief descriptions:
  • <!DOCTYPE html>: HTML document type declaration.
  • <html>: Root element.
  • <head>: Contains metadata.
  • <title>: Sets the title of the document.
  • <body>: Main content container.
  • <h1> to <h6>: Headings of decreasing importance.
  • <p>: Paragraph.
  • <a>: Anchor for hyperlinks.
  • <img>: Embeds images.
  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.
  • <div>: Generic container.
  • <span>: Inline container.
  • <br>: Line break.
  • <hr>: Horizontal rule.
  • <strong>: Strong importance.
  • <em>: Emphasis.
  • <input>: Input field.
  • <form>: Form container.
  • <label>: Describes an <input> element.
  • <select>: Dropdown list.
  • <option>: Option in a <select> list.
  • <textarea>: Multiline text input.
  • <button>: Clickable button.
  • <table>: Table.
  • <tr>: Table row.
  • <td>: Table cell.
  • <th>: Table header cell.
  • <thead>: Table header section.
  • <tbody>: Table body section.
  • <tfoot>: Table footer section.
  • <caption>: Table caption.
  • <iframe>: Inline frame.
  • <audio>: Embeds audio.
  • <video>: Embeds video.
  • <source>: Defines media sources.
  • <nav>: Navigation container.
  • <header>: Header container.
  • <footer>: Footer container.
  • <aside>: Content aside from main content.
  • <article>: Independent content.
  • <section>: Generic section.
  • <main>: Main content area.
  • <figure>: Grouped content with a caption.
  • <figcaption>: Caption for a <figure>.
  • <mark>: Highlighted text.
  • <abbr>: Abbreviation or acronym.
  • <address>: Contact information.
  • <time>: Represents time.
  • <progress>: Progress bar.
  • <metre>: Scalar measurement.
  • <cite>: Title of a creative work.
  • <code>: Inline code.
  • <pre>: Preformatted text.
  • <blockquote>: Block-level quotation.
  • <q>: Inline quotation.
  • <sub>: Subscript text.
  • <sup>: Superscript text.
  • <del>: Deleted text.
  • <ins>: Inserted text.
  • <small>: Smaller text.
  • <b>: Bold text.
  • <i>: Italic text.
  • <u>: Underlined text.
  • <s>: Strikethrough text.
  • <dfn>: Definition term.
  • <kbd>: Represents keyboard input.
  • <samp>: Sample output.
  • <var>: Variable.
  • <div>: Division or section.
  • <span>: Inline division.
  • <style>: Internal style information.
  • <link>: External resource link.
  • <meta>: Metadata.
  • <script>: Embeds or links to scripts.
  • <noscript>: Provides alternate content if scripts are not supported.
  • <map>: Defines an image map.
  • <area>: Defines clickable areas in an image map.
  • <base>: Specifies base URL/target for all relative URLs.
  • <bdo>: Bi-directional override for text direction.
  • <col>: Defines attributes for table columns.
  • <colgroup>: Groups <col> elements.
  • <datalist>: Contains a set of <option> elements for use with <input list>.
  • <fieldset>: Groups form controls and labels.
  • <legend>: Describes the content of a <fieldset>.
  • <optgroup>: Groups <option> elements inside a <select>.
  • <object>: Embeds external resources.
  • <param>: Defines parameters for an <object>.
  • <output>: Represents the result of a calculation or user action.
  • <ruby>: Represents ruby annotations.
  • <rt>: Represents the pronunciation of characters presented in a ruby annotation.
  • <rp>: Provides fallback text for browsers that do not support ruby annotations.
  • <wbr>: Defines a possible line break opportunity.
  • <track>: Provides a timed text track for <audio> or <video> elements.
  • <canvas>: Used for drawing graphics via scripting (JavaScript).
  • <dialog>: Defines a dialog or a window.
  • <details>: Creates a disclosure widget for hiding/revealing additional content.
  • <summary>: Defines a summary or caption for the content of a <details> element.
  • <template>: Holds client-side content that can be cloned and inserted into the document by scripts.

Also Read: 5 Easy Ways to Insert Spaces in HTML

Which is the Biggest Tag in HTML?

Tag Why?
<h1> It is the largest heading tag in HTML, used for the main page title and most important heading.

Which is the Main Tag in HTML?

Tag Function
<html> It’s the root tag that wraps all the content and metadata of your HTML document.
<main> Represents the central content area of a webpage, excluding headers, sidebars, and footers.
Both are essential:
  • <html> is the structural root
<main> is the content-specific root

How to Check Your Site’s HTML Tags?

Checking your site's HTML tags involves inspecting the HTML code to ensure proper structure, correct usage, and adherence to web standards. Here's a step-by-step process to help you examine HTML tags on your website:
  • Open Your Web Browser:
  • Launch your preferred web browser.
  • Visit Your Website:
  • Navigate to the webpage you want to inspect.
  • Access Developer Tools:
  • Right-click on an element on the page.
  • Select "Inspect" or "Inspect Element" from the context menu. Alternatively, you can use keyboard shortcuts like Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac) to open Developer Tools.
  • Explore the HTML Structure:
  • In the Developer Tools, go to the "Elements" or "Inspector" tab. This section displays the HTML structure of your webpage.
  • Review HTML Tags:
  • Scroll through the HTML code to examine the tags.
  • Check for proper opening and closing tags, nesting, and attribute usage.
  • Identify Errors or Issues:
  • Look for any error messages or warnings in the console that might indicate HTML issues.
  • Pay attention to red highlighting or icons that indicate errors.
  • Validate HTML:
  • Use online HTML validation tools like W3C Markup Validation Service. Copy and paste your HTML code to identify any validation errors or warnings.
  • Check for Meta Tags:
  • Verify that important meta tags, such as <title>, <meta charset="UTF-8">, and <meta name="description">, are present and properly configured.
  • Ensure Accessibility:
  • Assess the use of semantic HTML tags to enhance accessibility. Use tags like <nav>, <header>, <main>, <footer>, etc., appropriately.
  • Optimise for SEO:
  • Confirm that critical SEO tags like <meta name="keywords"> and other meta tags for SEO are correctly implemented.
  • Mobile Responsiveness:
  • Check for the use of responsive design techniques and ensure that viewport meta tags like <meta name="viewport"> are configured properly.
  • Cross-Browser Compatibility:
  • Test your website in different browsers to ensure consistent rendering. Address any browser-specific issues with conditional comments or CSS resets.
By following this process, you can systematically review and verify the HTML tags on your website, promoting proper coding practices, and improving the overall quality and performance of your web pages.

Also Read: Know How to Add CSS to HTML with Examples

How Do Web Pages Read HTML Tags?

Web pages read HTML tags through a process called parsing, which is performed by web browsers. Here's a simplified explanation of how this process works:
  • Request and Retrieval:
  • When you enter a URL in your web browser, it sends a request to the server for the corresponding web page.
  • HTML Document Download:
  • The server responds by sending the HTML document associated with the requested webpage.
  • Parsing:
  • The web browser's rendering engine begins parsing the HTML document. Parsing involves breaking down the HTML code into a structured tree called the Document Object Model (DOM).
  • Tokenization and Lexical Analysis:
  • The parser tokenizer the HTML code, breaking it into individual elements (tags), attributes, and content. Lexical analysis helps identify the role of each token.
  • DOM Tree Construction:
  • As the parser identifies tags, it constructs a hierarchical tree structure known as the DOM. Each HTML tag becomes a node in this tree.
  • Render Tree Construction:
  • In addition to the DOM, the browser creates a render tree, which includes only the elements necessary for rendering (excluding hidden or non-visible elements).
  • Layout and Rendering:
  • The browser computes the layout of the page based on the render tree, determining the position and size of each element. Finally, the browser renders the visual representation of the page on the screen.
  • Script Execution:
  • If the HTML document contains JavaScript, the browser executes these scripts. JavaScript can manipulate the DOM, enhancing interactivity and dynamically modifying the content.
  • Styles and Visual Enhancements:
  • The browser applies CSS styles to the rendered elements, enhancing the visual presentation of the page.
  • User Interaction:
  • Users can interact with the rendered page, triggering events and further modifications to the DOM.
By interpreting HTML tags, browsers structure and present web content to users. The DOM serves as an interface for both scripting languages like JavaScript and the browser itself to interact with the document's structure, enabling dynamic and responsive web experiences. Making an engaging blog involves a harmonious blend of content and presentation. HTML tags play a pivotal role in enhancing the visual appeal and structure of your blog. From <head> for metadata to <p> for paragraphs, each tag contributes to a seamless reading experience. Leveraging <h1> to <h6> ensures a hierarchical organisation, while <a> facilitates effortless navigation with hyperlinks. Incorporating <img> and <blockquote> adds multimedia and quoted content for depth. Remember, a well-utilised set of HTML tags not only elevates the aesthetics but also elevates the user experience, making your blog more accessible and enjoyable for readers.

All HTML Tags PDF

If you're learning web development, having a complete HTML Tags PDF is extremely helpful. It lets you quickly revise every tag used in HTML—from basic structure tags to formatting, multimedia, semantic, and advanced HTML5 elements. Below is a complete, organized list of HTML tags that can be included in your PDF, along with explanations for beginners.

✔ What This “All HTML Tags PDF” Includes

A complete HTML reference containing:

  • Basic HTML structure tags
  • Text formatting tags
  • Forms & input tags
  • Table tags
  • List tags
  • Multimedia tags
  • Semantic HTML5 tags
  • Meta & SEO tags
  • Scripting and embedding tags
  • Deprecated tags list

This PDF helps both beginners and advanced learners get a quick, clean reference sheet for everyday coding.

✔ Complete HTML Tag List (For PDF Reference)

1. Basic Structure Tags

  • <html> – Root element
  • <head> – Contains metadata
  • <body> – Main visible content
  • <title> – Page title
  • <meta> – SEO & metadata
  • <link> – Link external files
  • <style> – Internal CSS
  • <script> – JavaScript

2. Text Formatting Tags

  • <p> – Paragraph
  • <b> / <strong> – Bold text
  • <i> / <em> – Italic text
  • <u> – Underline
  • <mark> – Highlight
  • <small> – Smaller text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sup> – Superscript
  • <sub> – Subscript
  • <br> – Line break
  • <hr> – Horizontal line

3. Heading Tags

  • <h1> to <h6> – Headings

4. Hyperlink & Navigation Tags

  • <a> – Anchor/link
  • <nav> – Navigation section

5. Image & Multimedia Tags

  • <img> – Image
  • <audio> – Audio
  • <video> – Video
  • <source> – Media source
  • <track> – Subtitles
  • <map> – Image map
  • <area> – Clickable area

6. List Tags

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

7. Table Tags

  • <table> – Table
  • <tr> – Table row
  • <th> – Table header
  • <td> – Table data
  • <caption> – Table title
  • <thead>, <tbody>, <tfoot> – Table sections

8. Form & Input Tags

  • <form> – Form
  • <input> – Input field
  • <textarea> – Text input
  • <button> – Button
  • <select> – Dropdown
  • <option> – Select option
  • <label> – Field label
  • <fieldset> – Group fields
  • <legend> – Form title
  • <datalist> – Input suggestions
  • <output> – Output result

9. Semantic HTML5 Tags

  • <header> – Header
  • <footer> – Footer
  • <main> – Main content
  • <article> – Article
  • <section> – Section
  • <aside> – Sidebar
  • <figure> – Image + caption
  • <figcaption> – Image caption
  • <details> – Expandable details
  • <summary> – Summary for details
  • <time> – Time/date

10. Embedded Content Tags

  • <iframe> – Embed page
  • <embed> – Embed content
  • <object> – External resource
  • <param> – Parameters

11. Programming & Script Tags

  • <script> – JavaScript
  • <noscript> – Fallback message
  • <canvas> – Drawing area
  • <svg> – Scalable graphics

12. Meta & SEO Tags

  • <meta> – Metadata
  • <link rel="canonical"> – Avoid duplicates
  • <meta name="description"> – SEO description

13. Miscellaneous Tags

  • <span> – Inline container
  • <div> – Block container
  • <template> – Hidden reusable code
  • <progress> – Progress bar
  • <meter> – Measurement indicator

14. Deprecated Tags (No Longer Used)

HTML5 discourages old tags such as:

  • <center>
  • <font>
  • <big>
  • <tt>
  • <frame> / <frameset>

HTML All Tags PDF Free Download

The HTML All Tags PDF Free Download provides a complete list of every major HTML tag used in modern web development. It includes structural, semantic, multimedia, table, form, and formatting tags in one easy-to-access document. This PDF is perfect for students, beginners, and developers who want a quick reference guide for efficient coding.

HTML Tags List PDF

This HTML Tags List PDF contains a well-organized collection of essential HTML tags along with short descriptions of their purpose. From basic tags like <html> and <body> to advanced HTML5 elements, this PDF helps learners understand how each tag functions in building webpages. It’s a handy reference for study, revision, and project work.

HTML Codes PDF

The HTML Codes PDF offers practical examples of HTML syntax, attributes, and commonly used code snippets. It includes working examples for text formatting, hyperlinks, images, tables, lists, and forms. Ideal for beginners, this PDF makes it easy to learn and practice real HTML coding without memorizing each element manually.

HTML Codes List PDF

The HTML Codes List PDF compiles frequently used HTML code patterns in a simple, readable format. It covers headings, paragraphs, buttons, forms, tables, multimedia embedding, and semantic layout codes. This PDF helps learners quickly copy, revise, and implement HTML structures in projects, making it a valuable resource for everyday web development.

Our Social Channels

All HTML Tags FAQs

What Are the 100 Html Tags?

There are around 100+ commonly used HTML tags that help structure webpages, format text, embed multimedia, create forms, and define page layout. These tags include headings, paragraphs, images, links, tables, lists, semantic elements, and interactive HTML5 tags. Each tag has a specific purpose in webpage design and development.

What Are 30 HTML Tags?

Thirty basic HTML tags include headings (h1 to h6), p, a, img, div, span, lists (ul, ol, li), table tags, form tags, and semantic tags like header, footer, and section. These are the foundational elements used in most websites today.

How Many HTML Tags Are There?

HTML has over 140 tags, including both standard and obsolete ones. However, modern HTML5 actively uses around 110 tags. Not all tags are used frequently—only about 30–40 are essential for everyday HTML coding, page structure, forms, text formatting, and multimedia embedding.

What Are H1, H2, H3, H4, H5, H6 Tags in HTML?

H1 to H6 tags are HTML heading tags used to structure content hierarchically. h1 is the main heading, h2 is a subheading, and the levels go down to h6, which is the smallest heading. They improve readability and help search engines understand your page structure for better SEO.

How is the tag utilised in HTML?

The tag is used to create an HTML form that collects user input. It can contain various form elements like text fields, buttons, and dropdowns, and it utilises the action attribute to specify the URL where the form data will be sent.