Html Attributes

Attributes are used to define the additional information about HTML elements. It placed inside the element’s opening and tag. All attributes in HTML comes in two parts Name and value pairs, separated by =.

Let’s take an example of title attribute:

Title Attribute

<html>
<body>
<a title="Click here to Sign-Up" href="" >Sign Up</a>
</body>
</html>

Output:


When we mouse over on the anchor tag, the title will display “Click here to Sign-Up” as a tooltip.

href is also an attribute in above example, We can provide navigation link in it like:

<a title="Click here to Sign-Up" href="https://www.google.co.in/" >Sign Up</a>

Align Attribute

Use of Align attribute with paragraph:

<html>
<head>
<title>Align Attribute </title>
</head>
<body>
<p align=”left”>This para is left aligned</p>
<p align=”center”>This para is center aligned</p>
<p align=”right”>This para is right aligned</p>
</body>
</html>

Style Attribute

Use of Style attribute:

Style attribute allows us to define Cascading Style Sheet (CSS) rules within the element.

<html>
<head>
<title>Style Attribute </title>
</head>
<body>
<p style=”color:red; background:cyan;” >This para is left aligned</p>
<p style=”font-size:24px; font-weight:bold;” >This para is center aligned</p>
</body>
</html>

Class Attribute

The class attribute is also allows us to define css rules with the element, but in class we can define multiple styles and re-use with different html elements.

Let’s take an example:

<html>
<head>
<title>Class Attribute </title>
<style>
.class1 { color:red; background:cyan; }
.class2 { font-size:24px; font-weight:bold; }
</style>
</head>
<body>
<p class=”class1″>This para is using css class1.</p>
<p class=”class2″>This para is usint css class2.</p>
<p class=”class1″>This para is using css class1 again.</p>
<p class=”class2″>This para is using css class2 again.</p>
</body>
</html>

List of some global html attributes

Attribute Description
id (unique id for an element)
lang (define the language of the element’s content)
style (define inline CSS style for an element)
title (tool-tip OR information about an element)
class (define CSS style for an element with using class)
dir (define language direction)
accesskey (define a keyboard shortcut key)
tabindex (define the tab order index for the element)

Leave a Reply