HTML class Attributes

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Class Attributes

The HTML class attribute specifies a class for an HTML element.

The same class can be shared among multiple HTML elements.

Using The class Attribute

The class attribute is often used to specify the class name in a style sheet. It enables JavaScript to access and manipulate elements with a specific class name.

In the below example there are three <div> elements with a class attribute with the value of “city”. All of the three <div> elements are styled equally in accordance to the .city style definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class=”city”>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class=”city”>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class=”city”>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>

Output:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

In the following example we have two <span> elements with a class attribute with the value of “note”. Both <span> elements will be styled equally according to the .note style definition in the head section:

Example

 

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class=”note”>Important</span> Heading</h1>
<p>This is some <span class=”note”>important</span> text.</p>

</body>
</html>

Output:

My Important Heading

This is some important text.