In this article, we’ll cover the most common HTML attributes and how to use them.
HTML attributes are used to provide additional information about HTML elements.
Please keep the following points in mind:
- Any HTML element can contain attributes.
- Attributes can be utilised to characterise elements further.
- An opening tag must always set attributes.
- When name=”value” is operated, the name and value are usually paired jointly.
Html ID Attribute
The ID attribute is used to assign a unique identifier to an HTML element.
Here’s an example:
<div id="mrexamples">This div has the ID "mrexamples".</div>
Html href Attribute
The href attribute is used to specify the URL of a hyperlink.
Hyperlinks are determined utilising the <a> tag.
By operating the href attribute, you can specify the URL of the page where the link indicates in HTML attributes:
Our HTML Links chapter provides more information about links.
Html src Attribute
Html src attribute is used to specify the URL of an external resource, such as an image or script file.
To include an image in an HTML document, the
<img> element must first be used.
src element is used to provide the full path of the picture that is going to be displayed in html attributes :
In html attributes the URL may be specified in the src property in two ways:
1. Absolute URL – The link takes the visitor to another website where there is an external image available for viewing.
Example Link: src=”https://mrexamples.com/images/img_girl.jpg”.
2. Relative URL –
Contains a link to an image that is hosted within the website itself. Domain names are not included in this URL. It is relative to the current page if the URL begins without a slash “/“.
URLs that begin with a slash are relative to their domain. An example would be src=”/images/img_girl.jpg”.
Use relative URLs nearly always for optimum results. If you switch domains, they won’t stop working.
Width and height Attributes
The width and height elements of an image <img> tag are used to indicate the image’s physical dimensions, which must select in pixels (px).
The alt Attribute
If an image cannot be displayed due to a broken link, slow internet connection or a mistake in the src attribute, the alt attribute specifies an alternate text.
As an example, let’s try to display an image that doesn’t exist:
The style Attribute
Styles, such as color, font, size, and more, are added to an element with the style attribute.
The lang Attribute
The lang property inside the <html> element is required to indicate the language of the Web page. The intention of this is to help browsers and search engines.
As an example, let’s use English as the language:
The lang attribute can also include country codes. Therefore, the language of the HTML page is specify by the first two characters, while the country is defined by the last two characters.
Here is an example using English as the language and the United States as the country:
Here is a list of all the language codes in HTML.
The title Attribute
title attribute defines some extra information about an element as it comes to HTML attributes.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Attribute names do not need to be in lowercase or require quotation marks according to the HTML standard. Like title and TITLE, the title attribute can be written in uppercase or lowercase when it comes to HTML attributes.
For stricter document types like XHTML, Mr. Examples recommends lowercase attributes and quotation marks.
<a href=”https://mrexamples.com/html/”>Mr Example HTML tutorial</a>
<a href=https://mrexamples.com/html/>Mr Example HTML tutorial</a>
Quotes are sometimes necessary. A space will prevent this example from displaying the title attribute correctly:
HTML Attributes: Single or Double Quotes?
HTML attributes are most commonly enclosed with double quotes, but single quotes can also be used.
It is sometimes necessary to use single quotes when the attribute value contains double quotes when it comes to HTML attributes:
<p title=’Elon Musk “kill” doge’>
Alternatively, you can do the opposite:
HTML attributes provide additional information about HTML elements, allowing you to control the appearance, behavior, and function of your web pages.
By understanding the purpose and function of each HTML attribute, you can create beautiful and functional web pages that are easy to navigate and use.