Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Attributes

Attributes are another important part of HTML mark-up. An attribute is used to define the characteristics of an element and is placed inside the element's opening tag.
Attributes comprise of two parts: a name and a value:

  • The name is the property you want to set. For example, the <font> element in the example carries an attribute whose name is face, which you can use to indicate which font type you want the text to appear in.
  • The value is what you want the value of the property to be. The first example is using Arial font, so the value of the face attribute is Arial.

The value is what you want the value of the property to be. The first example is using the Arial font, so the value of the face attribute is Arial.

<font face="arial" color="#CC0000">

Many HTML tags have a unique set of their own attributes. It will be discussed with each tag introduced throughout the tutorial. Right now we will focus on a set of generic attributes that are used in almost every HTML Tag in existence.

Core Attributes:

Below are the four attributes used in majority of HTML elements (although not all) :

  • id
  • Title
  • class
  • Style
The id Attribute:

The id attribute can be used to uniquely identify any element within a page ( or style sheet ). There are two primary reasons that you might want to use an id attribute on an element:

  • Id attribute is always kept unique throughout a webpage as per the HTML rules.
  • Even if you find two elements with the same name you can identify them using Id attribute.

We have a separate tutorial for stylesheets(CSS3) where we can see significance of Id attribute while defining a style. Lets see an example where we would distinguish between tow paragraphs using Id attribute :

<p id="html">This paragraph explains HTML</p>
<p id="css">This paragraph explains Cascading Style Sheet</p>

Note that there are some naming conventions for the value of the id attribute, it must:

  • Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0 - 9), underscores, colons, hyphens, and periods.
  • It must be unique within that document; no two attributes should have the same value within that HTML document.
The title Attribute:

The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute:

The behaviour of this attribute will depend upon the element that carries it, although it is often displayed as a tool-tip or while the element is loading.


<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

Above code will generate following result:

Titled Heading Tag Example

Titled Heading Tag Example

The class Attribute:

The class attribute is used to associate an element with a predefined style sheet. It would be more clear when you will learn Cascading Style Sheet (CSS) Tutorial.
You can assign multiple classes to a attribute by separating them with spaces. For example:


class="class1 class2 class3"
The style Attribute:

The style attribute allows you to specify CSS rules for the element. For example:

<p style="font-family:arial; color:#FFFFFF;">Demo text...</p>
Internationalization Attributes:

There are three internationalization attributes available(although not all) to XHTML elements.

  • dir
  • lang
  • xml:lang
  • The dir Attribute:

    The dir attribute allows you to indicate to the browser the direction in which the text should flow.The dir attribute can take one of the two values, as you can see in the table that follows:

    value Meaning
    ltr Left to right (the default value)
    rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

    <html dir=rtl>
    <head>
    <title>Display Directions</title>
    </head>
    <body>
    This is how IE 5 renders right-to-left directed text.
    </body>
    </html>

    When dir attribute is used within the <html> tag, it determines how text will be presented throughout the document scope. When used within another tag, it controls the text's direction for just tag content.

    The lang Attribute:

    The lang attribute allows you to indicate the main language used in a document, but this attribute was scoped in HTML tag only to support backward compatibility with earlier versions of HTML. Currently this attribute has been replaced by xml:lang attribute.
    When included within the <html> tag, the lang attribute specifies the language used within the document. When used within other tags, the lang attribute specifies the language used within that specific tag's content. Ideally browser uses lang to better render the text for the user.
    The values of the lang attribute are ISO-639 standard two-character language codes. You can check HTML Language Codes: ISO 639 for a complete list of language codes.


    <html lang=en>
    <head>
    <title>English Language Page</title>
    </head>
    <body>
    This page is using English Language
    </body>
    </html>
    The xml:lang Attribute:

    The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.

    Generic Attributes:

    Below table contains some other attributes that are readily usable with many of HTML's tags.

    Attribute Option Function
    align right, left, center Horizontally aligns elements
    valign top, middle, bottom Vertically aligns elements within an HTML document.
    bgcolor numeric, hexadecimal, RGB values Background color for an element
    background URL Background image behind an element
    id User Defined Unique Id for an element for be uniquely identified.
    class User Defined Classifies an element for use with Cascading Style Sheets.
    width Numeric Value Specifies the width of tables, images, or table cells.
    height Numeric Value Specifies the height of tables, images, or table cells.
    title User Defined Provides title for an element shown as tooltip.


    Related Videos