HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 class Attribute

HTML5 Global Attributes

Example

Use of the class attribute in an HTML document:

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>

Try it yourself »
(more examples at the bottom of this page)

Browser Support

The class attribute is supported in all major browsers.

Definition and Usage

The class attribute specifies one or more classnames for an element.

The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

Differences 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 with: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Syntax

<element class="classname">

Attribute Values

Value	Description
classname	Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element. Naming rules: Must begin with a letter A-Z or a-z Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_") In HTML, all values are case-insensitive

Value

Description

classname

Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.

Naming rules:

Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
In HTML, all values are case-insensitive

Try it Yourself - Examples

Add multiple classes to one element
How to add multiple classes to one HTML element.