HTML attributes provide additional information about HTML elements. They are written inside the opening tag and help control the behavior, appearance, and functionality of an element.

What Are HTML Attributes?#

HTML attributes are special words that provide additional information about an HTML element.

Syntax#

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

Example#

<p class="description">This is a paragraph.</p>

Here:

• <p> is the HTML element.
• class is the attribute.
• "description" is the attribute value.

Basic Structure of an Attribute#

<tag attribute="value">

For example:

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

Here:

Important Rules of HTML Attributes#

1. Attributes Are Written Inside the Opening Tag#

<p class="text">Hello World</p>

Correct:

<p class="text">Hello World</p>

Incorrect:

<p>Hello World</p class="text">

2. Attribute Values Are Usually Written Inside Quotes#

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

Double quotes are recommended.

You can also use single quotes:

<p class='text'>Hello World</p>

3. Multiple Attributes Can Be Used#

An HTML element can have multiple attributes.

<img 
    src="profile.jpg" 
    alt="Profile Picture" 
    width="200" 
    height="200"
>

This image has four attributes:

• src
• alt
• width
• height

Common HTML Attributes

1. id Attribute#

The id attribute gives a unique identifier to an HTML element.

<p id="intro">Welcome to LearnoBoy</p>

An id should generally be unique on a page.

Using id with CSS#

<style>
    #intro {
        color: blue;
        font-size: 24px;
    }
</style>

<p id="intro">Welcome to LearnoBoy</p>

Using id with JavaScript#

<p id="message">Old Message</p>

<script>
    document.getElementById("message").innerText = "New Message";
</script>

2. class Attribute#

The class attribute is used to group HTML elements.

<p class="text">First Paragraph</p>
<p class="text">Second Paragraph</p>

The same class can be used on multiple elements.

Example#

<style>
    .text {
        color: green;
        font-size: 20px;
    }
</style>

<p class="text">Hello</p>
<p class="text">Welcome</p>

3. style Attribute#

The style attribute is used to add inline CSS directly to an HTML element.

<p style="color: red;">This text is red.</p>

Multiple CSS Properties#

<p style="color: blue; font-size: 25px;">
    Styled Text
</p>

However, for larger projects, using an external CSS file is generally recommended.

4. title Attribute#

The title attribute displays extra information when the user hovers over an element.

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

The browser displays the title as a tooltip.

Attributes for Links

5. href Attribute#

The href attribute specifies the destination of a link.

<a href="https://www.google.com">
    Visit Google
</a>

Link to Another Page#

<a href="about.html">
    About Us
</a>

Link to an Email Address#

<a href="mailto:example@gmail.com">
    Send Email
</a>

6. target Attribute#

The target attribute specifies where to open the linked page.

Open in the Same Tab#

<a href="https://example.com" target="_self">
    Open Website
</a>

Open in a New Tab#

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

When using target="_blank" for external links, it is good practice to use rel="noopener".

<a 
    href="https://example.com" 
    target="_blank" 
    rel="noopener"
>
    Open Website
</a>

Attributes for Images

7. src Attribute#

The src attribute specifies the path or URL of an image.

<img src="image.jpg">

Using an Online Image#

<img src="https://example.com/image.jpg">

8. alt Attribute#

The alt attribute provides alternative text for an image.

<img 
    src="profile.jpg" 
    alt="Profile picture"
>

The alt attribute is important because:

• It helps screen readers.
• It is displayed if the image cannot load.
• It improves accessibility.
• It can help search engines understand the image.

Example#

<img 
    src="cat.jpg" 
    alt="A white cat sitting on a chair"
>

9. width and height Attributes#

These attributes define the size of an image.

<img 
    src="image.jpg" 
    alt="Example Image"
    width="300"
    height="200"
>

Form Attributes

10. type Attribute#

The type attribute defines the type of an input field.

<input type="text">

Common Input Types#

<input type="text">

<input type="password">

<input type="email">

<input type="number">

<input type="date">

<input type="checkbox">

<input type="radio">

<input type="submit">

11. name Attribute#

The name attribute identifies form data.

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

It is especially useful when sending form data to a server.

12. value Attribute#

The value attribute defines the initial value of an input.

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

13. placeholder Attribute#

The placeholder attribute displays a hint inside an input field.

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

14. required Attribute#

The required attribute makes a form field mandatory.

<input 
    type="email" 
    required
>

The user cannot submit the form without filling in the field.

15. disabled Attribute#

The disabled attribute disables an element.

<button disabled>
    Disabled Button
</button>

A disabled input cannot normally be edited or clicked.

16. readonly Attribute#

The readonly attribute allows users to see a value but prevents them from changing it.

<input 
    type="text" 
    value="Cannot Change"
    readonly
>

Difference Between disabled and readonly#

Global HTML Attributes

Global attributes can be used with almost any HTML element.

17. lang Attribute#

The lang attribute specifies the language of the document.

<html lang="en">

For Bengali:

<html lang="bn">

18. dir Attribute#

The dir attribute specifies the text direction.

Left to Right#

<p dir="ltr">
    This text is written from left to right.
</p>

Right to Left#

<p dir="rtl">
    هذا نص عربي
</p>

19. data-* Attributes#

Custom data attributes allow developers to store extra information in HTML elements.

<button data-user-id="101">
    View Profile
</button>

The data-* attribute can be accessed using JavaScript.

<button id="btn" data-user-id="101">
    View Profile
</button>

<script>
    const button = document.getElementById("btn");

    console.log(button.dataset.userId);
</script>

Output:

101

Boolean Attributes

Some HTML attributes do not need a value.

Their presence means true.

Example#

<input type="text" required>

The required attribute is present, so the input is required.

Other examples include:

<input disabled>

<input readonly>

<input checked>

<option selected>

checked Attribute#

Used with checkboxes and radio buttons.

<input 
    type="checkbox" 
    checked
>

The checkbox will be selected by default.

selected Attribute#

Used with <option> elements.

<select>
    <option>India</option>
    <option selected>West Bengal</option>
    <option>Delhi</option>
</select>

HTML Attribute Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Attributes</title>
</head>

<body>

    <h1 id="heading" class="main-heading">
        HTML Attributes
    </h1>

    <p 
        class="description"
        title="This is a paragraph"
    >
        Attributes provide additional information about HTML elements.
    </p>

    <a 
        href="https://www.google.com"
        target="_blank"
    >
        Visit Google
    </a>

    <br><br>

    <img 
        src="image.jpg"
        alt="Example Image"
        width="300"
        height="200"
    >

</body>

</html>

Interactive HTML Attribute Example

You can try the following example:

<!DOCTYPE html>
<html>

<head>
    <title>HTML Attributes Example</title>
</head>

<body>

    <h1 id="title" class="heading">
        Welcome to LearnoBoy
    </h1>

    <p title="This is a tooltip">
        Hover over this paragraph.
    </p>

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

    <br><br>

    <button onclick="changeText()">
        Click Me
    </button>

    <script>
        function changeText() {
            document.getElementById("title").innerText =
                "Text Changed Successfully!";
        }
    </script>

</body>

</html>

Quick Reference: Common HTML Attributes

Conclusion

HTML attributes provide additional information and functionality to HTML elements. They allow developers to:

• Identify elements using id.
• Group elements using class.
• Add styles using style.
• Create links using href.
• Add images using src and alt.
• Create interactive forms using attributes like required, placeholder, and type.
• Store custom information using data-*.

Understanding HTML attributes is an important step toward learning CSS, JavaScript, and web development.