In the previous chapter, we learned the basics of HTML tags and elements. You can make elements more useful by using attributes.
What is HTML Attribute?
In HTML, attributes are special words or properties that provide extra information about an element.
Attributes are always appear inside the opening tag of an HTML element.
HTML Attributes help to customize HTML elements.
We can add identifiers, styles, links, and more using attribute.
Every HTML element can contain attributes if needed.
Attributes are consist of a name and a value, separated by an equal sign like
name="value"
(For example:
height="20px").
Syntax:
Notes:
In HTML, attributes name are case-insensitive. so HREF and href are treated the same, but use lowercase for consistency.
Spaces or special characters are not allowed in attribute names.
Don't use spaces between the attribute name, the "=" and the value. Good: attribute="value"; Bad: attribute = "value".
Best Practices
Attribute values must be enclosed in quotes.
Double or single quotes can be used.
Always use double quotes unless there’s a specific reason to use single quotes.
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.
Always quote attribute value.
