What is an HTML attributes ?
HTML attributes are special words which provides additional information about the elements.
HTML attributes defines the behaviour of that element.
Each HTML elements or tags can have attributes.
How to implement HTML attributes ?
HTML attributes should always be applied with start tag.
HTML attributes usually implemented in name/value pairs like name=”value”.
HTML attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
The value for the name to be set should always put in quotations.
Syntax :
<element attribute_name="attribute_value">
- element
Defines the HTML element.
2. attribute_name
Defines the HTML attribute name.
3. attribute_value
Defines the HTML attribute value.
HTML designing !!!
Click to Learn More about – HTML Tutorial for beginners
Most commonly used Attributes in HTML
1. lang Attribute
2. title Attribute
3. style Attribute
4. href Attribute
5. src Attribute
6. width and height Attributes
7. alt Attribute
8. id Attribute
1. lang Attribute
HTML lang attribute is used to declare the language of the webpage.
This helps in accessing the webpages and also searching in search engines.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<!-- Webpage content -->
</body>
</html>
Output :
Want to Learn More About – HTML Formatting
Let Us Discover More About – HTML Formatting
2. title Attribute
HTML title attribute explains an element on hovering the mouse over it.
This displays the value as a tooltip when we mouse over the element.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>This content is displayed in the browser title</title>
</head>
<body>
<!-- Webpage content -->
<p title="This is the title of the Paragraph tag">This is a pragraph tag which displays the title value when mouse over this p-element</p>
</body>
</html>
Output :
3. style Attribute
HTML style attribute provides various CSS(Cascading Style Sheets) effects to the HTML elements.
We can define the font-size, changing font-family, color of the elements.
Example :
<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Chaparral Pro Light;">Heading tag with Font Family : Chaparral Pro Light</h2>
<h3 style="font-size:30px;">Heading tag with Font size : 30px</h3>
<h2 style="color:blue;">Heading tag with font color Blue</h2>
<h2 style="text-align:center;">Heading tag with center alignment</h2>
</body>
</html>
Output :
Want to Learn More About – HTML Headings
Let Us Discover More About – HTML Headings
4. href Attribute
HTML href attribute defines the hyperlink.
HTML href attribute is used to specify a link to any address.
HTML href attribute is implemented along with <a></a> tag.
The new link is provided inside the href attribute, and when clicked the web browser loads the tag with the new link address.
Normally it will load the new link in the same tab, and if we want to load in new browser tab or another window we have to set the value as target=”_blank”.
Example :
<html>
<head>
<title>href Attribute</title>
</head>
<body>
<a href="https://www.google.com">
Click to open in the same tab
</a><br>
<a href="https://www.google.com" target="_blank">
Click to open in a different tab
</a>
</body>
</html>
Output :
5. src Attribute
HTML src Attribute is used to define the source location of the image.
This will load the images inside the webpage from its image address.
We need to use the <img> tag and the src attribute for this implementation.
Example :
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/HTML-PixTeller-1-2.png">
</body>
</html>
Output :
Want to Learn More About – HTML Class
Let Us Discover More About – HTML Class
6. width and height Attributes
This attribute is used to adjust the width and height of an image.
Usually the width and height attributes are defined in pixels.
Example :
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/HTML-PixTeller-1-2.png" width="500px" height="500px">
</body>
</html>
Output :
7. alt Attribute
HTML alt attribute is used to display something if the primary attribute fails to display the value assigned to it.
Usually this tag is used to display and describe the image to the developer.
HTML alt attribute value is used in the search engines.
Example :
<html>
<head>
<title>alt Attribute</title>
</head>
<body>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/HTML-PixTeller-1-2.png" alt="HTML Tutorials"><br>
</body>
</html>
Output :
HTML Tags Full Tutorial For Beginners !!!
Let Us Discover More About – HTML Tags
8. id Attribute
HTML id Attribute is used to provide a unique identification to an element.
If we have two elements with similar names, in order to distinguish/identify the elements we can have id attribute to the elements.
We can modify the specific element properties with the help of id attributes.
Example :
<html>
<head>
<title>id Attribute</title>
</head>
<style>
#welcome{
color:blue;
}
#p1{
color:brown;
}
#p2{
color:red;
}
</style>
<body>
<p id = "welcome">Welcome to CSTechbook</p><br>
<p id = "p1">This is a simple paragraph</p><br>
<p id = "p2">This is a simple paragraph</p>
</body>
</html>
Output :
Other HTML attributes will be discussed in future chapters.
Want to learn html coding simple – HTML Elements
Let Us Discover More About – HTML Elements
Video Tutorial – Watch on Youtube
Want to Learn More About – HTML Tags
Let Us Discover More About – HTML Tags
Having read this I believed it was extremely enlightening.
I appreciate you finding the time and energy to put this informative article together.
I once again find myself personally spending a lot of time both reading
and leaving comments. But so what, it was still worth it!
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.