HTML class Attribute

Html classes are the subject of our discussion. HTML elements can be classified using the class attribute.

An HTML element’s class attribute defines single or multiple class names. HTML elements can be customized with a class name in CSS and JavaScript. In CSS, associate this class with a unique class by writing a period (.) character followed by the class name.

The same class can be applied to multiple HTML elements.

Using The class Attribute

HTML Classes are commonly referenced by the class attribute in style sheets. JavaScript can also manipulate HTML elements whose class name matches the specific class name.

Our example contains three <div> elements with the “city” class attribute.

In this case, we are styling all three <div> elements equally according to the .city.

Head section style definition:


<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white;border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body><div class="city"><h2>London</h2> <p>London is the capital of England.</p> </div><div class="city"><h2>Paris</h2> <p>Paris is the capital of France.</p> </div><div class="city"><h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div></body> </html>

This example shows two <span> elements with the class attribute set to “note”. In the head section, the .note style definition defines how both <span> tag will be styled:


<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body><h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p></body> </html>
Reminder : Please note that the class name is case-sensitive! Any HTML element can use the class attribute in Html classes.
Tip: Our CSS lessons will teach you much more about CSS.

The Syntax For Class

Operating HTML classes, construct a class by writing a period (.) followed by its name. After that, specify the CSS properties within curly braces:

Create a class called “city”:


<!DOCTYPE html> <html> <head> <style> .city {background-color: tomato; color: white; padding: 10px; } </style> </head> <body><h2 class="city">London</h2> <p>London is the capital of England.</p><h2 class="city">Paris</h2> <p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p></body> </html>

Different Elements Can Share Same Class

When we talk about Html classes then, a class name can be assigned to multiple HTML elements.

In the following example, both <h2> and <p> belong to the “city” class:


<!DOCTYPE html> <html> <body> <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> </body> </html>

Multiple Classes

Multiple classes can be assigned to HTML elements.

You can define multiple classes by separating them with a space, for example, <div class=”city main”>. HTML classes will be used to style the element according to all its classes.

Here, the first <h2> element belongs both to the city class and to the main class so that it will inherit the styling of both:


<!DOCTYPE html> <html> <body> <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> </body> </html>

Wrong Syntax

There are alot of people who write the code in this sytanx which is absolutely wrong. See example below


<!DOCTYPE html> <html> <head><style> #company { background-color: blue; color: white; padding: 2px; } </style> </head><body> <h2 class="company">Tesla</h2> <p class="company">Tesla was founded by Elon Musk</p> </body> </html>
Note: The styling will not work because they have used the id attribute sign instead of class you should always use the (.) before mentioning the class name.

Here is another example using different class and id on a single page:


<!DOCTYPE html> <html> <head><style> #pc { background-color: blue; color: white; padding: 2px; } .place{ background-color: green; color: red; padding: 5px; } </style> </head><body> <h2 id="pc">Dell</h2> <p>I have a dell machine with intel i7 core processer</p> <h2 class="place">Yellowstone Park</h2> <p class="place">We visited yellowstone park last summer</p> </body> </html>

Use of The class Attribute in JavaScript

Html elements can also be addressed by the class name in JavaScript based on the class name.

In JavaScript, the getElementsByClassName() method allows access to elements by their class names:

Here’s another example of it, by clicking on a button below you can hide all elements with the class name “city“:


<!DOCTYPE html> <html><body><br><br><br><br><br><script><br>function myFunction() {<br>var x = document.getElementsByClassName("city");<br>for (var i = 0; i < x.length;<br>i++) {<br>x[i].style.display = "none";<br>}<br>}<br></script><br><br><br><br> </body></html>

Please do not worry if you don’t understand the code in the example above.

Tip: JavaScript will be covered in our upcoming HTML JavaScriptchapter, or you can study our upcoming JavaScript lesson.

Class Attribute in HTML: Benefits

There are several advantages to using unique IDs in HTML:

Reusability: As mentioned earlier, the class attribute allows you to define a set of styles or behaviors that can be applied to multiple elements on a web page. This helps to reduce the amount of code you need to write and makes it easier to maintain and update your website.

Consistency: By using the same class names across different elements, you can ensure that your website has a consistent look and feel, which can help to create a professional and polished appearance.

Flexibility: The class attribute allows you to apply styles or behaviors to multiple elements with a single class name, which gives you more flexibility in your design and layout.

Specificity: The class attribute can be used in conjunction with other CSS selectors to create more specific and targeted styles. This can help to avoid conflicts and ensure that your styles are applied correctly.

Accessibility: By using meaningful class names, you can help to make your website more accessible to users who rely on screen readers or other assistive technologies.

Separation of concerns: By separating your HTML and CSS into different files and using the class attribute to apply styles, you can keep your code organized and easier to read and maintain.

Do subscribe to our Newsletter below in order to get surrounded by the technical knowledge regarding programming languages.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *