HTML Attributes – Solved Practice Questions

By /

Introduction

HTML attributes provide extra information about HTML elements. They are written inside the opening tag and help control the behavior or appearance of an element. In this chapter, you’ll practice using common HTML attributes like href, src, alt, width, height, title, and target through simple solved questions.

Question 1

Problem Statement

Create a webpage that displays a heading with a title attribute. When you move the mouse over the heading, a tooltip should appear.

HTML Code

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

    <h1 title="Welcome to HTML">Learn HTML Attributes</h1>

</body>
</html>

Output

Learn HTML Attributes

(When you hover over the heading, the tooltip “Welcome to HTML” appears.)

Step-by-Step Explanation

  • title is an HTML attribute.
  • It is added inside the opening <h1> tag.
  • Moving the mouse over the heading displays the tooltip.
  • Attributes always appear inside the opening tag.

Question 2

Problem Statement

Create a webpage with a link that opens the Google homepage.

HTML Code

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

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

</body>
</html>

Output

Visit Google

(Clicking the link opens the Google homepage.)

Step-by-Step Explanation

  • <a> creates a hyperlink.
  • href specifies the destination URL.
  • The text between <a> and </a> becomes clickable.
  • href is one of the most commonly used HTML attributes.

Question 3

Problem Statement

Create a webpage with a link that opens YouTube in a new browser tab.

HTML Code

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

    <a href="https://www.youtube.com" target="_blank">
        Open YouTube
    </a>

</body>
</html>

Output

Open YouTube

(Clicking the link opens YouTube in a new tab.)

Step-by-Step Explanation

  • href defines the link destination.
  • target="_blank" opens the link in a new tab.
  • Both href and target are attributes of the <a> element.
  • Multiple attributes can be used in the same tag.

Question 4

Problem Statement

Display an image with a width of 300 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Width</title>
</head>
<body>

    <img src="nature.jpg" width="300" alt="Nature Image">

</body>
</html>

Output

[ Nature Image ]

(An image named nature.jpg is displayed with a width of 300 pixels.)

Step-by-Step Explanation

  • src specifies the image file.
  • width sets the image width.
  • alt displays alternative text if the image cannot load.
  • All three are attributes of the <img> element.

Question 5

Problem Statement

Display an image with a width of 250 pixels and a height of 200 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Size</title>
</head>
<body>

    <img src="flower.jpg" width="250" height="200" alt="Flower">

</body>
</html>

Output

[ Flower Image ]

(The image is displayed with a width of 250 pixels and a height of 200 pixels.)

Step-by-Step Explanation

  • src specifies the image location.
  • width controls the image width.
  • height controls the image height.
  • alt provides alternative text if the image is unavailable.

Question 6

Problem Statement

Create a webpage that displays an image. If the image cannot be loaded, show the text Laptop Image instead.

HTML Code

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

    <img src="laptop.jpg" alt="Laptop Image">

</body>
</html>

Output

[Laptop Image]

(If laptop.jpg is missing, the browser displays “Laptop Image” instead.)

Step-by-Step Explanation

  • src specifies the image file.
  • alt provides alternative text for the image.
  • The alt text is shown if the image cannot be displayed.
  • It also improves accessibility and SEO.

Question 7

Problem Statement

Create a webpage that displays a paragraph with a title attribute. When the user hovers over the paragraph, a tooltip should appear.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph Tooltip</title>
</head>
<body>

    <p title="HTML stands for HyperText Markup Language.">
        Move your mouse over this paragraph.
    </p>

</body>
</html>

Output

Move your mouse over this paragraph.

(Hover over the paragraph to see the tooltip.)

Step-by-Step Explanation

  • The title attribute creates a tooltip.
  • It can be used with many HTML elements.
  • The tooltip appears when the mouse pointer is placed over the element.
  • title improves the user experience by providing additional information.

Question 8

Problem Statement

Create a webpage with a link to your portfolio that opens in the same browser tab.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Portfolio Link</title>
</head>
<body>

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

</body>
</html>

Output

Visit My Portfolio

(Clicking the link opens the portfolio in the current browser tab.)

Step-by-Step Explanation

  • <a> creates a hyperlink.
  • href specifies the destination.
  • Since target is not used, the link opens in the current tab.
  • href is a required attribute for creating hyperlinks.

Question 9

Problem Statement

Display an image with a height of 180 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Height</title>
</head>
<body>

    <img src="car.jpg" height="180" alt="Sports Car">

</body>
</html>

Output

[Sports Car Image]

(The image is displayed with a height of 180 pixels.)

Step-by-Step Explanation

  • src specifies the image file.
  • height controls the image height.
  • alt displays alternative text if the image is unavailable.
  • Multiple attributes can be used in a single <img> tag.

Question 10

Problem Statement

Create a webpage that displays an image with a tooltip. When the user moves the mouse over the image, the tooltip Beautiful Sunset should appear.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Image Tooltip</title>
</head>
<body>

    <img src="sunset.jpg"
         alt="Sunset"
         title="Beautiful Sunset"
         width="300">

</body>
</html>

Output

[Sunset Image]

(Hover over the image to see the tooltip “Beautiful Sunset”.)

Step-by-Step Explanation

  • src specifies the image location.
  • alt provides alternative text.
  • title displays a tooltip on hover.
  • width sets the image width.
  • Multiple attributes can be added to a single HTML element.

Key Takeaways

  • HTML attributes provide extra information about HTML elements.
  • Attributes are always written inside the opening tag.
  • href is used to create hyperlinks.
  • src specifies the location of an image.
  • alt provides alternative text for images.
  • title displays a tooltip when hovering over an element.
  • width and height control the size of images.

Frequently Asked Questions (FAQs)

1. What is an HTML attribute?

An HTML attribute provides extra information about an HTML element and is written inside the opening tag.

2. Which attribute is used to create a hyperlink?

The href attribute is used with the <a> element to create hyperlinks.

3. Why is the alt attribute important?

The alt attribute displays alternative text if an image cannot load and improves accessibility.

4. Which attribute opens a link in a new browser tab?

The target="_blank" attribute opens a link in a new browser tab.

5. Which attributes control the size of an image?

The width and height attributes are used to control the image size.

6. Can one HTML element have multiple attributes?

Yes. An HTML element can have multiple attributes, such as src, alt, width, and title.

7. Where are HTML attributes written?

HTML attributes are written inside the opening tag of an HTML element.

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

Related Posts

Scroll to Top