HTML – Classes & Ids
Html Classes & Ids are used to provide a proper identity to any element, and group up with other elements.
Classes and Ids are one of the most used attributes in the Html Web Document. It is not only used in Html but they are also part of other web languages like CSS, BootStrap, JavaScript, etc.
Html Classes
Class is a naming attribute used for level grouping of the different or the same type of elements. The class is basically used for categorizing elements for applying the same style to all elements and it is also used in a script for making the same behavior of same class elements. Classes are also known as Global Attributes.
The class attribute is denoted by the dot/period operator (.) and it is case sensitive.
The class name can be started with the alphabet like (A-Z or a-z) and it can be followed by hyphen (-), Underscore ( _ ), or any digit (0-9) with no space or tabs.
Let’s Look at an example of classes in Html with CSS, where CSS is used for Html Document Styling.
Below is an example of the Html Class with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
.abc{
background-color: purple;
color: antiquewhite;
padding: 10px;
border: 1px solid #ddd;
width:300px;
height:300px;
}
</style>
</head>
<body>
<h1>HTML - Classes & Ids</h1>
<hr>
<!--HTML CLASS Example With CSS-->
<div class="abc">
<h4>Heading 1</h4>
</div>
<h4 class="abc">
Heading 2
</h4>
</body>
</html>
Here the class attribute with the value of “abc” used in the div tag and in h4 heading tag. Internal Styling is used in the example inside the head section which applies styling to the class “abc”. The dot operator is used with a class name, which is used in styling.
All the property of class will apply to all the elements of the same class.
Level Classes
Level classes or Multiple classes are used to add more classes and it will make it easy to apply more CSS styling property. The classes can be used with different names in a single element and the multiple classes can also be used with different names in the single element.
Classes levels are started from level one and then increment by one. Example (class 1) first_class_name, (class 2) second_class_name, (class 3) third_class_name, etc. all classes are separated by space.
Below is an example of level/multiple classes.
<div class="first_class second_class third_class"> Example of Level/Multiple Classes</div>
You can use the same element classes with other elements.
Below is an example of Level/Multiple Classes use in other elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
.class_a{
background-color: #ddd;
padding: 10px;
width:200px;
height:200px;
}
.class_b{
color: purple;
font-size: 40px;
}
.class_c{
border: 1px dotted #000;
}
</style>
</head>
<body>
<h1>HTML - Classes</h1>
<hr>
<!--HTML Level Classes or Multiple Classes Example With CSS-->
<div class="class_a class_b class_c">
<h4>Heading 1</h4>
</div>
<h4 class="class_b class_c">Heading 2</h4>
<h4 class="class_a class_c">Heading 3</h4>
<h4 class="class_b class_a">Heading 4</h4>
<h4 class="class_a">Heading 5</h4>
</body>
</html>
You will study more about class styling in CSS Tutorials and the use of class in JavaScript in JavaScript Tutorials.
HTML Ids
Html ids are used as a unique identifier for any element.
Id is a naming attribute used for Unique Identification of any element. The id is also for styling and scripting like classes. Ids are also known as Global Attributes.
The Id attribute is denoted by the hash symbol (#) and it is case sensitive.
The id name can be started with the alphabet like (A-Z or a-z) and it can be followed by hyphen (-), Underscore ( _ ), or any digit (0-9) with no space or tabs.
Some important points about id attribute:
- You can use id attribute for making an element uniquely identify for styling and scripting,
- You can use id attribute for jumping over a particular section like a bookmark.
Below is an example of the Html IDs with CSS styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
#a{
color:purple;
}
#b{
color:red;
}
#c{
color:blue;
}
#d{
color:green;
}
</style>
</head>
<body>
<h1>HTML - Ids</h1>
<hr>
<!--HTML Id Example With CSS-->
<h1 id="a"> Heading 1</h1>
<h2 id="b">Heading 2</h2>
<h3 id="c">Heading 3</h3>
<h4 id="d">Heading 4</h4>
</body>
</html>
Here All the four heading h1 to h4 having different ids for different style property.
Html Ids used as a Bookmark
Html ids can also be used for bookmarks means you can jump over a particular section or paragraph via a link or ids.
In this id attribute is used with an anchor tag for making a hyperlink which will scroll to the destination.
Below is an example of Html Ids Bookmark.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI - HTML Tutorials</title>
<style>
#a{
color:purple;
}
#b{
color:red;
}
</style>
</head>
<body>
<h1>HTML - Ids</h1>
<hr>
<!--HTML Id Bookmark Example Example With CSS-->
<h1 id="a"> Heading 1</h1>
<a href="#b">Go To Heading 2</a>
<p>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
Dummy text line statement.
<br>
</p>
<h2 id="b">Heading 2</h2>
<a href="#a">Go To Heading 1</a>
</body>
</html>
Here anchor tag is used after heading tags for making a hyperlink for jumping over the paragraph. The id name/value is used as href value in the anchor tag.
You will study more about id styling in CSS Tutorials and the use of id in JavaScript in JavaScript Tutorials.