Attributes

HTML elements can have attributes in opening tag. Attribute provides additional information about that element. HTML attributes are added in opening tag and can have some value. Some popular Global Attributes are class, id, title, style etc.

HTML attributes are always defined in the start tag. Attributes are written in name/value pair like: <tag attributename="attributevalue">. Attribute once used can't be repeat in same element.

An attribute is used only once in a single tag. For some tags like class, we can pass multiple values, but class attribute can be used only once in a tag.

html attributes
Html Attributes

Earlier many presentational attributes were used, like align, valign, bgcolor etc, but now in HTML5, these attributes are removed. CSS is used instead of these attributes.


HTML Attributes Type

HTML Attributes are categorized on the basics of their functionality and the way they are written in HTML.

Attribute Type Meaning
Global Attribute Attributes meant for all html elements. Exp : class, id
Boolean Attribute Attribute with Attribute name only, no value.
Exp :disabled, hidden, reversed etc.
Presentational Attributes Attributes used to style HTML Element.
For example : style, size, color, border, cellspacing, cellpadding etc.
Event Attributes Event attributes are used to add javascript event on html element, like onclick, onmouseover, onmouseout, etc.

Except style and size, all presentational attributes are removed in HTML5.


HTML Attributes List

Hers is a list of html tags with their name, description and how to use them. These are popular html attributes.

HTML Attributes List
Attribute Element Description
class Global Attribute used to group elements for css
id Global Attribute Assign a unique id for the element
style Global Attribute CSS attribute for tags (Specifies an inline style for an element)
title Global Attribute Specifies extra information about an element (displayed as a tooltip)
lang Global Attribute Language of text
dir Global Attribute direction of text, ltr or rtl only
type <input>, <audio>, <video>,
<embed>, <iframe>, <source>, <script>,
<track>, <ol>
Defines type of element.
src <img>, <script>, <input>,
<audio>, <video>, <embed>,
<iframe>, <source>, <track>
source of media element
href <a>, <link> hypertext reference, path of hyperlink and link tag
tabindex <a>, <input>, <select>, <button>,
<select>, <textarea>
to override default tab order and follow the specific one.
width <img>, <embed>, <video>, <iframe> Set width of element
value <input>, <option>, Set default value of element visible at pageload
size <input>, <select> Width of element in px. For input type text, size means no of characters

Attributes Removed in HTML5

bgcolor Background Color of the document

(Removed in HTML5)

<body bgcolor="aqua">
background Background Image of the document

(Removed in HTML5)

<body background="img/bg.png">
border To set border of table element.

(Removed in HTML5)

<table border="1"> </table>
align Align left, right, center

(Removed in HTML5)

<p align="center">
valign Align top, middle, bottom

(Removed in HTML5)

<p valign="middle">
cellspacing change space (margin) between table cells

(Removed in HTML5)

<table cellspacing="10px">
cellpadding inner space ( padding) between table cells

(Removed in HTML5)

<table cellspacing="10px">
bottommargin Margin from bottom

(Removed in HTML5)

<body bottommargin="20">
topmargin Margin from top

(Removed in HTML5)

<body topmargin="10">

Class Attribute

Class attribute is used to define a group of elements having same css properties. Class can have single or multiple values with whitespace separation. With CSS, use of class attribute is compulsory. Multiple elements can have single class.

Class name should be descriptive. Like, for top-most div, preferred class name is header. For navigation, class name should be nav, for main content, class name should be container and for last div, class name should be footer.

Class Attribute Code

Font with class red and bold

Font with class red

Font without any class


<style>
    p{ font-family:sans-serif}
    .red{ color:red}
    p.bold{ font-weight:bold}
</style>
		
<p class="red bold"> Font with class red and bold</p>
<p class="red"> Font with class red only</p>
<p> Font without any class name</p>

ID Attribute

Id attribute is used to call a unique element. In a single webpage, an id name is always used once. An html element can have a single ID attribute and single value of id. As per W3C, used of same id on multiple elements is w3c error.

ID Attribute Code

Font with class red

Font with class red

Font with id blue


<style>
    .red{ color:red}
    #blue{ color:blue}
</style>
		
<p class="red" > Font with class red</p>
<p class="red" > Font with class red</p>
<p id="blue"> Font with id blue</p>

Title attribute

HTML Title Attribute is a global attribute used to show tooltip on mouse hover. Title Attribute is also compulsory for <abbr> tag.

HTML

    <abbr title="Hypertext Markup Language">HTML</abbr>                
            

Tags where title attribute is recommended

  1. abbr
  2. iframe
  3. input

Bgcolor

( removed in html5)

Used to give background color to body tag and table tag.



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
</head>
<body bgcolor="#ff0033">
		// content 
</body>
</html>

Background

( removed in html5)

Used to give background image in html4/xhtml for body element. In HTML5, Background-image is used instead.



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
</head>
<body background="img/bg.png">
		// content 
</body>
</html>		


Align

( removed in html5)

Align Attribute was used to horizontally align text or tables. Its was also used to align other html elements like HTML table.

In HTML5, use text-align property in css.

TEXT Aligned Left

TEXT Aligned Center

TEXT Aligned Right


<h1 align="left">TEXT Aligned Left</h1>
<h1 align="center">TEXT Aligned Center</h1>
<h1 align="right">TEXT Aligned Right</h1>

Size

size Attribute is used define size to font tag and input tag. As font tag id removed in html5, we can used size attribute only in input elements.











<input type="text" size="6" >
<input type="text" size="10" >
<input type="text" size="20" >
<input type="text" size="30" >