← Back to HTML Course | Chapter 3: Page Structure | Lesson 2 of 12

HTML Classes

Imagine you are running a school and want to organize the sports day. If you have fifty students, it is tedious to call out every single child's name to tell them to wear red shirts. Instead, you assign them to a team, like 'Team Red'. Now, whenever you yell 'Team Red', everyone in that group knows what to do. HTML classes work exactly like those school teams. A class is a custom name tag you attach to your elements. By placing multiple elements in the same class, you can style or program all of them at once. It is the most efficient way to keep your design consistent across your page without repeating your code for every single container.

In this page:

  1. What is the class Attribute?
  2. Selecting Classes with CSS
  3. Using Multiple Classes Together
  4. Classes in JavaScript Selectors
  5. Semantic Class Naming Styles
Syntax
markup 
<tagname class="classname">content</tagname>

<style>
  .classname {
    property: value;
  }
</style>

What is the class Attribute?

The class attribute is used to group multiple HTML elements together. By assigning a class name to various elements, you can apply identical styles or scripts to all of them simultaneously.

Note: Class names must begin with a letter and are highly case-sensitive.
Warning: Do not write spaces inside a class name, or the browser will treat them as multiple separate classes.

Example: What is the class Attribute?

markup 
<p class="highlight">First</p>
<p class="highlight">Second</p>

Selecting Classes with CSS

To target and style classes inside your stylesheet, you use a dot (.) followed by your exact class name. This selects every element on the webpage possessing that class name.

Note: Using class selectors is the best practice for styling clean and scalable layouts.
Warning: Never start your CSS selector name with a dot inside your HTML class attribute itself.

Example: Selecting Classes with CSS

markup 
<style>
  .highlight {
    color: orange;
  }
</style>
<p class="highlight">Styled by class</p>

Using Multiple Classes Together

An HTML element is not limited to just one class. You can apply multiple class names to a single element by separating them with spaces. This allows you to combine layout and style classes dynamically.

Note: Use a utility-first approach by combining separate layout and color classes.
Warning: Ensure you separate multiple classes with spaces only, and do not use commas or semicolons.

Example: Using Multiple Classes Together

markup 
<div class="card large">Combined classes</div>

Classes in JavaScript Selectors

Classes are not just for styling. Web scripts can target elements by their class names using methods like getElementsByClassName or querySelectorAll to perform actions on multiple items at once.

Note: Use class tags to capture and animate entire groups of elements with web scripts.
Warning: Be aware that script targets using classes return an array-like list of elements, not a single element.

Example: Classes in JavaScript Selectors

markup 
<script>
  document.querySelectorAll('.highlight');
</script>
<p class="highlight">Targeted by script</p>

Semantic Class Naming Styles

Writing random or messy class names makes your code hard to read and scale. Using descriptive, semantic naming patterns (like using hyphens to separate words) makes your layout structure clear to other developers.

Note: Use standard, hyphen-separated names like tool-container instead of toolcontainer.
Warning: Avoid naming classes after visual styles like red-text; use semantic names like warning-message instead so they remain accurate if you change colors later.

Example: Semantic Class Naming Styles

markup 
<div class="tool-container">Semantic, hyphenated class name</div>
Live Example
Related Topics

HTML Project · HTML Id · HTML Iframes · HTML JavaScript

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Adding a dot prefix inside your HTML class attribute values (e.g., class=".card").
  2. Separating multiple classes with commas instead of standard spaces.
  3. Naming classes with vague visual terms like blue-box which become outdated when redesigning your site.
Chapter Summary
  • The class attribute groups multiple HTML elements together for group styling and scripting.
  • Select and style classes inside CSS using a dot prefix followed by the exact class name.
  • Apply multiple classes to a single element by separating their names with spaces inside the class attribute.
Browser Support

The class attribute is fully supported across all modern and legacy web browsers natively.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Project Next Lesson → HTML Id

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.