![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/html-id-attribute-df.jpg\")
<\/a><\/p>\nUsage of Id Attribute in HTML<\/h2>\n\n- The id value can be accessed by CSS and JavaScript for styling and performing specific tasks respectively.<\/li>\n
- id of an element is case sensitive and must contain at least one character.<\/li>\n
- The id attribute can be applied to all the elements.<\/li>\n<\/ul>\n
Using IDs in HTML also helps in styling and scripting along with enhancing accessibility. Screen readers can navigate to elements with specific IDs which further improves the user experience for visually impaired users. Also, the search engines use IDs to understand the content structure better.<\/p>\n
Syntax-<\/strong><\/p>\n<tagname id=\u201d\u201d><\/tagname><\/pre>\nExample of HTML ID Attribute<\/h3>\n<!DOCTYPE html> \r\n<html> \r\n<head> \r\n <title>DataFlair id attribute<\/title> \r\n <style> \r\n #DataFlair { \r\n font-size:50px; \r\n font-weight:bold; \r\n text-align:center; \r\n } \r\n #Article { \r\n text-align:center; \r\n font-size:50px; \r\n } \r\n <\/style> \r\n<\/head> \r\n<body> \r\n <div id=\"DataFlair\">DataFlair<\/div> \r\n <div id=\"Article\">E-learning<\/div> \r\n<\/body> \r\n<\/html> \r\n<\/pre>\n(Here, two divisions with id DataFlair and Article have been created and styled with CSS. \u2018#\u2019 is used to access these elements with id).<\/p>\n
Output-<\/strong><\/p>\n![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Image1basic-example.png\")
<\/a><\/p>\nNote-<\/strong> The ID of an element must contain at least one character and should be devoid of spaces.<\/p>\nDifference between HTML Class and HTML ID<\/h2>\n
Each element in an HTML document can have only one unique ID and that ID is used to access that particular element only. On the other hand, multiple elements can have the same class and a single element can belong to multiple classes.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* Style the element with the id \"myId\" *\/\r\n#myId {\r\n background-color: lightblue;\r\n color: black;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\r\n\/* Style all elements with the class name \"courses\" *\/\r\n.courses {\r\n background-color: tomato;\r\n color: white;\r\n padding: 10px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1 id=\"myId\">My Courses<\/h1>\r\n<!-- Multiple similar elements -->\r\n<h2 class=\"city\">HTML5<\/h2>\r\n<h2 class=\"city\">Python<\/h2>\r\n<h2 class=\"city\">Machine Learning<\/h2>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n![\"difference](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Image2difference-between-class-and-id.png\")
<\/a><\/p>\nHTML Bookmarks<\/h2>\n
If a web-page is too long, it would be a tedious task to jump to its specific portions. To facilitate this, link bookmarks can be used. For this, the ID of the element is given as the link. For example,<\/p>\n
<html> \r\n<body> \r\n<p><a href=\"#T11\">Jump to Topic 11<\/a><\/p> <!--link the ID in href-->\r\n<p><a href=\"#T17\">Jump to Topic 17<\/a><\/p> \r\n<p><a href=\"#T20\">Jump to Topic 20<\/a><\/p> \r\n<h2>Topic 1<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 2<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 3<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 4<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 5<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 6<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 7<\/h2> \r\n<p>paragraph 1<\/p> \r\n<h2>Topic 8<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 9<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 10<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T11\">Topic 11<\/h2> <!--create an ID-->\r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 12<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 13<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 14<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 15<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 16<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T17\">Topic 17<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 18<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 19<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T20\">Topic 20<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<\/body> \r\n<\/html> \r\n<\/pre>\nOutput-<\/strong><\/p>\n![\"html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Image-3bookmark.png\")
<\/a><\/p>\nJavaScript and ID Attribute in HTML<\/h2>\n
In order to perform task on a particular element, ID attribute is useful. The getElementByID() method is used here. For example,<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n <head> \r\n <style> \r\n #dataflair { \r\n font-size:50px; \r\n color:blue;\r\n font-weight:bold; \r\n margin-bottom:10px; \r\n } \r\n <\/style> \r\n <script> \r\n function DataFlair() { \r\n document.getElementById(\"dataflair\").innerHTML = \r\n \"Welcome to DataFlair E-learning\"; \r\n document.getElementById(\"dataflair\").style.color = \"black\"; \r\n } \r\n <\/script> \r\n <\/head> \r\n <body> \r\n <div id=\"dataflair\">DataFlair<\/div> \r\n <button onclick=\"DataFlair()\">Text change<\/button> \r\n <\/body> \r\n<\/html>\r\n<\/pre>\nOutput-<\/strong>
\nBefore-<\/p>\n
Using IDs in HTML also helps in styling and scripting along with enhancing accessibility. Screen readers can navigate to elements with specific IDs which further improves the user experience for visually impaired users. Also, the search engines use IDs to understand the content structure better.<\/p>\n
Syntax-<\/strong><\/p>\n (Here, two divisions with id DataFlair and Article have been created and styled with CSS. \u2018#\u2019 is used to access these elements with id).<\/p>\n Output-<\/strong><\/p>\n Note-<\/strong> The ID of an element must contain at least one character and should be devoid of spaces.<\/p>\n Each element in an HTML document can have only one unique ID and that ID is used to access that particular element only. On the other hand, multiple elements can have the same class and a single element can belong to multiple classes.<\/p>\n Output-<\/strong><\/p>\n If a web-page is too long, it would be a tedious task to jump to its specific portions. To facilitate this, link bookmarks can be used. For this, the ID of the element is given as the link. For example,<\/p>\n Output-<\/strong><\/p>\n In order to perform task on a particular element, ID attribute is useful. The getElementByID() method is used here. For example,<\/p>\n Output-<\/strong><tagname id=\u201d\u201d><\/tagname><\/pre>\n
Example of HTML ID Attribute<\/h3>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n <title>DataFlair id attribute<\/title> \r\n <style> \r\n #DataFlair { \r\n font-size:50px; \r\n font-weight:bold; \r\n text-align:center; \r\n } \r\n #Article { \r\n text-align:center; \r\n font-size:50px; \r\n } \r\n <\/style> \r\n<\/head> \r\n<body> \r\n <div id=\"DataFlair\">DataFlair<\/div> \r\n <div id=\"Article\">E-learning<\/div> \r\n<\/body> \r\n<\/html> \r\n<\/pre>\n<\/a><\/p>\nDifference between HTML Class and HTML ID<\/h2>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* Style the element with the id \"myId\" *\/\r\n#myId {\r\n background-color: lightblue;\r\n color: black;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\r\n\/* Style all elements with the class name \"courses\" *\/\r\n.courses {\r\n background-color: tomato;\r\n color: white;\r\n padding: 10px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1 id=\"myId\">My Courses<\/h1>\r\n<!-- Multiple similar elements -->\r\n<h2 class=\"city\">HTML5<\/h2>\r\n<h2 class=\"city\">Python<\/h2>\r\n<h2 class=\"city\">Machine Learning<\/h2>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\nHTML Bookmarks<\/h2>\n
<html> \r\n<body> \r\n<p><a href=\"#T11\">Jump to Topic 11<\/a><\/p> <!--link the ID in href-->\r\n<p><a href=\"#T17\">Jump to Topic 17<\/a><\/p> \r\n<p><a href=\"#T20\">Jump to Topic 20<\/a><\/p> \r\n<h2>Topic 1<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 2<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 3<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 4<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 5<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 6<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 7<\/h2> \r\n<p>paragraph 1<\/p> \r\n<h2>Topic 8<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 9<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 10<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T11\">Topic 11<\/h2> <!--create an ID-->\r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 12<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 13<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 14<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 15<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 16<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T17\">Topic 17<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 18<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2>Topic 19<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<h2 id=\"T20\">Topic 20<\/h2> \r\n<p>paragraph 1 <\/p> \r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
<\/a><\/p>\nJavaScript and ID Attribute in HTML<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n <head> \r\n <style> \r\n #dataflair { \r\n font-size:50px; \r\n color:blue;\r\n font-weight:bold; \r\n margin-bottom:10px; \r\n } \r\n <\/style> \r\n <script> \r\n function DataFlair() { \r\n document.getElementById(\"dataflair\").innerHTML = \r\n \"Welcome to DataFlair E-learning\"; \r\n document.getElementById(\"dataflair\").style.color = \"black\"; \r\n } \r\n <\/script> \r\n <\/head> \r\n <body> \r\n <div id=\"dataflair\">DataFlair<\/div> \r\n <button onclick=\"DataFlair()\">Text change<\/button> \r\n <\/body> \r\n<\/html>\r\n<\/pre>\n
\nBefore-<\/p>\n