HTML - Attributs

  »   HTML  »   HTML Tutorial - Attributs

The attributes are used to personalize tags. What do i mean ? Somehow , someday you want to resize a image or a table or to change a font color. All these are possible with the help of the attributes.

Most tags have their own attributes. We will talk about this as we include it in our new tag. We will learn about a set of generic attributes which can be used with the majority of the tags.

Attributes are putted between the angular brackets (<>) of the opening tag.

The "class" and "id" attributes in HTML

These two attributes are mostly the same. They have no straight role in the formatting of the elements but they are useful behind the scene with the help of CSS. We will talk about their role at the right time when we study their syntax and their function in CSS.

The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Take a look at the next example :

html<p id="italicparagraph">Paragraph type 1, italic </p>
<p id="boldparagraph">Paragraph type 2, bold </p>

HTML - The "name" attribute

"name" is a bit different from "id" and "class". If you give a name to an element this one becomes a script variable for JavaScript, ASP, and PHP. Something that is very often meet in formulations and other interactive text fields.

html<input type="text" name="TextField" />

Demo

This attribute has no effect on the display of the text box, even if in the background it plays a very important role.

HTML - "title" attribute

This attribute is used rarely. He adds a title (a pop-up) to every element's content. This attribute should not be forgotten. You can name almost everything however you want. The visualization appears when you need to stop with your mouse for a few seconds above the content.

html<h2 title="I am a title attribute!!">A random title</h2>

Demo

A random title

Pass with your mouse over the upper title so that you see the magic of the"title" attribute. This attribute will give yo your site a bit of interaction with those who visit you. Do not pass over this detail.

HTML - "align" attribute

If you want to align in a different way some elements of your page then you have at your disposition the "align" attribute. You can align to the left, right, or the center of the page with almost every element. By default, elements will align to the left, excepting when it is specified another alignment.

html<h2 align="center">Centered title </h2>

Demo

Centered title

Other examples:

html<h2 align="left">Title aligned to the left </h2>
<h2 align="center">Centered title </h2>
<h2 align="right">Title aligned to the right </h2>

Demo

Title aligned to the left

Centered title

Title aligned to the right

The default values for the attributes

Most of the tags are attributed to standard attributes. This means that if you do not specify another attribute, the browser will do it for you. For example, a paragraph will align by itself to the left, excepting when you specify in another way; the same is with a table. As long as you practice you will understand many more things about the default values of some tags.

Generic attributes

You must keep in your mind that attributes are used to design the elements of a web page. I have put here together some of the most commune attributes used in HTML :

AttributeOptionsFunction
alignright, left, centerHorizontal alignment
valigntop, middle, bottomVertical alignment
bgcolornumerical, hexadecimal, or RGB valueA background behind an element.
backgroundURLAn image behind an element.
idDefined by userNames an element which will be used with CSS.
classDefined by userClassifies un element which will be used with CSS
widthNumerical valueSpecifies the width of a table, image or table box.
heightNumerical valueSpecifies the height of an table,
titleDefined by user"pop-up" a title for an element