HTML Attributes

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.
Table Of Content-

Html ID Attribute

The ID attribute is used to assign a unique identifier to an HTML element.

This identifier can be used to target the element with CSS or JavaScript.

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:

Example:

<!DOCTYPE html> <html> <body><a href="https://mrexamples.com">Open Mr Example</a></body> </html>

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.

The src element is used to provide the full path of the picture that is going to be displayed in html attributes :

Example

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg"></body> </html>

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”.

Please Note: Copyright may apply to external photos. You could be breaking copyright laws if you use it without authorization. Additionally, you have no control over external photos; they might be modified or withdrawn at any time.

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 “/“.

Example: src=”img_girl.jpg”.

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).

Example

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" width="400" height="650"></body> </html>

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.

Example

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Girl with a jacket"></body> </html>

As an example, let’s try to display an image that doesn’t exist:

<!DOCTYPE html> <html> <body><img src="https://mrexamples.com/wp-content/uploads/html_images/img_typo.jpg" alt="Girl with a jacket"></body> </html>
Tip: You will learn more about images in our HTML Images chapter.

The style Attribute

Styles, such as color, font, size, and more, are added to an element with the style attribute.

Example

<!DOCTYPE html> <html> <body><p style="color:red;">This is a red paragraph.</p></body> </html>
Recommendation: You may learn more about styles in the HTML Styles page of our guide.

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:

Example

<!DOCTYPE html> <html lang="en"> <body> … </body> </html>

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:

<!DOCTYPE html>
<html lang=”en-US”>
<body>
…
</body>
</html>

Here is a list of all the language codes in HTML.

The title Attribute

The 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:

Example

<!DOCTYPE html> <html> <body><p title="I'm a tooltip">This is a paragraph.</p></body> </html>
Recommendation: Use lowercase attributes and always quote attribute values whenever possible.

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.

Good:

<!DOCTYPE html>
<html>
<body>

<a href=”https://mrexamples.com/html/”>Mr Example HTML tutorial</a>

</body>
</html>

Bad:

<!DOCTYPE html>
<html>
<body>

<a href=https://mrexamples.com/html/>Mr Example HTML tutorial</a>

</body>
</html>

Quotes are sometimes necessary. A space will prevent this example from displaying the title attribute correctly:

Example

<!DOCTYPE html> <html> <body><p title="About" mr examples></p></body> </html>

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:

<!DOCTYPE html>
<html>
<body>

<p title=’Elon Musk “kill” doge’>

</body>
</html>

Alternatively, you can do the opposite:

Example

<!DOCTYPE html> <html> <body><p title="Elon Musk 'kill' doge"></p></body> </html>

Conclusion

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.

Kindly leave your valuable response as a reaction regarding this article to improve or maintain the quality content on this site.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *