HTML Attributes

HTML attributes provide additional information about elements and define their properties and behavior. Attributes are always included in the opening tag and usually follow the syntax:

<element attribute="value">Content</element>

They help control styling, functionality, linking, accessibility, and much more.

1. Global Attributes

Global attributes can be applied to almost any HTML element.

a. id Attribute

The id attribute assigns a unique identifier to an HTML element. It is mainly used for CSS styling or JavaScript interaction.

<p id="intro">This is an introduction paragraph.</p>

In CSS:

#intro {
    color: blue;
    font-weight: bold;
}

In JavaScript:

document.getElementById("intro").innerHTML = "New content!";

• Each id value must be unique across the document.

b. class Attribute

The class attribute allows grouping of elements with the same class name for styling and JavaScript manipulation.

<div class="box">Box 1</div>
<div class="box">Box 2</div>

In CSS:

.box {
    background-color: lightgray;
    padding: 10px;
}

In JavaScript:

let elements = document.getElementsByClassName("box");

• Unlike id, multiple elements can share the same class.

c. style Attribute

The style attribute allows you to apply inline CSS styles directly to an element.

<h1 style="color: red; font-size: 24px;">Hello World</h1>

• Not recommended for large-scale styling (use CSS instead).

d. title Attribute

The title attribute defines additional information that appears when the user hovers over an element.

<p title="This is additional information">Hover over me</p>

e. data-* Attribute

Custom data-* attributes allow developers to store extra information that can be accessed via JavaScript.

<div data-user-id="123">User Info</div>

JavaScript to retrieve the value:

let userId = document.querySelector("div").getAttribute("data-user-id");
console.log(userId); // Outputs: 123

2. Link Attributes (<a>)

These attributes control hyperlinks.

a. href Attribute

Defines the URL where the link redirects.

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

b. target Attribute

Controls where the link opens.

• _self: Default behavior (same tab).
• _blank: Opens in a new tab.
• _parent: Opens in the parent frame.
• _top: Opens in the full body of the window.

<a href="https://example.com" target="_blank">Open in a new tab</a>

c. rel Attribute

Defines the relationship between the current document and the linked document.

• nofollow: Prevents search engines from following the link.
• noopener: Prevents new tabs from accessing the original page.

<a href="https://example.com" rel="nofollow noopener">External Link</a>

3. Image Attributes (<img>)

These attributes define an image’s properties.

a. src Attribute

Specifies the image file location.

<img src="image.jpg" alt="An example image">

b. alt Attribute

Provides alternative text if the image fails to load or for screen readers.

<img src="missing.jpg" alt="Image could not be loaded">

c. width and height Attributes

Define the image dimensions in pixels.

<img src="logo.png" width="150" height="100">

4. Form Attributes (<input>, <form>)

Used for handling user inputs.

a. type Attribute

Defines the type of input field.

<input type="text">
<input type="password">
<input type="email">
<input type="checkbox">
<input type="radio">
<input type="submit">

b. name Attribute

Identifies the form field when data is submitted.

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

c. value Attribute

Sets a default value in an input field.

<input type="text" name="username" value="JohnDoe">

d. placeholder Attribute

Displays a hint inside an input field.

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

e. required Attribute

Makes an input field mandatory.

<input type="email" required>

f. disabled and readonly Attributes

• disabled: Prevents user interaction.
• readonly: Allows viewing but not editing.

<input type="text" value="Read Only" readonly>
<input type="text" value="Disabled" disabled>

5. Table Attributes (<table>, <td>, <th>)

Used for structuring tables.

a. colspan Attribute

Merges multiple columns into a single cell.

<td colspan="2">Merged Column</td>

b. rowspan Attribute

Merges multiple rows into a single cell.

<td rowspan="2">Merged Row</td>

6. Media Attributes (<audio>, <video>)

Used to control media playback.

a. controls Attribute

Displays media controls.

<audio src="audio.mp3" controls></audio>

b. autoplay and loop Attributes

• autoplay: Starts playback automatically.
• loop: Repeats the media continuously.

<video src="video.mp4" controls autoplay loop></video>

Conclusion

HTML attributes enhance elements by adding extra functionality. Whether controlling styles, linking resources, handling user inputs, or defining table and media properties, attributes help in creating interactive and structured web pages.