Home »
HTML
HTML class Attribute
By IncludeHelp Last updated : October 13, 2024
The class Attribute
The class attribute in HTML is used to specify or set a single or multiple class names to an element for an HTML and XHTML elements. Its majorly used to indicate a class in a style sheet.
Detailed Explanation
Defining the structure of a class can also be considered as description to class attribute. You can identify them as the opening tags to control an element's behaviour. The class attribute often points to the class in the style sheet. Class attribute can also be taken in use by JavaScript, CSS (Cascading Style Sheet). The class name can be used by JavaScript and CSS to perform task or indulge changes for elements under specified class name; mainly for styling purposes or to add behaviour to elements that fall under particular subtype. Class attribute makes it liable to bring changes to any HTML element.
It determines how an element should processed, it will indicate the elements' inheritance and therefore how it should be handled. Name of an element specifies its type but class lets you assign to it one or more subtypes.
Where class Attribute is Not Applied?
The class attributes cannot be applied to following elements,
- Base
- Basefont
- Head
- Html
- Meta
- Para
- Script
- Style
- Title
Where class Attribute can be Applied?
Class attributes can be used on inline elements.
There can be multiple class names to a single element where each class name must be separated by space between them, and also class attribute value may begin with a number and still be valid HTML unlike id attribute. But it is most likely to be avoided to initiate with a digit.
It is recommended to have semantically meaningful name as possible as it would add to the emphasis of the particular subtype to be specific and would provide an eye of interest and ease to those reading the markup. Purely presentational names would help bring maximum eyes on board.
The syntax which is however the essential format is,
<element class="classname">
HTML class Attribute Example
An example on how to place the class attribute:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Any important text. :)</p>
</body>
</html>
All the styling and other changes in behavior in an element or elements that you want to provide to all the elements under the same section which is distinguished due to the class attribute can be applied in effect to every element. This in HTML provides a lot of potentials to work with and deal with several arrays of classes.
Applying the Same Styles Using class Attribute
Different tags can have the same class name and therefore share the same styles as well.
Supported Browsers
The browsers that are compatible with class attributes are,
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
It's one of the basic aspects but essential that you need to know in attributes for HTML. And also quite easy to grasp in with.