- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - Global id Attribute
HTML id is global attribute used to uniquely identify an element within a document, allowing it to be targeted by CSS or JavaScript for styling or manipulation purposes.
The "id" attribute should be unique within the HTML document to ensure proper functionality and adherence to web standards. The name of the id is referred to by the "#" keyword in CSS and Dom methods such as document.getElementById("id_name") in JavaScript.
Syntax
<element id = "id_name" >
The id_name could be anything, buut do not use the same id on other elements.
Applies On
Id attribute is a global attribute, which means it is supported by almost all HTML tags. However structural tags like <html>, <head> does not support id tag.
Example of HTML id Attribute
Below examples will illustrate the HTML id attribute, where and how we should use this attribute!
Id tag applied to paragraph
In the following example, we are creating an HTML document and using the id attributes to style the content of the elements, as follows −
<!DOCTYPE html> <html> <head> <style> #exciting { background-color: orange; border: 1px solid #696969; padding: 10px; border-radius: 10px; box-shadow: 2px 2px 1px black; } #exciting:before { content: 'ℹ️'; margin-right: 5px; } </style> </head> <body> <p> This is a Normla Text </p> <p id="exciting"> HTML id attribute used on this content </p> </body> </html>
Select element through id Attribute
Let's look into the following example, where we are going to run the script and change background color of paragraph using the id attribute when a button is clicked
<!DOCTYPE html> <html> <body> <p>This is a paragraph</p> <p id="myPara"> HTML id is global attribute used to uniquely identify an element within a document, allowing it to be targeted by CSS or JavaScript for styling or manipulation purposes. </p> <button type="button" onclick="changeBackground()"> change background </button> <script> function changeBackground() { var para = document.getElementById("myPara"); para.style.backgroundColor = "grey"; } </script> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
id | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google