learn2kode.in

Menu

HTML Tutorial

Menu

HTML Attributes

Introduction

HTML attributes provide extra information about elements.
They are always written inside the opening tag and usually come in name/value pairs like this

Copy Text 
name="value"

Example

Copy Text 
<a href="https://www.learn2kode.com">Visit Learn2Kode</a>

  • href → is the attribute name

  • "https://www.learn2kode.com" → is the attribute value

Output

Visit Learn2Kode

Common HTML Attributes

Attribute Description Example
href Specifies the link destination <a href="https://learn2kode.com">Link</a>
src Specifies the image or media source <img src="image.jpg" alt="Image">
alt Alternative text for images <img src="image.jpg" alt="Description">
title Adds a tooltip text <p title="This is a tooltip">Hover here</p>
style Adds inline CSS styling <p style="color:red;">Red text</p>
id Assigns a unique identifier <div id="main">Content</div>
class Groups elements with the same name <p class="intro">Text</p>
width & height Define image or element size <img src="image.jpg" width="200" height="100">

Using Multiple Attributes

An element can have more than one attribute.
Each attribute is separated by a space.

Example Code

Copy Text 
<img src="logo.png" alt="Learn2Kode Logo" width="200" height="100">

Output

Copy Text 
🖼️ Displays image (logo) with width 200px and height 100px.

The href Attribute

Used in the <a> tag to define a link destination.

Copy Text 
<a href="https://www.learn2kode.com">Go to Learn2Kode</a>

Output

Go to Learn2Kode

You can also open a link in a new tab using the target="_blank" attribute.

Example Code

Copy Text 
<a href="https://www.learn2kode.com" target="_blank">Open in new tab</a>

Output

Visit Learn2Kode

The src and alt Attributes

Used in <img>, <audio>, <video> elements to specify the source of the media.

Example Code

Copy Text 
<img src="https://via.placeholder.com/150" alt="Placeholder Image">

Output

Explanation

  • src defines the image location

  • alt provides alternative text if the image fails to load

The style Attribute

  • The style attribute is used to apply inline CSS directly to an HTML element.

Copy Text 
<p style="color:blue; font-size:18px;">Styled paragraph with blue text.</p>

Output

Copy Text 
<p style="color:blue; font-size:18px;">Styled paragraph with blue text.</p>

The title Attribute

Displays extra information when the user hovers over an element.

Example Code

Copy Text 
<p title="This is a tooltip!">Hover over this text.</p>

Output

Copy Text 
Hover over this text → (shows tooltip “This is a tooltip!”)

The id and class Attributes

Example Code

Copy Text 
<p id="unique">This paragraph has an ID.</p>
<p class="highlight">This paragraph has a class.</p>

CSS Example

Copy Text 
#unique {
  color: green;
}
.highlight {
  background-color: yellow;
}

Output

  • “This paragraph has an ID.” → green text

  • “This paragraph has a class.” → yellow background

Boolean Attributes

  • Some attributes don’t need values — their presence alone is enough.
    These are called boolean attributes.

Examples

Copy Text 
<input type="checkbox" checked>
<input type="text" disabled>

Explanation

  • checked → checkbox starts selected

  • disabled → input field not editable

HTML Headings