- HTML Introduction
- HTML Attributes
- HTML Basic Tag
- HTML Color
- HTML Comments
- HTML Fonts
- HTML Blocks
- HTML Images
- HTML Layout
- HTML Links
- HTML Lists
- HTML Formatting Tags
- HTML Table
- HTML Meta Tag
- HTML Frames
- HTML Parse Tag
- HTML Forms
- HTML Script
- HTML Style-CSS
- HTML XHTML
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.
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.
Below are the four attributes used in majority of HTML elements (although not all) :
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 :
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.
Above code will generate following result:
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:
The style Attribute:
The style attribute allows you to specify CSS rules for the element. For example:
There are three internationalization attributes available(although not all) to XHTML elements.
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:
|ltr||Left to right (the default value)|
|rtl||Right to left (for languages such as Hebrew or Arabic that are read right to left)|
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.
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.
Below table contains some other attributes that are readily usable with many of HTML's tags.
|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.|