• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Attributes

← Previous Next →

🔹 What are HTML Attributes?

Attributes provide additional information about HTML elements. They are always written inside the opening tag, in the form of:

<tagname attribute="value">Content</tagname>
🔹 Basic Example
<a href="https://www.google.com">Visit Google</a>

  • href is the attribute

  • "https://www.google.com" is the value

  • It tells the browser where to go when the link is clicked

🔹 Common HTML Attributes

Attribute Description Used With
href Specifies the link URL <a>
src Specifies the image source <img>
alt Specifies alternative text for an image <img>
style Adds inline CSS styles Any tag
title Tooltip text on hover Any tag
id Unique identifier for the element Any tag
class Groups elements for styling Any tag
width / height Sets the size of elements <img>, <video>

🔹 Attribute Rules

  • Always use name="value" format

  • Always use quotes around values

  • Attributes must be written in the opening tag

  • You can use multiple attributes in one element

🔹 Example: Image with Attributes
<img src="flower.jpg" alt="Beautiful Flower" width="300" height="200">
🔹 Example: Styling with style Attribute
<p style="color: red; font-size: 20px;">This is a red paragraph.</p>
🔹 Example: Tooltip with title
<p title="This is a tooltip!">Hover over me to see tooltip.</p>
🔹 Example: id and class Attributes
<p id="main-text" class="highlight">This is important text.</p>

You can then style it using CSS like:

#main-text {
  font-weight: bold;
}
.highlight {
  background-color: yellow;
}

Practice Questions

Q1. Create an anchor tag with an href pointing to https://example.com.

Q2. Insert an image using the src and alt attributes.

Q3. Use the style attribute to change a paragraph's color to green.

Q4. Add a title to a heading that shows “Main Title” when hovered.

Q5. Add a paragraph with id="intro" and class="text".

Q6. Use the width and height attributes to resize an image.

Q7. Create a tooltip using the title attribute in a <p> tag.

Q8. Use multiple attributes (e.g., style, title) in one <div>.

Q9. Create a styled button using style="background-color: blue;".

Q10. Add a class="warning" to two different elements.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top