Learn HTML – Attributes

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn8

 

In this blog, I am going to be showing you the basic in and outs of HTML Attributes. If you just started learning HTML, CSS and Javascript, building web pages or if you have some working experience creating websites but still not sure how do I see the overall picture of creating and using HTML Attributes, then this blog’s intention is to help you answer those questions.

 

I would assume that you already know what an HTML Tag, HTML Element, and CSS Selectors are. If you’re not sure about them, I would recommend you to learn those first before going any further.

 

1. How to create HTML Attributes?
2. How to identify any HTML Attribute under one of three categories I have isolated.

 

What are HTML Attributes and How to Create Them?

HTML Attributes are just a key value pair attached to any HTML Element. It’s always inserted inside the starting tag. It helps to add some more information about an element such as semantic value, style, functionality, etc. You can add more than one attribute to an element separated by a blank space.

 

<htmltagname attributeName="attributeValue">Content goes here</htmltagname>
<!-- Real Example -->
<html lang="en">content</html>

 

The above abstract example starts with an HTML Tag followed by attributeName then equal sign and the attributeValue inside double or single quotes. In the real example, I used lang=”en” attribute indicating the web page language is set to English.

 

Now we know how to create and insert an HTML Attribute to an Element. I have specified three categories of HTML Attributes below based on my personal experience to help you understand the overall picture about them.

 

Category 01: Predefined Attribute Names and Values

There are some HTML Tag specific attributes that we need in order to extend the information or functionality of an element. Those attributes are intended to be used only within specific HTML Elements.

 

<input disabled=“disabled”>
<button disabled=“disabled”>
<a target=“_blank” href="http://www.softauthor.com">SoftAuthor</a>

As you can see in Line 1 and Line 2, “disabled” property can only be used inside HTML Form elements such as input, button, etc. In Line 3, “target” attribute can only be used inside an anchor tag. This attribute specifies whether the hyperlink should open a separate browser tab or not. These attributes are predefined and HTML Tag specific.

 

Category 02: Predefined Attribute Names and Custom Values

These attributes are very common and some of them are tag specific and some of them are global, which means you can attach those attributes to any HTML Element.

 

Tag Specific:

 

<a href=“www.softauthor” >SoftAuthor</a>

In the above example, the “href” attribute name can only be used inside the anchor tag but the value could be any URL. Let’s see an another example.

 

<img src=“www.softauthor.com/img/softauthor-logo.png”  alt=“softauthor-logo”  width=“200” height=“100”>

The “img” tag has four attributes and all of them are tag specific. As you can see those have a predefined attribute name and a custom value.

 

Global Attributes:

1. Class
2. Id
3. Style
4. Title, etc.

These attributes can be attached to any HTML Element. If you have already some experience with CSS, you already know the two common global attributes that are ID and CLASS. If you are not sure about them, I have a sample code below showing how to create ID and CLASS attributes below:

 

<header id=“main-head”></header>
<section class=“address”></section>

ID and CLASS are commonly used to style the element in a CSS document.

 

Category 03: Custom Attribute Names and Values

<p anyName=“anyvalue”></p>

 

We can specify any name and value to an element. I use custom attributes for two main reasons:

 

1. To give semantic value to an element that may be semantic or non-semantic. (semantic HTML tags such as header, footer, main, nav, etc and non-semantic tags such as div, span, etc)
.

 

2. Most of the time, you would not want to use id or class to target a specific element inside your javascript. I prefer to use a Custom Attribute always for Javascript so that you can separate ID or CLASS attributes for your CSS and Custom Attribute for your javascript.

 

 Feel free to check out and enroll in our online Javascript and JQuery course. Contact us for one FREE virtual online class from anywhere.

 

Leave a comment if you have any questions or suggestions. If you like it, don’t forget to share it with your friends. Thanks for reading!

 

 

About the author
Raja Thangarasu

Raja loves building Web and iOS Applications. He is always curious to explore latest technologies and concepts. He's working as a UI Developer and he is teaching various technologies at SoftAuthor. He likes to write blogs and create youtube videos when he has time to share his knowledge to the world. Visit his website for more information about him.

Sign up for our blog updates and newsletters!


100 % privacy. I hate spam as much as you do!

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn8