HTML Tags and Attributes 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:

type: Specifies input type (text, password, email, file, etc.).
- Example: <input type="email">
name: Assigns a name to the input.
- Example: <input name="email">
value: Pre-fills input with a default value.
- Example: <input value="John Doe">
placeholder: Displays a hint inside the input.
- Example: <input placeholder="Enter your name">
required: Makes the field mandatory.
- Example: <input required>
readonly: Prevents editing the field.
- Example: <input readonly>
disabled: Disables the input.
- Example: <input disabled>

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:

Creates a table.

Attributes:

border: Specifies table border.
- Example: <table border="1">
cellpadding: Adds space within cells.
- Example: <table cellpadding="10">
cellspacing: Adds space between cells.
- Example: <table cellspacing="5">

<tr>: Defines a row.
<th>: Defines a header cell.
<td>: Defines a data cell.
colspan (for <th> or <td>): Merges columns.
- Example: <td colspan="2">Merged</td>
rowspan (for <th> or <td>): Merges rows.
- Example: <td rowspan="2">Merged</td>

Example:

<table border="1" cellpadding="5">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

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>

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:

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:

Attributes:

Related Tags:

Example:

14. <canvas>

Description:

Attributes:

Example:

15. <audio>

Description:

Attributes:

Example:

16. <video>

Description:

Attributes:

Example:

17. <iframe>

Description:

Attributes:

Example:

18. <picture> and <source>

Description:

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

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

14. `<canvas>`

15. `<audio>`

16. `<video>`

17. `<iframe>`

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

`<picture>`:

`<source>`:

19. `<details>`

20. `<dialog>`

21. `<progress>`

22. `<meter>`