Attributes in HTML

To this section, all we have learned is about elements (tags). But that is very basic. In HTML, to create great pages and great web-applications, you need more than tags.
For that, attributes come into the picture.
Attribute is nothing but the key and value pair of information.

Use of Attribute

By just using elements, you won't be able to format and stylize the elements to make the proper webpage. In all the example we have seen, we have followed the structure of HTML but do you think that they were web-pages? You don't. Actually, they were webpages but they don't look like one.
Using attributes, you will be able to start making them proper. It takes more than attribute but it is a start.

Syntax

Attribute is the pair of name and value.
Syntax is : <tag name="value"></tag>

Example

This is paragraph with class attribute.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p class="native-style" >
            This is paragraph with class attribute.
        </p>
    </body>
</html>
                        

From above example, class is an attribute name and native-style is the value.

Main Attributes

There are many attributes in HTML and you also can add your custom attribute ( We will see it in future ). But There are three attributes that will be used more than any other:

  • id
  • class
  • style

id attribute

id attribute is used to identify the element in HTML.
There will be many elements of the same type. So If you need to differentiate one element from another, you can use id attribute.
By Using id:

  • You can apply some style using CSS to that particular element
  • You can get that element using JavaScript and manipulate it

If you don't use id and want to apply some style using CSS to single perticular element, you can not do it. ( Unless you use class ).

Remember, id must be unique in whole HTML page.

This paragraph element has an id.

This paragraph element doesn't have an id.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="first-child" >
            This paragraph element has an id.
        </p>
        <p>
            This paragraph element doesn't have an id.
        </p>
    </body>
</html>
                        

In the above example, there are two paragraph elements. If you want to apply some style to the first paragraph or want to know the content of the first paragraph using JavaScript, You need to differentiate it from the other paragraph element.
So we have added id="first-child". Using "first-child", you can differentiate the element and apply style using css or get the content using JavaScript.

class attribute

class attribute is little different than id attribute.
You can provide class attribute to as many elements as you want but id attribute should be unique.
If you need to have some element which has the same styles or need to manipulate in the same way using JavaScript, you can add same class attribute to those elements.

This paragraph has "native-style" class.

This paragraph has "native-style" class.

This paragraph is without class.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p class="native-style">
            This paragraph has "native-style" class.
        </p>
        <p class="native-style">
            This paragraph has "native-style" class.
        </p>
        <p>
            This paragraph is without class.
        </p>
    </body>
</html>
                        

.native-style{
    font-family: "Times New Roman";
    margin: 0px;
    padding: 0px;
    border: 0;
    line-height: unset;
}

As you can see from above, "native-style" class is added to two paragraph elements. And they are styled accordingly.
You can add multiple class to the same element. Let us have a look at the following example.

This paragraph has "native-style" class. But it is left.

This paragraph has "native-style" class. But it is centered.

This paragraph is without class.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p class="native-style text-left">
            This paragraph has "native-style" class. But it is left using class "text-left".
        </p>
        <p class="native-style text-center">
            This paragraph has "native-style" class. But it is centered using class "text-center".
        </p>
        <p>
            This paragraph is without class.
        </p>
    </body>
</html>
                        

.native-style{
    font-family: "Times New Roman";
    margin: 0px;
    padding: 0px;
    border: 0;
    line-height: unset;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}

Why do you need to apply two class to the same element?
You must have understood the above example. If you need to apply some style provided by a class and also want some style provided by other class, then you may have to apply two or in many cases more classes to a single element.
Now, you would think that instead of applying two class, how about combine all the style into a single class and then provide that class to the element?
Let us have a look at that kind of example to solve your query.

This paragraph has "native-style-left" class.

This paragraph has "native-style-center" class.

This paragraph is without class.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p class="native-style-left">
            This paragraph has "native-style-left" class.
        </p>
        <p class="native-style-center">
            This paragraph has "native-style-center" class.
        </p>
        <p>
            This paragraph is without class.
        </p>
    </body>
</html>
                        

.native-style-left{
    font-family: "Times New Roman";
    margin: 0px;
    padding: 0px;
    border: 0;
    line-height: unset;
    text-align: left;
}
.native-style-center{
    font-family: "Times New Roman";
    margin: 0px;
    padding: 0px;
    border: 0;
    line-height: unset;
    text-align: center;
}
                        

Try to have a look at the CSS part. It is ok if you don't know what all the CSS statement means.
But you can think logically to have some common statement in all the class? Let us take it out and create a common class. So that the size of the CSS file reduces and it is very easy to maintain.
Remember, In regular web pages, there will be so many classes and ids. So you need to think more logically.

style attribute

You aleready have seen that using id or class attribute, we can provide style to the elements. But there is style attribute to provide inline style. Let us have a look at the example.

This paragraph has style attribute which makes it aligned center and it is blue.

This paragraph is red.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p style="text-align: center; color: blue">
            This paragraph has style attribute which makes it aligned center and 
            it is blue.
        </p>
        <p style="color: red">
            This paragraph is red.
        </p>
    </body>
</html>
                        

As you can see from the above example, style attribute can have multiple values separated by ";".
Right now, you don't have to worry about the style and CSS. But remember the attribute.

Other Attributes

There are some other attributes as well which will be useful to you during working with HTML.

Attribute Vaules Description
bgcolor rgb value, hexadecimal or numeric Set the background color of the element
background URL Adds an image in the background of the element
align left, center or right Horizontally aligns the element left, center or right
valign top, middle or bottom Vertically aligns the element top, middle or bottom

There are also other attributes that we will see turn by turn according to our need. But now you know, that there is something other than just elements in HTML :P.

Conclusion

In this section, you learned about different Attributes.
In next section, we will learn about meta tags in HTML.