Web Development

Attributes in HTML

Attributes in HTML is the 3rd section of the Beginner’s Guide to HTML.

Attributes in HTML

In the earlier section we learned about HTML elements. In this section we are discussing about how to provide additional information for those elements. So that’s how the attributes comes into action.

We can use attributes to say how the elements should be. All the elements can have attributes and they should be placed in the starting tag. Attributes comes with the name – value pair like the follow.

name=”value”

Let’s put a attribute on our body element.

[code language=”html”]

This is the content


[/code]

We put a id attribute in there. So now on we can uniquely identify our body element by using the given id my_body_id. Not only the id attribute, there are number of other attributes that you can use in a starting tag of an element. Some are common to all elements, and some are specific to their behavior. Let’s go deep into this attribute matter.

Attributes and quotes

Attribute values needed to be always enclosed with quotes, either double quotes or single quotes. As a general practice we suggest you to use double quotes because that is the way widely been used in the industry.  But in some situations you might be needed something like this.

[code language=”html”]

This is the content


[/code]

See the name attribute. It contains single quoted 001 inside of double quotes. This means the name attribute value is my_’001’_body.

Use Lowercase

Well actually this is not necessary because attribute names and values are case insensitive. But as a standard practice we suggest you to do so because W3C (World Wide Web Consortium) recommends to use lowercase for HTML version 4 and demand to use in XHTML version.

Let’s Tryout Attributes

So here are few examples of attributes that you can do by your self to learn the usage. But remember that there are many more attributes than these.

class

This attribute comes related with the CSS. It refers to a class in the style sheet where the element has specified. There will be a whole new tutorial to cover CSS. Anyway we’ll demonstrate how to use it in here. Don’t worry if you find it difficult.

[code language=”html”]





[/code]

What you see is something like this.

In the CSS we defined font color of the my_class_example class should be always green. (Classes of CSS are represented by using the dot in-front of the name. And CSS are usually written inside the head tag) Then we used that class in our label element. Then the font color of the label becomes green. Not only the my_label_id label, you can use the same class with another label element too. If you want to run this code, don’t forget to wrap this code with html element. As we need to display the label on our web browser, that’s why we put the label element inside the body element.

id

It specifies a unique id for an element. We tried using id attribute before. Let’s do another example with more tags.

[code language=”html”]


[/code]

When you click the button, you will see something like this. Don’t worry about the javascript, we will cover JavaScript in a whole new tutorial.

Demonstrate HTML id tag

This code sample demonstrated what we mentioned in the double quotes and single quotes scenario. Also it demonstrate how that unique id can be used to capture the element and its attributes. And if you try to click on the label, you’ll see that checkbox is ticked for you. That’s because of the for attribute which is specially for the one and only label element. That attribute is used for link the label element with a input element.

style

It specifies an inline CSS style for an element. If you remember the class attribute, then this is somewhat similar to that too. We can demonstrate the same requirement with the style attribute as follows.

[code language=”html”]
[/code]

What you see is something like this.

Same display as the class attribute example. Isn’t it? So which is the better is you to choose.

title

If you like to display a tooltip you can have this attribute. It means you can specify extra information about the element.

[code language=”html”]
[/code]

What you see is something like this. If you try to move your mouse onto this label, you’ll see a tooltip emerges.


In this section we get into know what is a attribute and how to use them. We get into know few common attributes that every element can have. In the next section we’ll go for the headings and paragraphs which are most essential when you organize your text content.

WHAT’S NEXT?

Learn how to Structure Your HTML Content.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW