Attributes in HTML

HTML elements can have attributes. Attributes provide additional information about an element.

html attributes
Html Attributes

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

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 presentation attributes.

List of Attributes in html

Attribute Name Description Example
class Specifies a class name for an element <div class="content"></div>
id Specifies a unique id for an element <div id="banner"></div>
style CSS attribute for tags (Specifies an inline style for an element) <div style="color:red"></div>
title Specifies extra information about an element (displayed as a tooltip) <img src="img/logo.png" alt="Tech Altum" title="Welcome to Tech Altum Tutorial">
typespecify type of input control.<input type="text">
langlanguage used in text<p lang="es">Holla amigo</p>
dirused to sprcifiy direction.<html lang="ur" dir="rtl"> </html>
srcsource of media tags like image, iframe, audio and video<img src="pic.jpg" alt="">
hrefhypertext refrence, path of hyperlink and link tag<a href="index.html">Home</a>
tabindexto change tab orderof form controls.<input type="text" tabindex="1">
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">
size Declare size of font and input <input size="4">
bottommargin Margin from bottom

(Removed in HTML5)

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

(Removed in HTML5)

<body topmargin="10">

Class

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 div, preffered class name is header. For navigation, class should be nav, for main content, class name should be container for for last div, last name should be footer.

Class Attribute Code

Font with class red and bold

Font with class red

Font without any class


<style>
    .red{ color:red}
    .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</p>

ID

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>

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 for body element. In HTML5, Background-image is used instead.



<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
</head>
<body background="http://www.techaltum.com/images/TechAltumLogo.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" >