Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are valid values for the id attribute in HTML?
The ID attribute in HTML is called as unique identifier for the element. It helps in identifying an area in a web page by using CSS styles, targets for scripts and anchor links.
First let us see, what is the use of ID attributes in HTML −
The ID attribute can perform different actions on web pages by using commands −
ID attribute used to reference for scripts − In JavaScript functions, we use ID attribute for making changes to the precise element on the page with our scripts.
ID attribute use for style sheet selector − Most of the people will use this function because if we want to style one item on web page mostly this property will use.
ID attributes are used for named anchors for linking − Web browsers goes to particular locations in our web documents by simply pointing to the ID at the end of the URL preceded by a hash mark.
Syntax
The syntax or usage of ID attribute in HTML −
<tag id = #values>
ID Attribute Rules in HTML −
Make sure that the ID attribute, following the below rules or not −
In ID attribute at least one character should be there, starting letter should be character (a-z) or (A-Z), rest of the letters any type can written even special characters.
ID attribute does not contain any spaces.
Within the document every ID must be unique.
Example
Following example shows the values of ID attribute -
<div id = "#123"> .... </div>
<tag id = "#%ADF@"> .... </tag>
<h1 id = " _H"> .... </h1>
<div id = "@"> .... </tag>
<tag id = " {}"> .... </tag>
Before understanding these values for ID attribute is valid or not, try to understand class attribute and the difference between class and ID attribute, it helps in understanding about ID attribute in detail.
Class Attribute
we can create a class in starting tag for any tag. Suppose, if we want to apply styles to the class we simply use the (.) period symbol, followed by the class name in the style tag.
Example
Let us see the below example to understand class attribute −
<!DOCTYPE html>
<html>
<head>
<title>Class attribute</title>
<style type="text/css">
.heading {
color: green;
text-align: center;
}
#heading {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 class="heading">Welcome To TutorialsPoint.</h1>
<h2 id="heading">HTML5 Tutorial</h2>
</body>
</html>
When we run the above code, a webpage with two headings will be displayed, one with class attribute (Welcome to Tutorialspoint) and the other one with ID attribute (HTML5 Tutorial).
Difference between ID attribute and Class Attribute
The difference between an ID and class attributes is that an id attribute can be used to identify one element, where as a class attribute can be used to identify more than one element.
ID Attribute
Each element can have only one ID.
Each page can have only one element with that ID.
When we use validation the id's must be unique.
Class
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Example
Certain ID Attributes are valid in HTML 5, but not in Cascading Style Sheets. In such cases, it is recommended to go with simple output rather than styled output because certain values that we use for ID may be invalid in CSS.
Following example demonstrates the use of simple ID attribute using CSS −
<!DOCTYPE html>
<html>
<head>
<title>Simple Id Attributes</title>
<style>
#@TP {
color: #070770;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#@TP1 {
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="@TP">TutorialsPoint Website</div>
<div id="@TP1">
Html5 Tutorials, CSS Tutorials, JavScript Tutorials
</div>
</body>
</html>
When we execute the above code, two div elements will be displayed, one with ID attribute (TutorialsPoint Website), and the other one with other ID attribute (Html5 Tutorials, CSS Tutorials, JavaScript Tutorials).
Example
Now we will change the value IDs in the above example. ID’s values are valid in HTML 5 and in CSS. Therefore, we can get a styled output because of valid ID’s.
Following is the example which demonstrate the functioning of valid ID’s −
<!DOCTYPE html>
<html>
<head>
<title>Simple Id Attributes</title>
<style>
#TP1 {
color: #070770;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#TP2 {
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<div id="TP1">TutorialsPoint Website</div>
<div id="TP2">
Html5 Tutorials, CSS Tutorials, JavScript Tutorials
</div>
</body>
</html>
When we execute the above program, two div elements with ID attributes are displayed as follows -
Example
Consider another example which demonstrates “Invalid ID’s not supported in JavaScript” notion.
<!DOCTYPE html>
<html>
<body>
<h1 id="1TP">TutorialsPoint WEBSITE Content</h1>
<button onclick="Value()">
Display
</button>
<style>
#.1TP {
color: blue;
}
</style>
<script>
function Value() {
document.getElementById(".1TP").innerHTML = "TutorialsPoint";
}
</script>
</body>
</html>
Example
Consider another example which demonstrates Valid ID’s that are supported by JavaScript and HTML.
<!DOCTYPE html>
<html>
<body>
<h1 id="TP">TutorialsPoint WEBSITE Content</h1>
<button onclick="displayResult()">
Display
</button>
<style>
#TP{
color: blue;
}
</style>
<script>
function displayResult() {
document.getElementById("TP").innerHTML = "TutorialsPoint";
}
</script>
</body>
</html>
When we run the above program, an ID attribute will be displayed along with the button labelled as display.
When ID value is taken only in characters, then JavaScript and HTML supports the ID and When Clicked on the display button the below page will open.
922 Views
