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>
<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>
<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>
<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>
<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>
<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>
<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
Post A Comment:
0 comments: