HTML Attribute

HTML attributes provide additional information about HTML elements. They are always included in the opening tag of the element and come in name/value pairs like name="value". Attributes help customize elements, specify their behavior, and provide metadata.

Key Points About HTML Attributes

  1. Attributes are placed in the opening tag: They are written inside the opening tag of an HTML element.
  2. Attributes come in name/value pairs: The name is the attribute itself, and the value is assigned to it. The value is enclosed in quotes.
  3. Not all elements have the same attributes: Some attributes are specific to certain elements, while others are global and can be used with any element.

Common HTML Attributes

1. Global Attributes

id: Specifies a unique id for an element.


<div id="header">This is the header</div>

class: Specifies one or more class names for an element (used for CSS and JavaScript).


<p class="intro">This is an introductory paragraph.</p>

style: Contains inline CSS to style an element.


<h1 style="color:blue;">This is a blue heading</h1>

lang: Specifies the language of the element’s content.


<p lang="en">This paragraph is in English.</p>

2. Specific Attributes

href: Specifies the URL of a link (used in <a> tags).


<a href="https://www.example.com">Visit Example</a>

src: Specifies the path to an image (used in <img> tags).


<img src="image.jpg" alt="Description of image" />

alt: Provides alternative text for an image, which is important for accessibility (used in <img> tags).


<img src="image.jpg" alt="A beautiful scenery" />

width and height: Specifies the width and height of an image or other element.


<img src="image.jpg" width="500" height="600" />

type: Specifies the type of input element (used in <input> tags).


<input type="text">
<input type="password">
<input type="submit">

value: Specifies the initial value of an input element (used in <input> tags).


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

name: Specifies the name of an input element (used in forms).


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

placeholder: Provides a hint to the user of what can be entered in the input field.


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

disabled: Specifies that an input element should be disabled.


<input type="text" disabled>

checked: Specifies that an input element (checkbox or radio button) should be pre-selected when the page loads.


<input type="checkbox" checked>

action: Specifies where to send the form data when a form is submitted (used in <form> tags).


<form action="/submit-form">

method: Specifies the HTTP method to use when sending form data (used in <form> tags).


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

Example Usage of Attributes

Here’s an example of a form that uses various HTML attributes:


<!DOCTYPE html>
<html>
<head>
    <title>Form Example</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example:

  1. The action attribute in the <form> tag specifies where to send the form data.
  2. The method attribute specifies the HTTP method (post) to use.
  3. The id, name, placeholder, and required attributes are used in the <input> tags to define their behavior and provide hints to the user.