HTML Attributes

Home / HTML

HTML Tutorial

What Are HTML Attributes?

HTML attributes are extra information added to HTML tags to control how an element behaves or appears.
Attributes always appear:

Inside the opening tag
In the format: name=”value”

Example:

Here:

src = attribute name
“photo.jpg” = value
width=”300″ = another attribute

Structure of an Attribute

<tagname attribute=”value”> Content </tagname>
Example:
<p style=”color:blue;”> This is blue text</p>

Common HTML Attributes

✔ 1. id
Gives a unique name to an element.
<p id=”intro”>Welcome to HTML</p>
✔ 2. class
Used to group multiple elements for styling.
<p class=”highlight”<Paragraph 1>/p>
<p class=”highlight”>Paragraph 2</p>
✔ 3. style
Used for inline CSS.
<h2 style=”color:green;”>Green Heading</h2>
✔ 4. title
Shows a tooltip when hovering.
<p title=”This is a tooltip”>Hover over me</p>
✔ 5. src (used in images)
Defines the image file path.
<img src=”image.png”>
✔ 6. href (used in links)
Defines the link destination.
<a href=”https://google.com”>Go to Google</a>
✔ 7. alt (used for images)
Shows text if image fails to load and helps with SEO.
<img src=”car.jpg” alt=”Red Car”>

Example: Using Multiple Attributes


    <!DOCTYPE html>
<html>
  <body>
    <h2 style="color:blue;">HTML Attributes Example </h2>

    <p id="first">This paragraph has an ID.</p>

    <p class="text" title="Hover text">Hover over this paragraph!</p>

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

    <br><br>

    <img src="nature.jpg" alt="Beautiful Nature" width="300">
  </body>
</html>

Explanation of New Attributes

Attribute	Works With	Description
target="_blank"	<a>	Opens link in new tab
width & height	<img>	Controls image size
alt	<img>	Alternate text if image fails

Good Practices for Using Attributes

Always use lowercase attribute names in HTML5.
Always wrap values in double quotes → ” “
Use id for unique elements.
Use class for styling multiple elements.
Always add alt to images for accessibility.

Practice Tasks

1️⃣ Create a webpage with:

One heading with inline CSS
Two paragraphs using id and class
A link that opens in a new tab
An image with src, alt, width

HTML Attributes

Home / HTML

HTML Tutorial

What Are HTML Attributes?

Example:

Here:

Structure of an Attribute

Common HTML Attributes

Example: Using Multiple Attributes

Explanation of New Attributes

Good Practices for Using Attributes

Practice Tasks

1️⃣ Create a webpage with:

2️⃣Add a tooltip using the title attribute.

Learnstep2step

About Us

About School

About Us

Services

Community

Testimonial

Help Centre

Quick Links

Classes

Events

Programs

Become Teacher

Contact Us