HTML Attributes

HTML attributes provide additional information about HTML elements. Attributes are always written inside the opening tag and usually come in name/value pairs like name="value".

What are HTML Attributes?

Attributes are used to define extra properties of an element. They help control how elements behave or appear on a web page.

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

Example of HTML Attributes

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

In the example above, href is an attribute of the <a> tag that defines the link destination.

Common HTML Attributes

Attribute

Description

Example

href

Specifies the link URL

<a href="page.html">

src

Specifies image source

<img src="img.jpg">

alt

Alternative text for images

<img alt="My Image">

title

Extra information (tooltip)

<p title="Info">

The href Attribute

The href attribute is used with anchor tags to define the URL of the page the link goes to.

Example

<a href="https://google.com">Go to Google</a>

Try this code

The src Attribute

The src attribute specifies the path to an image. Without this attribute, images cannot be displayed.

Example

<img src="image.jpg">

Try this code

The alt Attribute

The alt attribute provides alternative text for an image. It is very important for accessibility and SEO.

Example

<img src="logo.png" alt="Website Logo">

Try this code

The title Attribute

The title attribute adds extra information about an element. It appears as a tooltip when the mouse hovers over the element.

Example

<p title="This is a paragraph">Hover me</p>

Try this code

Global Attributes

Global attributes can be used with any HTML element.

class – Used to style elements with CSS
id – Used to uniquely identify an element
style – Inline CSS styles
title – Extra information

Example Using class and id

<p id="intro" class="highlight">
This is a paragraph
</p>

HTML Attributes are Not Case Sensitive

HTML attribute names are not case sensitive. This means that browsers treat uppercase and lowercase attribute names the same. However, it is recommended to always use lowercase attribute names for better readability and consistency.

Single vs Double Quotes

Attribute values can be written using single or double quotes. Double quotes are more commonly used.

<p title="Hello">
<p title='Hello'>

Why HTML Attributes are Important?

They provide extra information about elements
They help in styling with CSS
They enable JavaScript interactions
They improve accessibility and SEO