HTML ATTRIBUTES COMPLETE GUIDE
HTML |
5th Apr, 2019
Welcome again to another wonderful lesson on HTML. In this lesson, we will study how to use the HTML attributes to achieve a lot of thing in HTML.
Sometimes using the HTML attributes will even make your HTML look like a programming language because you will be able to manipulate things inside the HTML tags dynamically. Example the id attribute can be used to link to different parts of a webpage together with the 'href' attribute.
<!DOCTYPE html>
<html>
<head>
<title> This is html attribute Example</title>
</head>
<body>
<p id="p1"> this is the first paragraph</p>
<!-- the link below will toggle to html element with id="p1" -->
<a href="#p1">Click here to navigate to the paragraph with id of p1</a>
</body>
</html>
An attribute is defined inside the opening part of a ‘tag’. For example, in the below code, the attribute ‘href’
is defined inside the ‘a’ tag.
<!DOCTYPE html>
<html>
<head>
<title> definig attribute in html</title>
</head>
<body>
<!-- This is the hyperlink attribute -->
<a href="#"></a>
</body>
</html>
An attribute has two parts i.e. ‘name’ and ‘value’. For example, in the above code, name and value of the attribute are ‘href' and ‘#’ respectively.
In HTML, there are core values that every developer should be aware of and they are listed below.
1. ID ATTRIBUTE
Id as the name emphasis is the unique object for accessing a tag on a web page.
· It is very useful in distinguishing an element from others.
· The id can also be very important if you want to use JavaScript to manipulate the contents of the webpage. In this case, no two elements should have the same id value in order to successfully achieve what you are doing.
· Below is an example of paragraph elements with different ids
<p id=”p1”>this is the first paragraph</p>
<p id=”p2”>This is the second paragraph</p>
2. CLASS ATTRIBUTE
The attribute ‘class’ can be used with multiple tags. This is very useful in making groups in HTML design.
<p class="content"> This is paragraph with class 'content'</p>
<span class="content"> This is span with class 'content'</span>
The class attribute is very often used in HTML because virtually all the elements on a webpage can have a single class attribute and it will still work fine unlike id attribute.
The class also can be used easily with JavaScript and stylesheet to easily make some changes to the DOM.
These two core attributes i.e. id and class are often used in HTML to do a whole lot of things in a webpage.
OTHER ATTRIBUTES
SRC ATTRIBUTE
This attribute is just like every other HTML attribute but the difference is what it does.
This type of attribute is used to insert an object into a webpage and it will display in the browser according to the format it was called.
The src attribute is used to tell the source of a file to be included.
The src attributes can be used in a lot of html tags like <img>, <iframe>, <scricpt>, <link>, etc.
Image tag has two important attributes i.e. ‘src’ and ‘alt’ as described below,
• src: tells the location of ‘image’ file e.g. ‘logo.jpg’ will be searched inside the folder 'img folder'.
Alt: this will tell the alternate text to display if the image doesn’t display.
<img src=”limg/logo.png” alt=”this is my logo” class=”img” id=”img1” />
The above example shows us that an HTML tag or element can contain different attributes and as well, work properly as expected.
You are free to experiment with all these examples using your favourite HTML editor so that you will understand it all.
This does not mean that these are the only HTML attribute that is important.
Virtually all the attributes are important when needed.
For the complete list of all the HTML attributes and how to use it please see details here
Thanks for reading if you have any question feel free to reach us using the comment section and we will get back to you.
Please support us by sharing this content with others on the social media channel that you follow.
To receive weekly newsletter from us signup below, we dont spam, and your information is secure with us
