Comprehensive Guide to HTML Tags with Attributes and Examples

Payal PorwalPayal Porwal
21 min read

Table of contents

HTML (HyperText Markup Language) is the foundation of web development, allowing developers to create structured documents. This guide covers every HTML tag, all its attributes, and their usage with examples. The language is crafted to ensure clarity for both beginners and experienced professionals.

1. <html>

Description:

The root element of an HTML document that encapsulates all other tags.

Attributes:

  • lang: Specifies the language of the document.

    • Example: <html lang="en">

  • dir: Defines text direction (ltr, rtl).

    • Example: <html dir="ltr">

  • xmlns: Specifies the XML namespace.

2. <head>

Description:

Contains metadata about the document such as title, links, and scripts.

Attributes:

  • None (attributes are applied to child tags).

3. <title>

Description:

Defines the title of the document displayed in the browser tab.

Attributes:

  • None.

Example:

<head>
    <title>My Webpage</title>
</head>

4. <meta>

Description:

Provides metadata about the document.

Attributes:

  • charset: Specifies character encoding.

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

  • name: Defines the metadata name (e.g., description, keywords).

    • Example: <meta name="description" content="Guide to HTML">

  • content: Specifies the value of the name attribute.

  • http-equiv: Used for HTTP headers.

    • Example: <meta http-equiv="refresh" content="30">

5. <body>

Description:

Defines the body of the document.

Attributes:

  • onload: Executes JavaScript when the page loads.

    • Example: <body onload="alert('Welcome!')">

  • onunload: Executes JavaScript when the page is unloaded.

    • Example: <body onunload="saveData()">

6. <h1> to <h6>

Description:

Defines headings, where <h1> is the highest level, and <h6> is the lowest.

Attributes:

  • id: Unique identifier.

    • Example: <h1 id="main-heading">Hello</h1>

  • class: Specifies one or more class names.

    • Example: <h2 class="sub-heading">Welcome</h2>

7. <p>

Description:

Defines a paragraph.

Attributes:

  • id and class (as above).

Example:

<p id="intro" class="text">This is a paragraph.</p>

8. <form>

Description:

The <form> tag is a fundamental element in HTML used to collect user input and send it to a server for processing. Forms can include various input elements like text fields, checkboxes, radio buttons, and submit buttons.

Basic Syntax of the <form> Tag

<form action="submit-url" method="post">
    <!-- Form elements go here -->
</form>

Attributes of the <form> Tag

  1. action:

    • Description: Specifies the URL where form data will be sent for processing.

    • Example:

        <form action="https://example.com/submit-form">
      <input type="text" name="username">
      <button type="submit">Submit</button>
  </form>

  2. method:

    • Description: Specifies the HTTP method to be used when sending form data. Common values are GET and POST.

    • Example:

        <form action="/submit-form" method="post">
      <input type="email" name="email">
      <button type="submit">Submit</button>
  </form>

  3. enctype:

    • Description: Specifies the encoding type used when submitting form data. It is important when sending files.

    • Common Values:

      • application/x-www-form-urlencoded (default for text data)

      • multipart/form-data (used when a form requires binary data, like file uploads)

      • text/plain (sends data in a simple text format)

    • Example:

        <form action="/upload" method="post" enctype="multipart/form-data">
      <input type="file" name="fileUpload">
      <button type="submit">Upload</button>
  </form>

  4. target:

    • Description: Specifies where to display the response after submitting the form.

    • Common Values:

      • _self (default, the response is displayed in the same frame)

      • _blank (opens the response in a new tab or window)

      • _parent (opens in the parent frame)

      • _top (opens in the full body of the window)

    • Example:

        <form action="/process-data" method="get" target="_blank">
      <input type="text" name="query">
      <button type="submit">Search</button>
  </form>

  5. name:

    • Description: Gives the form a name, making it easier to identify in scripts or when accessing the form via JavaScript.

    • Example:

        <form action="/submit" method="post" name="userForm">
      <input type="text" name="firstName">
      <button type="submit">Submit</button>
  </form>

  6. novalidate:

    • Description: When present, the form will not validate its input data before submission.

    • Example:

        <form action="/submit" method="post" novalidate>
      <input type="email" name="userEmail" required>
      <button type="submit">Submit</button>
  </form>

  7. autocomplete:

    • Description: Specifies if the form should have autocomplete enabled or disabled.

    • Common Values:

      • on (default, allows autocomplete)

      • off (disables autocomplete)

    • Example:

        <form action="/register" method="post" autocomplete="off">
      <input type="text" name="username">
      <button type="submit">Register</button>
  </form>

  8. accept-charset:

    • Description: Specifies the character encodings that are accepted by the server.

    • Example:

        <form action="/submit" method="post" accept-charset="UTF-8">
      <input type="text" name="message">
      <button type="submit">Send</button>
  </form>

  9. rel:

    • Description: Specifies the relationship between the current document and the form’s action URL. This attribute is less commonly used but useful for certain scenarios.

    • Example:

        <form action="https://example.com/form-handler" method="post" rel="noopener">
      <input type="text" name="name">
      <button type="submit">Submit</button>
  </form>

Complete Practical Example with Multiple Attributes

Here's an example form that includes several of these attributes:

<form action="https://example.com/submit-form"
      method="post"
      enctype="multipart/form-data"
      target="_blank"
      name="feedbackForm"
      novalidate
      autocomplete="on"
      accept-charset="UTF-8">

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>

    <label for="file">Upload File:</label>
    <input type="file" id="file" name="fileUpload">

    <button type="submit">Submit</button>
</form>

🔸 Important Attributes of <form>

AttributeDescriptionReal-Life Example
actionURL where form data will be sent/submit-form
methodHTTP method: GET (visible in URL) or POST (secure)method="post"
enctypeEncoding type. Needed for file uploads.enctype="multipart/form-data"
targetDefines where to display the response_blank for new tab
nameName of the form (for JavaScript reference)name="feedbackForm"
novalidateSkips browser's default validationnovalidate
autocompleteEnables/disables auto-completeautocomplete="off"
accept-charsetCharacter set to useaccept-charset="UTF-8"
relSpecifies relationship between current page and form actionrel="noopener" (rarely used)

9. <label>

Description:

The <label> tag gives a text description to form fields. It improves accessibility and allows users to click the label to focus on the corresponding field.

✅ Syntax:

<label for="field-id">Label Text</label>
<input type="text" id="field-id">

✅ Benefits of using <label>:

  • Improves user experience (clicking on label focuses input)

  • Helps screen readers understand form structure (important for accessibility)

✅ Example:

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

10. <input>

Description:

The <input> tag is used to create different kinds of user input fields like text boxes, email fields, passwords, checkboxes, radio buttons, file uploads, etc.

Attributes:

Commonly Used Attributes of <input> Tag:

  • type: Specifies the type of the input. This can significantly change the behavior and appearance of the input field.

    • Example:

        <input type="text" id="name" name="name">

      🔸Commonly Used <input> Types

      | Type | Description | Example | | --- | --- | --- | | text | Single-line text field | <input type="text"> | | email | Email input (validates format) | <input type="email"> | | password | Hides typed text | <input type="password"> | | number | Accepts numeric values | <input type="number"> | | checkbox | Toggle option | <input type="checkbox"> | | radio | Choose one from many | <input type="radio"> | | file | Upload files | <input type="file"> | | submit | Submit the form | <input type="submit"> | | button | Custom button | <input type="button" value="Click"> | | range | Slider input | <input type="range"> | | color | Color picker | <input type="color"> |

  • name: The name attribute is essential for form data submission. The name of the input is sent to the server when the form is submitted, and its value is the data that the user entered.

    • Example:

        <input type="text" name="username" id="username">

  • id: The id attribute is used to uniquely identify an input element within a page. It is often paired with the for attribute of the <label> tag.

    • Example:

        <input type="text" id="email" name="email">
  <label for="email">Email Address</label>

  • value: This defines the default value of the input field or the value to be sent when the form is submitted.

    • Example:

        <input type="text" name="firstName" value="John">

      This sets the initial value of the input field to "John."

  • placeholder: Specifies a short hint displayed inside the input field to show the expected value or format.

    • Example:

        <input type="email" placeholder="Enter your email" name="email">

  • required: Marks the input field as mandatory, meaning the user cannot submit the form without filling out this field.

    • Example:

        <input type="text" name="username" required>

  • readonly: Specifies that the input field is read-only. The user can see the value but cannot modify it.

    • Example:

        <input type="text" name="username" value="admin" readonly>

  • disabled: Disables the input field, making it unclickable and uneditable.

    • Example:

        <input type="text" name="username" disabled>

  • maxlength: Sets the maximum number of characters a user can input into the field.

    • Example:

        <input type="text" name="username" maxlength="15">

  • min / max: Used with types like number or range to set a range for valid input values.

    • Example:

        <input type="number" name="age" min="18" max="100">

  • pattern: Specifies a regular expression that the input field must match. This is often used with the text type for validating inputs like phone numbers or postal codes.

    • Example:

        <input type="text" name="phone" pattern="\d{10}">

  • autocomplete: Specifies whether the browser should provide automatic completion for the input field.

    • Example:

        <input type="text" name="username" autocomplete="on">

  • size: Defines the width of the input field in terms of characters.

    • Example:

        <input type="text" name="username" size="20">

  • multiple: Used with input types like file and email to allow multiple selections.

    • Example (for file uploads):

        <input type="file" name="fileUpload" multiple>

🔍 Explanation of Key Attributes Used:

AttributePurpose
typeSpecifies the type of input (e.g., text, password, email, file, etc.)
nameThe key used to send data when form is submitted
idUniquely identifies the input element; links with <label for="...">
placeholderShows a hint in the input field before the user types
requiredMakes the field mandatory
maxlengthLimits the number of characters in input
min, maxDefine acceptable range for number or range inputs
readonlyField is visible but not editable
disabledField is disabled and won’t be submitted
patternUses regex to enforce input format (e.g., 10-digit phone)
autocompleteAllows browser to auto-fill previously entered data
multipleAllows multiple file uploads

✅ Full Example: Basic HTML Form Using <input> Attributes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Input Form</title>
</head>
<body>
  <h2>User Registration Form</h2>

  <form action="/submit-form" method="post">

    <!-- Text Input -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username" required maxlength="15" autocomplete="on">
    <br><br>

    <!-- Password -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="6">
    <br><br>

    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@gmail.com" required>
    <br><br>

    <!-- Number -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
    <br><br>

    <!-- File Upload -->
    <label for="resume">Upload Resume:</label>
    <input type="file" id="resume" name="resume" multiple>
    <br><br>

    <!-- Checkbox -->
    <label>
      <input type="checkbox" name="subscribe" value="yes">
      Subscribe to newsletter
    </label>
    <br><br>

    <!-- Radio Buttons -->
    <label>Gender:</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">Male</label>

    <input type="radio" name="gender" value="female" id="female">
    <label for="female">Female</label>
    <br><br>

    <!-- Color Picker -->
    <label for="favcolor">Choose Favorite Color:</label>
    <input type="color" id="favcolor" name="favcolor">
    <br><br>

    <!-- Readonly Input -->
    <label for="userrole">User Role:</label>
    <input type="text" id="userrole" name="userrole" value="Member" readonly>
    <br><br>

    <!-- Disabled Input -->
    <label for="referral">Referral Code:</label>
    <input type="text" id="referral" name="referral" value="1234ABCD" disabled>
    <br><br>

    <!-- Pattern -->
    <label for="phone">Phone (10 digits):</label>
    <input type="text" id="phone" name="phone" pattern="\d{10}" placeholder="e.g., 9876543210">
    <br><br>

    <!-- Range -->
    <label for="rating">Rate Us:</label>
    <input type="range" id="rating" name="rating" min="1" max="10">
    <br><br>

    <!-- Submit and Reset Buttons -->
    <input type="submit" value="Register">
    <input type="reset" value="Clear All">

  </form>
</body>
</html>

🔍 Are you confused between “pattern” & “maxlength” 🤔🤔? , to chalo fir clear karte he 😃😃⬇️⬇️

AttributeRole
patternValidates that only 10 digits (\d{10}) are entered at submit time
maxlengthLimits user input to maximum 10 characters in real time

✅ Together, these prevent entering more than 10 digits and ensure correct format.

10. <textarea>

Description:

Creates a multi-line text input.

Attributes:

  • rows: Specifies the number of rows.

    • Example: <textarea rows="4">

  • cols: Specifies the number of columns.

    • Example: <textarea cols="50">

  • placeholder, required, readonly, disabled (as above).

Example:

<textarea rows="5" cols="30" placeholder="Enter your message"></textarea>

11. <select> and <option>

Description:

Creates a dropdown menu.

Attributes:

<select>:

  • name: Name for the dropdown.

    • Example: <select name="colors">

  • multiple: Allows selecting multiple options.

    • Example: <select multiple>

  • required (as above).

<option>:

  • value: Specifies the value submitted when selected.

    • Example: <option value="red">Red</option>

  • selected: Pre-selects the option.

    • Example: <option selected>Blue</option>

Example:

<select name="colors" required>
    <option value="red">Red</option>
    <option value="blue" selected>Blue</option>
    <option value="green">Green</option>
</select>

12. <ul>, <ol>, <li>

Description:

  • <ul>: Creates an unordered list.

  • <ol>: Creates an ordered list.

  • <li>: Defines list items.

<ul> - Unordered List

The <ul> tag creates a list where items are marked with bullets.

Attributes of <ul>:

  • type: Specifies the bullet style for list items. Possible values:

    • disc (default): A filled circle.

    • circle: A hollow circle.

    • square: A square.

Example:

<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Output:

  • ○ HTML

  • ○ CSS

  • ○ JavaScript

<ol> - Ordered List

The <ol> tag creates a numbered list.

Attributes of <ol>:

  1. type: Defines the numbering style for the list items. Possible values:

    • 1: Numbers (default).

    • A: Uppercase letters.

    • a: Lowercase letters.

    • I: Uppercase Roman numerals.

    • i: Lowercase Roman numerals.

  2. start: Specifies the starting number or character.

    • Example: <ol start="5">

  3. reversed: Reverses the order of the numbers.

    • Example: <ol reversed>

Example 1: Ordered List with Different Types

<h3>Ordered List with Different Numbering Styles</h3>
<ol type="1">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
</ol>
<ol type="i">
    <li>Item i</li>
    <li>Item ii</li>
</ol>

Output:

  1. Item 1

  2. Item 2

A. Item A
B. Item B

i. Item i
ii. Item ii

Example 2: Ordered List with start and reversed Attributes

<h3>Ordered List Starting from a Specific Number</h3>
<ol type="1" start="10">
    <li>Step 10</li>
    <li>Step 11</li>
    <li>Step 12</li>
</ol>

<h3>Reversed Ordered List</h3>
<ol type="A" reversed>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Output:

Starting at 10: 10. Step 10
11. Step 11
12. Step 12

Reversed (Letters): C. First
B. Second
A. Third

<li> - List Item

The <li> tag is used to define items in both <ul> and <ol>. It supports these attributes:

  1. value (for <ol> only): Overrides the default numbering sequence.

    • Example: <li value="100">

Example:

<ol type="1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li value="100">Custom Item</li>
    <li>Item 4</li>
</ol>

Output:

  1. Item 1

  2. Item 2

  3. Custom Item

  4. Item 4

Styling with CSS

You can style both <ul> and <ol> lists using CSS for additional customization.

Example:

<style>
    ul.custom-list {
        list-style-type: square;
        color: green;
    }

    ol.custom-ordered {
        list-style-type: upper-roman;
        color: blue;
    }
</style>

<h3>Styled Unordered List</h3>
<ul class="custom-list">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<h3>Styled Ordered List</h3>
<ol class="custom-ordered">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Output:

  • Styled unordered list with green squares.

  • Styled ordered list with blue Roman numerals.

13. <table>

Description:

The <table> tag in HTML is used to create a table structure on a web page. It allows the organization of data into rows and columns, which is useful for displaying structured data in a grid format. A table typically consists of multiple nested tags, such as <tr>, <th>, <td>, and attributes that define its appearance and layout.

Basic Structure of a <table> Tag:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

This code creates a table with two columns and one row of data, along with a header row. Each part of a table is controlled using a combination of specific tags and attributes.

Attributes of the <table> Tag:

  1. border:

    • Defines the thickness of the table's border.

    • Example:

        <table border="1">
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • The border="1" attribute adds a visible border around the table.

  2. cellpadding:

    • Specifies the space (padding) between the content of each cell and its border.

    • Example:

        <table cellpadding="10">
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • This will add 10 pixels of padding inside each table cell, making the text inside the cells more spacious.

  3. cellspacing:

    • Defines the space between individual cells in the table.

    • Example:

        <table cellspacing="5">
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • The cellspacing="5" attribute creates a 5-pixel gap between cells in the table.

Nested Tags Within the <table> Tag:

  1. <tr> (Table Row):

    • The <tr> tag defines a row within the table. Each row can contain one or more <th> (header) or <td> (data) elements.

    • Example:

        <table>
      <tr>
          <th>Header 1</th>
          <th>Header 2</th>
      </tr>
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

  2. <th> (Table Header Cell):

    • The <th> tag is used to define header cells in a table. Header cells are typically bold and centered by default. They are used to describe the content of a column or row.

    • Example:

        <table>
      <tr>
          <th>Name</th>
          <th>Age</th>
      </tr>
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • In this case, "Name" and "Age" are header cells, and they help describe the content in the rows below them.

  3. <td> (Table Data Cell):

    • The <td> tag is used to define data cells in a table. Data cells contain the actual content or data that is presented in the table.

    • Example:

        <table>
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • "John" and "25" are data cells that hold the information related to the headers.

Additional Table Attributes for Nested Tags:

  1. colspan:

    • The colspan attribute is used to make a table cell span across multiple columns. This attribute can be applied to both <th> and <td> tags.

    • Example:

        <table>
      <tr>
          <th colspan="2">Name & Age</th>
      </tr>
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
  </table>

    • Here, the header cell "Name & Age" spans across two columns. The number "2" in colspan="2" tells the browser that this header should cover two columns.

  2. rowspan:

    • The rowspan attribute allows a cell to span across multiple rows.

    • Example:

        <table>
      <tr>
          <th rowspan="2">Name</th>
          <td>John</td>
      </tr>
      <tr>
          <td>Jane</td>
      </tr>
  </table>

    • In this example, the "Name" header spans two rows, while "John" and "Jane" are data cells in separate rows.

Complete Example of a Table:

Here’s a detailed example of a table with different attributes and nested tags, showcasing how border, cellpadding, cellspacing, colspan, and rowspan work together:

<table border="1" cellpadding="5" cellspacing="3">
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Details</th>
    </tr>
    <tr>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>28</td>
        <td>Los Angeles</td>
    </tr>
</table>

Explanation:

  • The table has a border of 1 pixel (border="1").

  • It uses 5 pixels of padding within cells (cellpadding="5") and 3 pixels of space between cells (cellspacing="3").

  • The header "Name" spans two rows (rowspan="2"), while "Details" spans two columns (colspan="2").

  • The table is populated with data about two individuals: John and Jane.

Summary of Table Tags and Attributes:

TagDescriptionAttributesExample
<table>Defines the table.border, cellpadding, cellspacing<table border="1">
<tr>Defines a row in the table.N/A<tr><td>John</td></tr>
<th>Defines a header cell in a row.colspan, rowspan<th colspan="2">Name & Age</th>
<td>Defines a data cell in a row.colspan, rowspan<td>25</td>
colspanMakes a cell span across multiple columns.N/A<th colspan="2">Name & Age</th>
rowspanMakes a cell span across multiple rows.N/A<td rowspan="2">John</td>

Conclusion:

The <table> tag in HTML is essential for displaying data in a structured grid format. Understanding the nested tags like <tr>, <th>, and <td>, along with their useful attributes like border, cellpadding, cellspacing, colspan, and rowspan, enables you to create clear and well-organized tables. These tables are not only visually appealing but also improve accessibility and usability for users.

14. <canvas>

Description:

Defines a container for graphics, like drawings, charts, and animations.

Attributes:

  • width: Specifies the width of the canvas.

    • Example: <canvas width="500">

  • height: Specifies the height of the canvas.

    • Example: <canvas height="400">

Example:

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000;">
</canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');
    context.fillStyle = 'blue';
    context.fillRect(20, 20, 150, 100);
</script>

15. <audio>

Description:

Embeds an audio file in a webpage.

Attributes:

  • src: Specifies the audio file URL.

  • controls: Displays audio controls.

    • Example: <audio controls>

  • autoplay: Starts playing the audio automatically.

    • Example: <audio autoplay>

  • loop: Repeats the audio.

    • Example: <audio loop>

  • muted: Mutes the audio by default.

    • Example: <audio muted>

Example:

<audio src="song.mp3" controls autoplay loop muted>
    Your browser does not support the audio element.
</audio>

16. <video>

Description:

Embeds a video file in a webpage.

Attributes:

  • src: Specifies the video file URL.

  • controls: Displays video controls.

    • Example: <video controls>

  • autoplay, loop, muted (as above).

  • poster: Specifies an image to be shown before the video starts.

    • Example: <video poster="poster.jpg">

Example:

<video src="movie.mp4" controls autoplay loop poster="poster.jpg">
    Your browser does not support the video element.
</video>

17. <iframe>

Description:

Embeds another HTML document within the current document.

Attributes:

  • src: URL of the page to embed.

  • width: Specifies the width of the iframe.

    • Example: <iframe width="600">

  • height: Specifies the height of the iframe.

    • Example: <iframe height="400">

  • frameborder: Specifies whether the frame has a border (0 or 1).

    • Example: <iframe frameborder="0">

  • allowfullscreen: Enables fullscreen mode.

    • Example: <iframe allowfullscreen>

Example:

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen>
    Your browser does not support iframes.
</iframe>

18. <picture> and <source>

Description:

Provides multiple versions of an image for different devices.

Attributes:

<picture>:

  • No specific attributes; contains <source> and <img>.

<source>:

  • srcset: Specifies the URL of the image and its size.

    • Example: <source srcset="image-large.jpg 1024w, image-small.jpg 480w">

  • type: Specifies the type of the image (e.g., image/webp).

    • Example: <source type="image/webp" srcset="image.webp">

Example:

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="fallback.jpg" alt="A responsive image">
</picture>

19. <details>

Description:

Creates a collapsible content section.

Attributes:

  • open: Indicates that the section is open by default.

    • Example: <details open>

Example:

<details open>
    <summary>More Information</summary>
    Here is additional content that can be expanded or collapsed.
</details>

20. <dialog>

Description:

Defines a dialog box or a popup.

Attributes:

  • open: Displays the dialog box.

    • Example: <dialog open>

Example:

<dialog open>
    <p>This is a dialog box.</p>
    <button onclick="this.parentElement.close()">Close</button>
</dialog>

21. <progress>

Description:

Displays the progress of a task.

Attributes:

  • value: Indicates the current progress.

    • Example: <progress value="70">

  • max: Specifies the maximum value.

    • Example: <progress max="100">

Example:

<progress value="70" max="100">70%</progress>

22. <meter>

Description:

Represents a scalar measurement within a range.

Attributes:

  • value: Current value.

    • Example: <meter value="2">

  • min: Minimum value.

    • Example: <meter min="0">

  • max: Maximum value.

    • Example: <meter max="10">

  • low: Lower bound of the range.

    • Example: <meter low="3">

  • high: Upper bound of the range.

    • Example: <meter high="7">

  • optimum: Ideal value.

    • Example: <meter optimum="5">

Example:

<meter value="2" min="0" max="10" low="3" high="7" optimum="5">
    2 out of 10
</meter>

23.🔹 What is <div> in HTML?

✅ Description:

The <div> tag is a block-level container used to group related elements together. It's commonly used to divide the page into sections — like header, footer, sidebar, or content blocks.

✅ Syntax:

<div>
  <!-- Block of HTML elements -->
</div>

🔸 Common Attributes of <div>

AttributeDescriptionExample
idAssigns a unique ID to the div<div id="header">
classAssigns a class for styling with CSS<div class="card">
styleInline styling directly on the element<div style="color: red;">
titleShows tooltip text on hover<div title="User Profile">

✅ Real-Life Example:

<div class="card">
  <h2>Product Name</h2>
  <p>This is a product description.</p>
  <button>Buy Now</button>
</div>

Here, <div class="card"> wraps the product info into one box so we can style or script it together.

📌 Why Use <div>?

  • Groups related elements for layout or styling

  • Useful with CSS for responsive web design

  • Helps organize large HTML pages into sections

  • Used in almost every webpage layout

24.🔹 What is <span> in HTML?

✅ Description:

The <span> tag is an inline container used to style or manipulate a small piece of text or element. It does not break the flow of content like <div>.

✅ Syntax:

<span>inline content</span>

🔸 Common Attributes of <span>

AttributeDescriptionExample
idAssigns a unique identifier<span id="price">
classFor grouping styles<span class="highlight">
styleInline CSS styling<span style="color: green;">
titleTooltip on hover<span title="Discounted Price">

✅ Real-Life Example:

<p>This product is <span style="color: red; font-weight: bold;">out of stock</span> right now.</p>

Here, only the "out of stock" text is styled red and bold without affecting the rest of the paragraph.

🔁 <div> vs <span> – Key Differences

Feature<div><span>
TypeBlock-levelInline
UseGrouping sectionsStyling small text
Breaks Line?YesNo
Common Use CaseLayout and structureText-level styling

🧪 Real-Life Example Using Both

<div class="product-card">
  <h2>Smartphone</h2>
  <p>Price: <span class="price-tag">$499</span></p>
  <p><span class="status">In Stock</span></p>
  <button>Buy Now</button>
</div>

💡 Explanation:

  • <div class="product-card"> groups the entire product block

  • <span class="price-tag"> targets only the price text

  • <span class="status"> targets availability info

🎯 Summary

TagTypePurposeReal-Life Use
<div>BlockStructure/layoutCards, sections, containers
<span>InlineHighlight textPrice, keywords, tooltips

These tags become very powerful when combined with CSS and JavaScript. Whether you're making a blog, ecommerce site, portfolio, or admin dashboard — you'll use <div> and <span> regularly.

This concludes the inclusion of advanced tags and their attributes.

hello

0
Subscribe to my newsletter

Read articles from Payal Porwal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

html tags and attributesHTML Tags and AttributeHTML5HTMLHTML tags #htmlattributesHTML CSS JAVASCRIPTimg tagsemantichtmlHTML 5programming languagesadvancedAttributestechnologyHTML attributes

Written by

Payal Porwal
Payal Porwal

Hi there, tech enthusiasts! I'm a passionate Software Developer driven by a love for continuous learning and innovation. I thrive on exploring new tools and technologies, pushing boundaries, and finding creative solutions to complex problems. What You'll Find Here On my Hashnode blog, I share: 🚀 In-depth explorations of emerging technologies 💡 Practical tutorials and how-to guides 🔧Insights on software development best practices 🚀Reviews of the latest tools and frameworks 💡 Personal experiences from real-world projects. Join me as we bridge imagination and implementation in the tech world. Whether you're a seasoned pro or just starting out, there's always something new to discover! Let’s connect and grow together! 🌟