Last updated: Jan 28, 2017 by Raja Tamil
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 identified.
What are HTML Attributes and How to Create Them?
HTML Attributes are just a key-value pairs 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 of 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.
<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.
4. Title, Data 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
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) .
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!