We have seen few HTML tags and their use, such as heading tags<h1>, <h2>, paragraph tags <p>, and others. These tags have been used in their most simplistic form, but they can also have attributes, which are additional bits of info. An attribute is used to define the properties of an HTML element and is placed within the opening tag of the element. Every attribute has two parts: a name and a value. The property you want to change is identified by its name. For example, the paragraph p> element in the example has an attribute called align, which you can use to specify how the paragraph should be aligned on the page. The value is what you want the property's value to be, and it should always be surrounded by quotation marks. The example below shows three possible align attribute values: left, centre, and right. World Wide Web Consortium (W3C>
recommends lowercase attributes and attribute values for HTML 4. However, attribute names and attribute values are not case insensitive.
The four core attributes that can be used on the majority of HTML elements (although not all>
An HTML tag's id attribute can be used to uniquely identify any element within an HTML page. There are two main reasons why you might want to use an element's id attribute:
If an element has an id attribute as a unique identifier, only that element and its content can be identified.
If you have two elements with the same name on a Web page (or style sheet>
, you can use the id attribute to distinguish between them.
In a separate tutorial, we will go over style sheets. For the time being, let's use the id attribute to differentiate between two paragraph elements, as shown below.
Hello World using HTML.
<title>This is the title of the document</title>
<h1>This is a Heading Tag </h1>
<p>Hello World !!!</p>
The title attribute provides a suggestion for the element's title. The syntax for the title attribute is similar to that for the id attribute. This attribute's behaviour is determined by the element that carries it, but it is frequently displayed as a tooltip when the cursor passes over the element or while the element is loading. Example
The class Attribute
The class attribute specifies the class of an element and is used to associate it with a style sheet. When you learn Cascading Style Sheets, you will learn more about the use of the class attribute (CSS>
. So, for the time being, you can avoid it. The attribute's value can also be a space-separated list of class names. As an example, class = "className1 className2 className3"
The Style Attribute
You can use the style attribute to specify Cascading Style Sheet (CSS>
rules within the element.
We are not learning CSS at this time, so let's just move on without thinking about CSS. You must first understand what HTML attributes are and how they can be used to format content.
XHTML elements can be associated with three internationalization attributes.
The dir Attribute
The dir attribute informs the browser about the direction in which the text should flow. As shown in the table below, the dir attribute can take one of two values.
||Left to right (the default value>
||Right to left (for languages such as Hebrew or Arabic that are read right to left>
When the dir attribute is used within the html> tag, it determines how text will be displayed throughout the document. When used within another tag, it directs the text only for the content of that tag.
The lang Attribute
As an HTML attribute, lang indicates the primary language used in a document, but it was retained only for backward compatibility with earlier versions of HTML. A new attribute xml:lang has replaced this attribute in new XHTML documents.
The xml:lang Attribute
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
Here's a table of some other attributes that are readily usable with many of the HTML tags
||right, left, center
||Horizontally aligns tags
||top, middle, bottom
||Vertically aligns tags within an HTML element.
||numeric, hexidecimal, RGB values
||Places a background color behind an element
||Places a background image behind an element
||Names an element for use with Cascading Style Sheets.
||Classifies an element for use with Cascading Style Sheets.
||Specifies the width of tables, images, or table cells.
||Specifies the height of tables, images, or table cells.
||"Pop-up" title of the elements.
As we move on to other HTML tags, we'll see more examples like this. Please see HTML Tags List for a complete list of HTML Tags and related attributes.