« Previous Next »

Attributes

All HTML elements can have attributes.
Attributes provide additional information about an element.
They are always specified in the start tag and usually come in name/value pairs.

Basic Syntax

<tagname attribute_name="value">Content</tagname>

Example

<a href="https://www.example.com">Visit Example</a>

Attribute Breakdown

Attribute Purpose Example
href Specifies the URL for a link <a href="https://example.com">
src Specifies the path of an image <img src="image.jpg">
alt Provides alternate text for an image <img alt="My Image">

href Attribute

Output :

src Attribute

Output :

width and height Attributes

The <img> tag should also include the width and height attributes.
These attributes specify the size of the image in pixels.

Basic Syntax

<img src="image.jpg" width="300" height="200">

Attribute Breakdown

Attribute Purpose Example Value
width Specifies the width of the image (in pixels) 300
height Specifies the height of the image (in pixels) 200

Output :

alt Attribute

The alt attribute is used with the <img> tag to specify alternate text for an image.
This text is displayed if the image cannot be shown — for example, due to a broken link, slow internet, or when using a screen reader.

Basic Syntax

<img src="image.jpg" alt="Description of the image">

Why alt is Important

  • Improves accessibility for screen readers.
  • Helps users understand the image if it fails to load.
  • Is important for SEO (Search Engine Optimization).

Attribute Breakdown

Attribute Purpose Example Value
alt Alternate text for the image "A beautiful sunset"

Output 4:

Practice Exercises

Task 1: Which attribute shows ExampleImage.jpg on screen?

Goal: Practice linking file paths to image tags.
💡 Hint: Pass the filename using src="ExampleImage.jpg".
💡 Show Solution 
<html>
  <body>
    <h2>Vintage Car Gallery</h2>
    <p>Check out this vintage car captured in the desert:</p>
    <img src="ExampleImage.jpg">
  </body>
</html>
Output :

Vintage Car Gallery

Check out this vintage car captured in the desert:

Explanation: The src attribute specifies the exact file path to load an image.
Task 2: How to set image size to 500x600?

Goal: Control element dimensions directly in HTML.
💡 Hint: Add width="500" and height="600" inside <img>.
💡 Show Solution 
<html>
  <body>
    <h2>Product Showcase</h2>
    <p>The image dimensions have been customized to fit the card layout:</p>
    <img src="ExampleImage.jpg" width="500" height="600">
  </body>
</html>
Output :

Product Showcase

The image dimensions have been customized to fit the card layout:

Explanation: The width and height attributes define pixel dimensions for image tags.
Task 3: What attribute shows text if image breaks?

Goal: Learn image fallback and accessibility handling.
💡 Hint: Use alt="Vintage Car in Desert" inside <img>.
💡 Show Solution 
<html>
  <body>
    <h2>Fast Loading Page</h2>
    <p>If the network drops, fallback text will describe this image:</p>
    <img src="ExampleImage.jpg" alt="Vintage Car in Desert" width="600" height="400">
  </body>
</html>
Output :

Fast Loading Page

If the network drops, fallback text will describe this image:

Vintage Car in Desert
Explanation: The alt attribute provides backup description text if an image fails to load.
« Previous Next »