HTML Attributes

By /

You have already seen attributes in the previous chapters. But what exactly is an attribute? We’ll understand HTML Attributes in this chapter.

What is an HTML Attribute?

An HTML attribute gives extra information about an HTML element. Think of an HTML element as something you put on your webpage. An attribute gives that element extra instructions or information. Attributes are written inside the opening tag.

For example:

<p title="This is a paragraph">Hello!</p>

Here:

  • <p> is the HTML element.
  • title is the attribute.
  • "This is a paragraph" is the attribute value.

The basic structure looks like this:

<tag attribute="value">

You don’t need to memorize this. Just remember that attributes add extra information to HTML elements.

id Attribute

The id attribute gives an element a unique name.

<!DOCTYPE html>
<html>
<head>
    <title>ID Attribute</title>
</head>
<body>

    <h1 id="main-heading">My Website</h1>

    <p>Welcome to my website.</p>

</body>
</html>

Output

My Website

Welcome to my website.

The user won’t see the id itself. It gives that heading a name that can be used later with CSS or JavaScript.

class Attribute

The class attribute is used to give one or more elements the same class name.

<!DOCTYPE html>
<html>
<head>
    <title>Class Attribute</title>
</head>
<body>

    <h1 class="heading">My Website</h1>

    <p class="heading">Welcome to my website.</p>

</body>
</html>

Output

My Website

Welcome to my website.

Both elements have the class name heading. Classes are commonly used later with CSS to style multiple elements at once.

title Attribute

The title attribute can provide extra information about an element.

<!DOCTYPE html>
<html>
<head>
    <title>Title Attribute</title>
</head>
<body>

    <p title="This is a welcome message">
        Welcome to my website.
    </p>

</body>
</html>

Output

Welcome to my website.

If you move your mouse over the text, the browser may show the title as a small tooltip.

Multiple Attributes

An element can have more than one attribute.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Attributes</title>
</head>
<body>

    <input type="text" id="username" class="input-box" placeholder="Enter your name">

</body>
</html>

Output

[Enter your name________________]

This input has three attributes:

  • type
  • id
  • class
  • placeholder

You can use multiple attributes when an element needs extra information.

Attributes You Have Already Used

You have already worked with several attributes in earlier chapters. For example:

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

Here, href tells the link where to go.

<img src="cat.jpg" alt="A cute cat">

Here:

  • src tells the browser where the image is.
  • alt describes the image.

And:

<input type="email" required>

Here:

  • type tells the browser what kind of input it is.
  • required tells the browser that the field must be filled.

So, you have already been using attributes without even realizing it.

Quick Recap

  • Attributes give extra information about HTML elements.
  • They are written inside the opening tag.
  • Most attributes use a name and a value.
  • id gives an element a unique name.
  • class can group elements together.
  • You have already used attributes like href, src, alt, and type.

Frequently Asked Questions (FAQs)

Q1. What are HTML Attributes?

HTML Attributes provide extra information or instructions about an HTML element. They are written inside the opening tag and usually contain an attribute name and value.

Q2. Where are HTML Attributes written?

HTML Attributes are written inside the opening tag of an HTML element. For example, in <p title="Hello">, title is an attribute.

Q3. What is the id attribute in HTML?

The id attribute gives an HTML element a unique name. It can later be used with CSS or JavaScript to identify that specific element.

Q4. What is the class attribute in HTML?

The class attribute assigns a class name to one or more HTML elements. It is commonly used with CSS to style multiple elements in the same way.

Q5. What is the difference between id and class in HTML?

The id attribute is normally used to identify one unique element, while the class attribute can be shared by multiple elements.

Q6. What are some common HTML Attributes for beginners?

Common HTML Attributes for beginners include id, class, title, href, src, alt, type, placeholder, and required. Each provides additional information or controls an element’s behavior.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top