The id is a global attribute that defines a unique identifier of an element which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling with CSS. The class attribute specifies one or more class names for an HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. In CSS elements with class are selected by its class name along with “.” prefix

HTML id Attribute


Id is an attribute that define the unique id for an element. The id is used by CSS and Java Script to perform specific tasks for elements. In CSS elements with id are selected by its value along with “#” prefix like below example:

Example - 2

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Id Attribute</title>
<style>
#head{
background-color: yellow;
}
#para{
color: red;
}
</style>
</head>
<body>
<h1 id = "head">This is Heading.</h1>
<p id = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red.</p>
</body>
</html>




In Java script elements with id are selected to perform task like below example:

Example - 2

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Id Attribute</title>
<style>
#head{
background-color: yellow;
}
#para{
color: red;
}
</style>
</head>
<body>
<h1 id = "head">This is Heading.</h1>
<p id = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red. Click the below button to change the color of this paragraph to green.</p>
<br />
<button onclick = "color()">Click</button>
<script>
function color(){
var text = document.getElementById("para");
text.style.color = "green";
}
</script>
</body>
</html>




JavaScript can access elements with a specified id by using the getElementById() method.

The id is a global attribute that defines a unique identifier of an element which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling with CSS.

Class Attribute


The class attribute specifies one or more class names for an HTML element.

The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

In CSS elements with class are selected by its class name along with “.” prefix like below example

Example - 3

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Class Attribute</title>
<style>
.head{
background-color: yellow;
}
.para{
color: red;
}
</style>
</head>
<body>
<h1 class = "head">This is Heading.</h1>
<p class = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red. </p>

</body>
</html>




Example - 4

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Class Attribute</title>
<style>
.head{
background-color: yellow;
}
.para{
color: red;
}
</style>
</head>
<body>
<h1 class = "head">This is Heading.</h1>
<p class = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red. Click the below button to change the color of this paragraph to green.</p>
<br />
<button onclick = "color()">Click</button>
<script>
function color(){
var text = document.getElementsByClassName("para")[0];
text.style.color = "green";
}
</script>
</body>
</html>




JavaScript can access elements with a class by using the getElementsByClassName() method.

Multiple Classes

HTML elements can have multiple classes. Each class must be separated by a space like below example:

Example - 5

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Class Attribute</title>
<style>
.head{
background-color: yellow;
}
.para{
color: red;
}
</style>
</head>
<body>
<h1 class = "head para">This is Heading.</h1>
<p class = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red.</p>
</body>
</html>




Identical Class in different elements


Two or more different HTML element can have identical class. Check below examples.

Example - 6

<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Class Attribute</title>
<style>
.head{
background-color: yellow;
}
.para{
color: red;
}
</style>
</head>
<body>
<h1 class = "para">This is Heading.</h1>
<p class = "para">This is paragraph above is the heading which background color is Yellow. This paragraph text color is red.</p>
</body>
</html>





In Next Chapter we will learn HTML File Path

HTML Attributes ID & Class




Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

1 comments:


  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

    ReplyDelete