4.Attributes of HTML

HTML Attributes Easy Tutorial

This article is about html attributes easy tutorial.We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element’s opening tag. All attributes are made up of two parts: a name and a value:

  • The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
  • The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Example

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align=”left”>This is left aligned</p>
<p align=”center”>This is center aligned</p>
<p align=”right”>This is right aligned</p>
</body>
</html>

This will display the following result:

This is left aligned

It is center aligned

That is right aligned

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are:

  • ID
  • Title
  • Class
  • Style

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element:

  • If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
  • If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let’s use the id attribute to distinguish between two paragraph elements as shown below.

Example

<p id=”html”>This para explains what is HTML</p>
<p id=”css”>This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tool tip when cursor comes over the element or while the element is loading.

Example

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title=”Hello HTML!”>Titled Heading Tag Example</h3>

</body>
</html>

This will produce the following result:

html attributes easy tutorial

Now try to bring your cursor over “Titled Heading Tag Example” and you will see that whatever title you used in your code is coming out as a tool tip of the cursor.

The class Attribute

 

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.The article is about html attributes easy tutorial.
The value of the attribute may also be a space-separated list of class names. For example:

html attributes easy tutorial

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style=”font-family:arial; color:#FF0000;”>Some text…</p>
</body>
</html>

This will produce the following result:

Some text..

At this point of time, we are not learning CSS, so just let’s proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.

Generic Attributes

Here’s a table of some other attributes that are readily usable with many of the HTML tags.

html attributes easy tutorial

To know more about html attributes easy tutorial please visit here

 

 

18 thoughts on “4.Attributes of HTML”

  1. Thank you for the auspicious writeup. It in reality was
    a entertainment account it. Glance advanced to more brought agreeable from you!
    However, how can we keep in touch?

  2. Thanks for another informative blog. The place else may I am getting that type of info written in such a perfect approach?
    I’ve a challenge that I’m just now working on, and I’ve been at the look out for such info.

  3. Hello! I could have sworn I’ve been to this
    site before but after reading through some of the post I realized it’s new to me.
    Anyways, I’m definitely happy I found it and I’ll be book-marking and
    checking back frequently!

  4. Great goods from you, man. I’ve understand your stuff previous to and you’re just extremely magnificent.

    I really like what you have acquired here, really
    like what you’re stating and the way in which you say it.
    You make it enjoyable and you still care for to keep it smart.
    I can not wait to read far more from you. This is actually
    a great web site.

  5. Hey are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started
    and set up my own. Do you need any coding expertise to make your own blog?
    Any help would be really appreciated!

  6. Simply want to say your article is as amazing. The
    clarity in your post is just cool and i could assume you are an expert on this
    subject. Fine with your permission let me to grab your RSS
    feed to keep up to date with forthcoming post. Thanks a million and please carry
    on the gratifying work.

  7. Thank you a bunch for sharing this with all
    folks you actually know what you’re talking about!
    Bookmarked. Please also seek advice from my website =). We can have a hyperlink trade arrangement among us

  8. Oh my goodness! Impressive article dude! Thank you, However I am having problems with your RSS.
    I don’t know why I am unable to subscribe to it.
    Is there anybody getting similar RSS problems?
    Anybody who knows the answer can you kindly respond? Thanx!!

Leave a Reply

Your email address will not be published. Required fields are marked *