Previous Next

HTML Attributes

Attributes defines the properties of an HTML element.

All HTML elements can have attributes.

Attributes are always placed inside the element's start tag.

All attributes are made up of name and value pair.

  • The name is the property. 

  • The value is the value of the property.

In an HTML element name and value are enclosed is quotations "".

Attribute names and attribute values are case-insensitive.  

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Align Attribute  Example</title>
   </head>
   <body>
      <p align="left">This is left aligned</p>
      <p align="center">This is center aligned</p>
      <p align="right">This is right aligned</p>
   </body>
</html>

Result:

This is left aligned

This is center aligned

This is right aligned

Common Attributes

Majority of HTML elements contains following attributes:

  • id
  • title
  • class
  • style

The id Attribute

The id attribute is used to uniquely identify an attribute in an HTML document.

Example

<p id="p1">This paragraph 1</p>
<p id="p2">This paragraph 2</p>

The title Attribute

The title attribute gives a suggested title for the element. 

The value of title will be displayed as tooltip when you mouse overs the element.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>The title Attribute</title>
   </head>
   <body>
      <h5 title="Hello HTML!">Titled Heading Tag</h5>
   </body>
</html>

Result:

Titled Heading Tag

Try to bring mouse over "Titled Heading Tag"

You should see "Hello HTML!" as tooltip.

The class Attribute

The class attribute is used to associate a class defined in stylesheet.

Example

Stylesheet

.padding5{
padding:5px;
}

HTML

<h1 class="padding5">The heading padded by 5px</h1>

The style Attribute

The style attribute is used to specify styling within the element.

<!DOCTYPE html>
<html>
   <head>
      <title>The HTML style Attribute</title>
   </head>
   <body>
      <p style="font-family:arial; color:#FF0000;">Styled text...</p>
   </body>
</html>

Result

Styled text...

 

Internationalization Attributes

Following three internationalization attributes are used for most XHTML elements.

  • dir
  • lang
  • xml:lang

The dir Attribute

The dir attribute used to show flow of content, left to right or right to left.

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

<!DOCTYPE html>
<html dir="rtl">
   <head>
      <title>Text Directions</title>
   </head>
   <body>
      right-to-left directed text.
   </body>
</html>

Result:

right-to-left directed text.

 

The lang Attribute

The lang attribute indicates the language used in HTML document.

It can be declared in the <html> tag.

Declaring a language is important for accessibility applications (screen readers) and search engines:

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>English Language Page</title>
   </head>
   <body>
      This page is using English Language
   </body>
</html>

The href Attribute

HTML links are defined with the <a> tag.

The link address is specified in the href attribute:

Example

<a href="http://www.w3schools.com">This is a link</a>

Result

This is a link

 

Single or Double Quotes?

Double quotes are the most common in HTML, but single quotes can also be used.

 

HTML Attributes

Below is a list of commonly used attributes.

Attribute Value Options Usage
align right, left, center Horizontally aligns elements
valign top, middle, bottom Vertically aligns elements
bgcolor numeric, hexidecimal, RGB values Sets element background
background URL Sets background image for an element
id User Defined Elements unique identifier
class User Defined Classifiying 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 "tooltip" for the elements.

 


Previous Next