...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #141 HTML Attributes


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.
example:

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all>
are −
  • Id
  • Title
  • Class
  • Style

Id Attribute

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.
example:

Hello World using HTML.

 <!DOCTYPE html>
<html>
   <head>
      <title>This is the title of the document</title>
   </head>    
   <body>
      <h1>This is a Heading Tag </h1>
      <p>Hello World !!!</p>
   </body>    
</html>

Title Attribute

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.

Example

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.

Internationalization Attributes

XHTML elements can be associated with three internationalization attributes.

  • dir
  • lang
  • xml:lang

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.

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>

Example

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.

Example

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.

Generic Attributes

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

Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
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 "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.