| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Class and ID attributes in HTML are used to identify and style elements. They play crucial roles in web development, particularly in CSS styling, JavaScript manipulation, and creating accessible web pages.
1. Class Attribute
The ‘class‘ attribute is used to assign one or more class names to an HTML element. Classes are often used to apply styles or to target elements in JavaScript.
Syntax:
<tagname class="classname">Content</tagname>
Key Points:
- A single element can have multiple classes, separated by spaces.
- Multiple elements can share the same class name.
Example 1: Basic Usage
<div class="container">
<p class="text">This is a paragraph.</p>
<button class="btn">Click me</button>
</div>
- Here, the ‘
div‘, ‘p‘, and ‘button‘ elements have the classes ‘container‘, ‘text‘, and ‘btn‘, respectively. CSS can then style these classes:
.container {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.text {
font-size: 18px;
color: blue;
}
.btn {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
Example 2: Multiple Classes
<button class="btn primary large">Submit</button>
- In this example, the button has three classes: ‘
btn‘, ‘primary‘, and ‘large‘. Each class can apply different styles:
.btn {
border-radius: 5px;
}
.primary {
background-color: blue;
color: white;
}
.large {
font-size: 20px;
padding: 15px;
}
2. ID Attribute
The ‘id‘ attribute provides a unique identifier for an HTML element. Each element in a document can only have one ID, and that ID must be unique within the document.
Syntax:
<tagname id="unique-id">Content</tagname>
Key Points:
- An element can only have one ID.
- The ID must be unique within the entire HTML document.
- IDs are often used for targeting elements in CSS or JavaScript.
Example 1: Basic Usage
<div id="header">
<h1>Welcome to My Website</h1>
</div>
- Here, the ‘
div‘ element has an ID of ‘header‘. It can be targeted with CSS or JavaScript:
#header {
background-color: lightblue;
padding: 20px;
text-align: center;
}
Example 2: Form Element with ID
<label for="username">Username:</label>
<input type="text" id="username" name="username">
- In this example, the ‘
label‘ is linked to the ‘input‘ field by the ‘for‘ attribute, which matches the ‘id‘ of the input element. This improves accessibility and usability.
Differences between Class and ID
Uniqueness:
- ID must be unique in the entire document.
- Class can be shared by multiple elements.
Usage:
- ID is typically used to identify a single, unique element.
- Class is used to group elements for styling or behavior.
CSS Specificity:
- ID has higher specificity in CSS than a class.
- CSS selectors using an ID (‘
#id‘) will override selectors using a class (‘.class‘) if both apply to the same element.
Example: Combining Class and ID
<div id="main-content" class="content">
<h2 class="title">Article Title</h2>
<p class="text intro">This is an introduction.</p>
</div>
- Here, the
divhas both an ID (‘main-content‘) and a class (‘content‘). The ‘h2‘ and ‘p‘ elements have their own classes for styling purposes.
