Home 〉 HTML Tutorials 〉 HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag

HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag !

HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag !

Do you know the difference between class and id attributes in HTML?

This blog post explains the 'class' and 'id' attributes in detail, covering syntax, usage, and valid examples. You'll also learn how to assign multiple classes to one HTML tag and why assigning multiple ids is invalid. The post includes internal CSS styling examples to improve web design and structure. It also shares related topics and a helpful Wikipedia link. The detailed blog post on HTML class & id is as follows.

Introduction

When building websites using HTML, the class and id attributes are essential tools that help you style, identify, and control elements using CSS or JavaScript. These attributes provide a structured way to apply styling or scripts to elements, making your HTML code efficient and organized.

Syntax and Explanation

Class Attribute Syntax:

Syntax ✍

<tag class="className">Content</tag>
<tag class="className className1">Content</tag>

  • The 'class' attribute assigns a name to an HTML element. This name can be targeted using CSS or JavaScript. You can reuse class names for multiple elements.
  • Multiple classes can be assigned to a single HTML element by giving space between classnames

ID Attribute Syntax:

Syntax ✍

<tag id="uniqueId">Content</tag>

The 'id' attribute assigns a unique identifier to an HTML element. It must be unique across the HTML document and is often used for styling specific elements or targeting them via JavaScript.

Examples of Class & ID Attributes

Class Attribute Example:

Example 📄

<div class="highlight">Welcome to our HTML tutorial</div>

The 'div' element has a class name 'highlight', which can be used in CSS to apply styles like color or padding to any element with this class.

ID Attribute Example:

Example 📄

<p id="intro">This paragraph has a unique ID.</p>

The paragraph uses the 'id' attribute to uniquely identify it for custom styling or scripting.

Multiple Classes in One HTML Tag

Example 📄

<div class="box shadow">This box has multiple classes</div>

The 'div' element is using two classes: 'box' and 'shadow'. You can target each class in CSS to apply multiple styles to a single element.

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.shadow {
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

</style>
</head>
<body>

<div class="box shadow">This box has multiple classes</div>

</body>
</html>

output 📌

This box has multiple classes
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Multiple IDs in One HTML Tag

Example (Invalid):

Example 📄

<div id="main" id="secondary">Invalid Example</div>

This is invalid HTML. An element cannot have more than one 'id'. Only one unique 'id' is allowed per element in the entire HTML document.

Internal CSS Styling (Best Practice)

Here is how you can style the elements internally using a '<style>' tag:

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.highlight {
color: #ffffff;
background-color: #007BFF;
padding: 10px;
font-size: 18px;
border-radius: 5px;
}
#intro {
font-size: 16px;
color: #333333;
margin: 10px 0;
}

</style>
</head>
<body>

<div class="highlight">Welcome to our HTML tutorial</div>
<p id="intro">This paragraph has a unique ID.</p>

</body>
</html>

output 📌

Welcome to our HTML tutorial

This paragraph has a unique ID.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Conclusion

The 'class' and 'id' attributes are essential for applying custom styles and managing your HTML layout effectively. While 'class' allows you to reuse styles across multiple elements, 'id' gives you a way to uniquely target specific content. Remember, you can apply multiple classes but only one id to an element. These attributes, combined with internal CSS, allow developers to build structured, maintainable, and beautiful web pages.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

Can I use both class and id on the same HTML element?

Yes, you can use both on the same element. 'id' must be unique, while 'class' can be shared.

Can an element have multiple classes?

Yes, you can assign multiple classes to an element using space-separated values.

Why can't I use multiple ids in one tag?

HTML standards require that the 'id' be unique for each element and not repeated.

What is the use of id in JavaScript?

The 'id' is often used to target and manipulate HTML elements in JavaScript.

Previous Post Next Post