Back to: HTML Tutorials
Attributes in HTML with Examples
In this article, I am going to discuss Attributes in HTML with Examples. Please read our previous article where we discussed HTML Tags and Elements with Examples. At the end of this article, you will learn everything about HTML Attributes with Examples.
What are Attributes in HTML?
HTML Attributes provide additional information about the elements in the HTML document. All elements in an HTML document can have attributes. It is very important to note that attributes are always defined in the opening tag of an element. For better understanding, please have a look at the below image where we have added the src and alt attribute to the HTML IMG element.
Attributes are always written in name-value pairs inside the opening tag of an element. For better understanding, please have a look at the below image.
Attributes are case sensitive and it is recommended to write attributes name & value in lowercase. Multiple attributes can be added to a single HTML element, but there must be a space between them. Attributes define additional properties of elements for example color and font of a text.
The Href Attribute
The href property defines the URL of a particular web page. Href attributes are typically used in combination with anchor tags to create hyperlinks.
<a href="https://www.dotnettutorials.net">Visit Dot Net Tutorials</a>
When you click on the above text it will take you to the www.dotnettutorials.net website.
The Src Attribute
The URL of the image to be embedded in the document is provided by the src attribute. There are two types of URLs available i.e. relative URLs and absolute URLs.
Absolute Url
Assume we’re including an image in our website that isn’t in our system but is on someone else’s website. Then we need to add the image link inside the src attribute as a value this type of URL is known as absolute URL.
< img src="https://www.xyz.com/image" >
Here https://www.xyz.com/image is the link for the desired image.
Relative Url
If the image is already in our system, we only need to enter the image’s path as a value inside the src attribute; this type of URL is known as a relative URL. It’s a good practice to use relative URLs to avoid errors.
< img src="desktop/image.jpg" >
Here the image is located on our desktop so we have added the path of the image to the src attribute.
In the case of an absolute URL, if the image is deleted from our source website, we would not be able to display it on the screen. So, in the case of an absolute URL, we are dependent on an external source to display an image on the screen, whereas a relative URL is not dependent on any external source to display an image on the screen. This is the advantage of relative URLs over absolute URLs.
The Width and Height Attribute
The width and height attributes in the image element are used to specify the width and height of an image.
< img src="bike.jpg" width="450" height=”300”>
The above example will set the image width 450 px and height 300 px.
The Alt Attribute
The Alt attribute is used to specify alternate text for an image in an HTML document. If the browser is unable to view the image, alt text will appear on the screen.
< img src="image.jpg" alt=" Alt Text" >
The Dir Attribute
The dir attribute determines the text direction of the element’s content. The default text direction of an element is left to right.
<p dir="rtl"> Write this text right-to-left! </p>
<p dir="ltr"> Write this text left-to-right! </p>
Dir attribute has three values LTR, RTL & auto.
- LTR is default value for texts i.e. left-to-right text direction.
- RTL i.e. right-to-left text direction.
- Auto figure out the text direction based on content.
The Style Attribute
Style attribute allows you to write CSS inside Html elements to give them styling. This way of writing CSS is known as inline CSS.
<p style="color : red;"> This is a red paragraph.</p>
This will apply red color to the paragraph text. Here color is a property and red is a value given to that property.
There are two more ways to write CSS internal styling and external styling we will discuss them later. Styling plays a very vital role in improving the overall appearance of websites. One can add different animations and transitions using CSS.
The Title Attribute
In the Html element, the title attribute is used to define some extra information about the element. The value of the title attribute will be visible when you mouse over an element.
<p title="I'm a tooltip"> This is a Tooltip </p>
Tooltips are useful when you want to display a message to a user when they hover over a certain element.
The Lang Attribute
In the Html document language attribute is used to declare the language of the web pages. Language attributes take two value first two characters define the language of the web page and last two character defines the country.
Example:
The below example specifies English as the language and India as a Country.
<!DOCTYPE html> <html lang="en-IN"> <body> ... </body> </html>
In the next article, I am going to discuss Heading and Paragraph in HTML with Examples. Here, in this article, I try to explain Attributes in HTML with Examples and I hope you enjoy this Attributes in HTML with Examples article.
