HTML Attributes
Written By: Avinash Malhotra
Updated on
Attributes
HTML elements can have attributes in opening or start 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 attribute="value">. Attribute once used can't be repeat in same element.
An attribute is used only once in a single tag. For some attributes like class, we can pass multiple values, but class attribute can be used only once in a tag.
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
| Attribute | Element | Description |
|---|---|---|
| class | Global Attribute | used to group elements for css |
| id | Global Attribute | Assign a unique id for the element |
| name | Global Attribute | Assign name of an 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 |
| data- | Global Attribute | data attributes are used in html5 to define custom attribute |
| 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>, <base> |
hypertext reference, path of hyperlink ( <a>) 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 |
| height | <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 removes 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.
<abbr title="Hypertext Markup Language">HTML</abbr>
Tags where title attribute is recommended
- abbr
- iframe
- input
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" >
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 attribute
( 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>