HTML Tags and Attributes: A Complete Guide

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.
- Example: <html xmlns="http://www.w3.org/1999/xhtml">

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

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>

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>

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>
```
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>
```

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>

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>

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>

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>

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>

Explanation of the Complete Example:

action: Points to the server endpoint that processes form data.
method: Uses post to securely send data.
enctype: Set to multipart/form-data for file uploads.
target: Opens the server response in a new tab.
name: The form is named feedbackForm for easy JavaScript reference.
novalidate: Skips built-in HTML validation.
autocomplete: Enabled to help users with form completion.
accept-charset: Ensures UTF-8 encoding for compatibility.

9. `<input>`

Description:

Defines an input field.

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">
```
- Types:
  - text: Defines a single-line text input field.
  - password: Hides the characters entered (used for sensitive data like passwords).
  - email: Specifies an input field for email addresses. It may validate email addresses.
  - number: Specifies an input field for numeric values.
  - checkbox: Defines a checkbox input.
  - radio: Defines a radio button (for selecting one option from multiple choices).
  - submit: Creates a button that submits the form.
  - button: Defines a clickable button.
  - file: Allows users to select a file to upload.
  - date, time, range, color, and many more.
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>
```

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>`:

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.
start: Specifies the starting number or character.
- Example: <ol start="5">
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:

Item 1
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:

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:

Item 1
Item 2
Custom Item
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:

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.

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.
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:

<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>

<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.
<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:

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.

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:

Tag	Description	Attributes	Example
`<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>`
`colspan`	Makes a cell span across multiple columns.	N/A	`<th colspan="2">Name & Age</th>`
`rowspan`	Makes 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.
- Example: <audio src="audio.mp3">
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.
- Example: <video src="video.mp4">
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.
- Example: <iframe src="https://example.com">
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. `<label>`

Description:

The <label> tag in HTML defines a label for a <form> control. It is especially useful when creating accessible forms, as it allows users to understand what each form control represents. In modern web development, it is crucial to associate the label with the corresponding form control for accessibility purposes, especially for users with screen readers.

Attributes:

for: Associates the label with an input element.
- Example:
```
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
```
  This makes the label clickable, focusing on the associated input field when the user clicks on the label text.
id: This is generally used with the <label> element itself, especially when you want to programmatically reference the label, but it is not as common as the for attribute.

Advantages of Using `<label>`:

Accessibility: Screen readers will read the text inside a <label> for visually impaired users when the label is correctly associated with the input field.
Clickability: Clicking the label text will focus on the associated input field, improving usability

Example:

<label for="inputID">Label Text</label>

This concludes the inclusion of advanced tags and their attributes.

Comprehensive Guide to HTML Tags with Attributes and Examples

Table of contents

1. <html>

Description:

Attributes:

2. <head>

Description:

Attributes:

3. <title>

Description:

Attributes:

Example:

4. <meta>

Description:

Attributes:

5. <body>

Description:

Attributes:

6. <h1> to <h6>

Description:

Attributes:

7. <p>

Description:

Attributes:

Example:

8. <form>

Description:

Basic Syntax of the <form> Tag

Attributes of the <form> Tag

Complete Practical Example with Multiple Attributes

Explanation of the Complete Example:

9. <input>

Description:

Attributes:

Commonly Used Attributes of <input> Tag:

10. <textarea>

Description:

Attributes:

Example:

11. <select> and <option>

Description:

Attributes:

<select>:

<option>:

Example:

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

Description:

<ul> - Unordered List

Attributes of <ul>:

Example:

<ol> - Ordered List

Attributes of <ol>:

Example 1: Ordered List with Different Types

Example 2: Ordered List with start and reversed Attributes

<li> - List Item

Example:

Styling with CSS

Example:

13. <table>

Description:

Basic Structure of a <table> Tag:

Attributes of the <table> Tag:

Nested Tags Within the <table> Tag:

Additional Table Attributes for Nested Tags:

Complete Example of a Table:

Explanation:

Summary of Table Tags and Attributes:

Conclusion:

14. <canvas>

Description:

Attributes:

Example:

15. <audio>

Description:

Attributes:

Example:

16. <video>

Description:

Attributes:

Example:

1. `<html>`

2. `<head>`

3. `<title>`

4. `<meta>`

5. `<body>`

6. `<h1>` to `<h6>`

7. `<p>`

8. `<form>`

Basic Syntax of the `<form>` Tag

Attributes of the `<form>` Tag

9. `<input>`

Commonly Used Attributes of `<input>` Tag:

10. `<textarea>`

11. `<select>` and `<option>`

`<select>`:

`<option>`:

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

`<ul>` - Unordered List

Attributes of `<ul>`:

`<ol>` - Ordered List

Attributes of `<ol>`:

Example 2: Ordered List with `start` and `reversed` Attributes

`<li>` - List Item

13. `<table>`

Basic Structure of a `<table>` Tag:

Attributes of the `<table>` Tag:

Nested Tags Within the `<table>` Tag:

14. `<canvas>`

15. `<audio>`

16. `<video>`

17. `<iframe>`

18. `<picture>` and `<source>`

`<picture>`:

`<source>`:

19. `<details>`

20. `<dialog>`

21. `<progress>`

22. `<meter>`

23. `<label>`

Advantages of Using `<label>`: