HTML classAttribute
Examples
Using the class attribute in an HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style>
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Heading 1</h1>
<p>Paragraph.</p>
<p class="important">Note: This is a very important paragraph. :)</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<style>
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Heading 1</h1>
<p>Paragraph.</p>
<p class="important">Note: This is a very important paragraph. :)</p>
</body>
</html>
Try it Yourself »
More examples are provided later in this chapter.
Browser Support
All major browsers support the class attribute
Definition and Usage
The class attribute defines the class name of an element.
The class attribute is usually used to point to a class in a style sheet. However, it can also be used in JavaScript (via the HTML DOM) to modify the class name of HTML elements.
Difference between HTML 4.01 and HTML5
In HTML5, the class attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
In HTML 4.01, the class attribute cannot be used on: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
Syntax
<element class="classname">
Attribute Values
| Value | Description |
|---|---|
| classname | Specifies the class name of an element. To specify multiple classes for an element, separate the class names with spaces. <span class="left important">. HTML elements allow multiple classes. Naming rules:
|
More Examples
Adding Multiple Classes to an Element
How to add multiple classes to an HTML element.
HTML Global Attributes Other Extensions