We can easily bind multiple html elements using a HTML class attribute. The class attribute helps apply CSS or Javascript functions to an individual or group of elements on the web page.
You can declare an HTML class attribute using a period (.) character followed by the name of the class for selecting elements. In this tutorial we will learn more about HTML classes.
What is HTML Class?
The HTML Class attribute is used to specify a class to an individual or group of HTML elements. Multiple HTML elements can use the same class. The HTML class is very useful while applying a common style to a set of elements across the web page.
A HTML Class can be defined within the <style> tag or separately using the period (.) character followed by the class name. The HTML Class attributes can be used to apply consistent styles across various HTML elements and streamline both design and functionality.
HTML Class Attribute Key Takeaways
- The HTML Class attribute can be applied with one or more html elements.
- Classes are used by frameworks and libraries such as CSS, Javascript, React, Angular to select and specify styling and functionalities to HTML elements.
- Different HTML elements can be applied to the same class name.
- A single HTML class can be applied to multiple HTML elements.
Syntax of HTML Class
| <tag class =”Name of the Class” > </tag> |
Here, <tag> is any HTML element we want to apply the HTML class element
In the class attribute attach the name of the class
Also, check The Best Guides to HTML Tags in Web Development,
Example of HTML Class Attribute
The HTML Class attribute is a global attribute which can be used with any HTML element in the web page. Let us understand the use of HTML class elements with the help of a simple example.
| <html>
<head> <style> h1.header { color: #D7BDE2; } p.paraClass { color: #2874A6; } </style> </head> <body> <h1 class=”header”>Important Header</h1> <p class=”paraClass”>We are using the class element in this paragraph.</p> </body> </html> |
In the above example, you can find two HTML class attributes used with the heading tag and paragraph tag. We defined the class attribute in the tag element and defined its attribute in under the <style> tag. We can apply different styles and functionality to the selected class.
Rules For Html Class Attribute
The HTML class attribute is used to assign one or more class names to an html element. It is important to keep certain things in mind while defining html class attributes below.
Defining Class Names
All the HTML class names can include letters, numbers, hyphens and underscore. However, the class names cannot start with a numerical number. For example, intro_123 is a valid class name while 23_intro is not a valid HTML class attribute.
Keep in mind the class names are case sensitive in HTML and CSS. Hence, both .class and .Class would be considered different classes in HTML documents. It is advised not to use special characters such as spaces, symbols, or any reserved keyword.
- Must begin with letter A-Z or a-z
- It can be followed by letters (Aa-Zz), digits (0-9), hyphens(“-”) and underscores (“_”).
Also, check How to add CSS in HTML for Web Development
Using HTML Class attribute
Always use the class attribute inside the HTML tag to assign the specific class to the element. For example, <p class = “main_container”>….</p> The HTML Class attribute allows the same classes to be used in different HTML elements.
You can apply the same HTML class attribute to different HTML elements. In CSS, HTML Classes are references using the period (.) followed by the class name. For example, .container is the class used in the HTML.
HTML Class Attribute Usage
The HTML Class attribute is widely used for several purposes in web development. Check some of the major usage of the HTML classes.
Styling with CSS
We can easily apply common CSS styles to a group of selected HTML elements. For example, you can use <button class =”btn-primary”> to define the look of these HTML buttons on the web page.
Javascript Manipulation
HTML classes make it easy to select and manipulate different elements in the webpage using Javascript. For example, you can use the query selector with the HTML class attribute to apply changes.
For example, document.querySelector(‘.btn-primary’) to find the elements by their class and apply different changes in the elements.
Reusable Design Components
The class attribute in HTML is used to design the reusable design components. It applies the same styling or functionalities to multiple elements.
For example, you can apply a class = “primary_card” and use it across multiple cards to ensure a consistent appearance without manually applying the dynamic style to each element.
Responsive Design
The HTML class attribute plays an important role in creating responsive design web pages. You can adjust the styling of elements with specific classes based on the size or orientation.
Integrating Frameworks and Libraries
You can apply different front end frameworks such as bootstrap, tailwind CSS, and others using the classes attributes in the HTML. You can instantly access the element using the class names and use the framework styles. Libraries like React, Vue and Angular also make use of HTML class attributes.
Using Same HTML Class in Multiple HTML Elements
In this example, we use a single class highlight with a defined styling to different HTML elements. The HTML class is a global attribute and can be used with multiple HTML elements.
| <!DOCTYPE html>
<html> <head> <style> .highlight { background-color: lightblue; color: darkblue; padding: 5px; border-radius: 4px; } </style> </head> <body> <h1 class=”highlight”>Welcome to the World of Wonders</h1> <h2 class=”highlight”>Mount Everest</h2> <p class=”highlight”> Mount Everest is the highest mountain in the world, located in the Himalayas. </p> <h2 class=”highlight”>Grand Canyon</h2> <p class=”highlight”> The Grand Canyon is a famous natural landmark in the United States, known for its stunning views. </p> <h2 class=”highlight”>Great Wall of China</h2> <p class=”highlight”> The Great Wall of China is an ancient series of walls and fortifications, stretching over 13,000 miles. </p> </body> </html> |
Using Different HTML Class Elements on Single Element
Let us create different HTML classes and use it on a single element at a time.
| <!DOCTYPE html>
<html> <head> <style> .title { font-size: 24px; padding: 10px; } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .highlight { background-color: yellow; color: darkblue; } </style> </head> <body> <h2 class=”title bold italic underline highlight”> Combined Styling with Multiple Classes </h2> <p class=”bold italic”> This text is both bold and italic. </p> <p class=”highlight underline”> This text is highlighted and underlined. </p> </body> </html> |
Learn Web Development with PW Skills
If you want to build a career in web development then master every aspect of the web development with PW Skills 6 Months Job assistance Full Stack Web Development Course. Get the latest industry curriculum and in-depth course tutorials covered by experienced industry mentors.
Build a job ready portfolio and get interviews opportunities in top companies after completing the course only at pwskills.com
HTML Class Attribute FAQs
Q1. What is HTML Class Attribute?
Ans: The HTML Class attribute specifies one or more class names for HTML elements which can be used to apply consistent design styles or javascript functionalities to the elements across the web page.
Q2. Is the HTML Class attribute case-sensitive?
Ans: The HTML class names are case sensitive and hence it is important to take care of the capitalization across the website while using the HTML class attributes.
Q3. Can I use the class attribute on any HTML element?
Ans: The HTML Class is a global attribute and can be used with any html element across the web page to apply consistent styling and behaviour.
Q4. Can I use the HTML Class attribute with Javascript?
Ans: Yes, you can easily apply the HTML class attribute with the Javascript to manipulate html elements. You can use query selector to select any html elements across the web page.
