HTML Attributes provide additional information about HTML elements. Attributes are the power behind HTML.
What is HTML Attribute?
In HTML, an attribute is a modifier of an HTML element that provides essential information about the element.
HTML Attributes help to customize HTML elements by adding details such as identifiers, styles, links, and more.
Every HTML element can contain attributes if needed.
Attributes always appear inside the opening tag of an element.
Attributes typically consist of a name and a value, separated by an equals sign like
name="value"
(For example:
height="20px")
Notes:
HTML Atrributes are case insensitive.
Always quote attribute values.
Common HTML Attribures
Some attributes are frequently used in web development. Let's take a look at them.
id,
class,
style,
href,
src,
alt,
title,
width,
height,
The id attribute
The id attribute assigns a unique identifier or name
to an HTML element.
IDs are especially useful when you want to style or target a specific element.
Example:
<p id="earth">Earth's beauty is truly unique.</p>
The class attribute
The class attribute defines a group of elements to
apply the same styling or behavior to them.
Example:
<p class="planet">Earth is the third planet from the Sun in our solar system.</p>
The style attribute
The style attribute lets you apply inline CSS
styling to elements.
This is useful for adding specific styling directly to a tag without using an external stylesheet.
Example:
<p style="color: green; font-size: 16px;">This is my styled Paragraph.</p>
Try It Yourself
The color and font-size are CSS properties. You will learn more about them in our CSS Tutorial
The href Attribute
The
<a>
(anchor) tag used to create a hyperlink.
The href attribute specifies the destination
URL for the hyperlink.
When a user clicks on the link, the browser navigates to the specified URL.
Example
Try It Yourself
Note:
The href attribute is mostly used for creating hyperlinks.
It can also be used in various other ways to link to email addresses, sections of the page, or files.
The src (source) attribute
The src (source) attribute in HTML
specifies the location (URL) of external files.
The src attribute allows you to embed
media or external files directly into a webpage
It is used by certain elements, such as images, audio, video, iframes, and scripts.
Example:
Note:
There are two ways to specify the URL in the src attribute:Relateive URL: Links to an image hosted on an external website.
Example: src="https://www.w3studies.com/images/cute_girl.jpg".
Absolute URL: Links to an image hosted on an external website.
Example: src="/images/cute_girl.jpg".
The alt attribute
The alt attribute provides alternative text for an image
The text alternatively displayed if the image cannot be displayed.
The alt attribute is helpful for accessibility.
Example:
The width and height attribute
The width and height attributes define the image size and they are commonly used with <img> elements. They can also be applied to other tags, like<iframe>.
You will learn about <iframe> latter.
Example:
<img src="profile_picture.jpg" width="100px" height="50px"/>
Notes:
Atrributes are case insensitive So you can use
name="value"
or
NAME="VALUE".
But our recomendation is always use lowercase it's helpful for understanding and read HTML code
Alays quote attribute value
>> Learn all HTML attribute in "HTML Reference" chapter.
