html tutorial - class Attribute in HTML - html5 - html code - html form

Learn html - html tutorial - Class attribute in html - html examples - html programs
- The class attribute is used to define the styles for elements with the name of the class.
- We can define one or more class names for a single element.
- The class attribute can be used by the style sheet or JavaScript to make changes in HTML elements.
- The class attribute is a Global Attribute.
Syntax for class attribute in HTML:
<element class="classname">
Difference between HTML 4.01 and HTML 5 for class Attribute:
HTML 4.01
- All elements are supported in HTML 4 except <base>, <head> , <html>, <meta>, <param>, <script>, <style> and <title> tags.
HTML 5
- In HTML 5 the class attribute supports all HTML elements.
Applies To:
Element | Attribute |
---|---|
All HTML elements | class |
class Attribute Values:
Value | Description |
---|---|
classname | classname is used to define one or more classes. For specify multiple classes for a single element by using space separated list. |
Sample Coding for class Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<style>
span.page {
font-size: 120%;
color: orange;
}
</style>
</head>
<body>
<h1>My<span class="page">HTML</span>program</h1>
<p>This is used to create<span class="page">Website</span>design.</p>
</body>
</html>
Code Explanation for class Attribute in HTML:

- span.page is used to define a block of styles for a <span> element which has class name as page.
- class attribute is used to set class name for the <span> tag.
- page is a name of the class attribute that is used to get the styles for the <span> element.
Output for class Attribute in HTML:

- The output displays the term HTML and Website in orange color by using class attribute.
Browser Support for class Attribute in HTML:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes |