• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Attributes Quiz

Q1: What is the purpose of HTML attributes?

A. To add animation
B. To provide extra information about elements
C. To remove elements
D. To comment code

Q2: Where are attributes placed in an HTML element?

A. After the closing tag
B. Inside the content
C. Inside the opening tag
D. Outside the tag

Q3: Which attribute is used to define a hyperlink destination?

A. src
B. link
C. href
D. alt

Q4: What does the alt attribute do in an image tag?

A. Sets the image width
B. Sets background color
C. Provides alternate text
D. Creates image captions

Q5: Which attribute adds inline CSS to an element?

A. css
B. style
C. design
D. font

Q6: What happens if you forget quotes around an attribute value?

A. It works fine
B. Browser throws an alert
C. May cause rendering issues
D. It auto-corrects

Q7: Which attribute is used to show text when the user hovers over the element?

A. hover
B. label
C. title
D. text

Q8: What does id in HTML do?

A. Changes font
B. Links external file
C. Assigns a unique identifier
D. Makes bold text

Q9: What is the difference between id and class?

A. id is for multiple elements; class is for one
B. id is for CSS only
C. id is unique; class can be reused
D. No difference

Q10: Which is the correct way to use multiple attributes?

A. <p style="color:blue", title="info">
B. <p style="color:blue"; title="info">
C. <p style="color:blue" title="info">
D. <p style=color:blue title=info>
← Previous Next →
Login
Go Back Top