HTML ID
The HTML id attribute is a unique identifier used to label a single HTML element. Unlike the class attribute, which can be applied to multiple elements, an id should be unique within a page. The id attribute can be used for styling specific elements with CSS or for targeting elements with JavaScript.
Using the id Attribute
The id attribute is often used in CSS to style specific elements and in JavaScript to manipulate them. In CSS, the id selector is prefixed with a #, Here’s how to use the id attribute:
Example with <div> Element
In the following example, a <div> element is styled using an id attribute:
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ #unique-element: An ID selector that styles the element with the ID “unique-element”.
⦁ background-color: lightblue;: Sets the background color to lightblue.
⦁ color: darkblue;: Sets the text color to darkblue.
⦁ border: 2px solid navy;: Adds a 2-pixel solid navy border around the element.
⦁ margin: 20px;: Adds 20 pixels of margin around the element.
⦁ padding: 20px;: Adds 20 pixels of padding inside the element.
⦁ <body>: Contains the visible content of the webpage.
⦁ <div id=”unique-element”>: A <div> element with the ID “unique-element”. This element will have the styles defined in the ID selector applied to it.
⦁ <h2>Special Section</h2>: A heading element inside the <div>.
⦁ <p>This section has a unique style.</p>: A paragraph element inside the <div>.
Differences Between id and class
⦁ Uniqueness: An id must be unique within a page, meaning no two elements should have the same id. In contrast, multiple elements can share the same class.
⦁ Specificity: The id selector in CSS has a higher specificity than the class selector, making it useful for overriding class styles when necessary.
⦁ JavaScript: The id attribute is commonly used to target elements in JavaScript for manipulation.
Using the id Attribute in CSS
The id attribute can be used to apply unique styles to a specific element. In CSS, the id selector is prefixed with a #.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: lightblue;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id=”header”>
<h1>Welcome to My Website</h1>
</div>
</body>
</html>
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ #header: An ID selector that styles the element with the ID “header”.
⦁ background-color: lightblue;: Sets the background color to lightblue.
⦁ color: white;: Sets the text color to white.
⦁ text-align: center;: Centers the text horizontally within the element.
⦁ padding: 10px;: Adds 10 pixels of padding inside the element.
⦁ <body>: Contains the visible content of the webpage.
⦁ <div id=”header”>: A <div> element with the ID “header”. This element will have the styles defined in the ID selector applied to it.
⦁ <h1>Welcome to My Website</h1>: A heading element inside the <div>. This heading will be centered, with white text on a lightblue background, and will have 10 pixels of padding around it.
Using the id Attribute in JavaScript
The id attribute is commonly used to access and manipulate specific elements in JavaScript. You can use methods like getElementById to select an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#changeable {
background-color: yellow;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id=”changeable”>
<p>This text will change on button click.</p>
</div>
<button onclick=”changeContent()”>Click Me</button>
<script>
function changeContent() {
document.getElementById(“changeable”).innerHTML = “<p>The content has been changed!</p>”;
document.getElementById(“changeable”).style.backgroundColor = “lightgreen”;
}
</script>
</body>
</html>
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ #changeable: An ID selector that styles the element with the ID “changeable”.
⦁ background-color: yellow;: Sets the background color to yellow.
⦁ padding: 20px;: Adds 20 pixels of padding inside the element.
⦁ margin: 10px;: Adds 10 pixels of margin around the element.
⦁ <body>: Contains the visible content of the webpage.
⦁ <div id=”changeable”>: A <div> element with the ID “changeable”.
⦁ <p>This text will change on button click.</p>: A paragraph inside the <div> element.
⦁ <button onclick=”changeContent()”>Click Me</button>: A button element. When clicked, it triggers the changeContent() JavaScript function.
⦁ <script>: Contains the JavaScript code for the webpage.
⦁ function changeContent() { … }: Defines a function named changeContent.
⦁ document.getElementById(“changeable”).innerHTML = “<p>The content has been changed!</p>”;: Changes the inner HTML content of the <div> with the ID “changeable” to a new paragraph.
⦁ document.getElementById(“changeable”).style.backgroundColor = “lightgreen”;: Changes the background color of the <div> with the ID “changeable” to light green.
Using the id Attribute for Internal Links
The id attribute can also be used to create internal links within a webpage. This is particularly useful for long documents where navigation is required.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#section1, #section2{
margin: 20px;
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table of Contents</h2>
<ul>
<li><a href=”#section1″>Section 1</a></li>
<li><a href=”#section2″>Section 2</a></li>
</ul>
<div id=”section1″>
<h2>Section 1</h2>
<p>This is the first section.</p>
</div>
<div id=”section2″>
<h2>Section 2</h2>
<p>This is the second section.</p>
</div>
</body>
</html>
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ #section1, #section2: An ID selector that styles both section1 and section2.
⦁ margin: 20px;: Adds 20 pixels of margin around each section.
⦁ padding: 20px;: Adds 20 pixels of padding inside each section.
⦁ border: 1px solid black;: Adds a 1-pixel solid black border around each section.
⦁ <body>: Contains the visible content of the webpage.
⦁ <h2>Table of Contents</h2>: A heading for the table of contents.
⦁ <ul>: An unordered list that contains links to sections within the page.
⦁ <li><a href=”#section1″>Section 1</a></li>: A list item with a link that navigates to section1 when clicked.
⦁ <li><a href=”#section2″>Section 2</a></li>: A list item with a link that navigates to section2 when clicked.
⦁ <div id=”section1″>: A <div> element with the ID “section1”.
⦁ <h2>Section 1</h2>: A heading for the first section.
⦁ <p>This is the first section.</p>: A paragraph inside the first section.
⦁ <div id=”section2″>: A <div> element with the ID “section2”.
⦁ <h2>Section 2</h2>: A heading for the second section.
⦁ <p>This is the second section.</p>: A paragraph inside the second section.
Combining id and class Attributes
An element can have both an id and one or more class attributes. This allows for specific and general styling and scripting.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.special {
font-size: 1.5em;
color: darkblue;
}
#intro {
background- color:lightyellow;
padding: 20px;
}
</style>
</head>
<body>
<div id=”intro” class=”special”>
<p>Welcome to the introduction section. This text is styled using both an id and a class.</p>
</div>
</body>
</html>
Output:
In this example:
⦁ <style>: This block defines internal CSS styles for the document.
⦁ .special: A class selector that styles elements with the class “special”.
⦁ font-size: 1.5em;: Sets the font size to 1.5 times the size of the parent element’s font size.
⦁ color: darkblue;: Sets the text color to dark blue.
⦁ #intro: An ID selector that styles the element with the ID “intro”.
⦁ background-color: powderblue;: Sets the background color to powder blue.
⦁ padding: 20px;: Adds 20 pixels of padding inside the element.
⦁ <body>: Contains the visible content of the webpage.
⦁ <div id=”intro” class=”special”>: A <div> element with both the ID “intro” and the class “special”. This element will inherit styles from both the ID and the class selectors.
⦁ <p>Welcome to the introduction section. This text is styled using both an id and a class.</p>: A paragraph inside the <div> element. It inherits styles from the surrounding <div>.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic ID Application
Objective: Understand how to apply an ID to an HTML element for styling.
Expected Output: A webpage with a styled heading and paragraph using IDs.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic ID Application</title>
<style>
#styled-heading {
color: blue;
font-size: 24px;
text-align: center;
}
#styled-paragraph {
color: green;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body>
<h1 id=”styled-heading”>This is a Styled Heading</h1>
<p id=”styled-paragraph”>This is a styled paragraph with a green color and larger font size.</p>
</body>
</html>
Output:
Scenario 2: Using ID for Unique Styling
Objective: Apply unique styles to different elements using IDs.
Expected Output: Multiple elements with unique styles using different IDs.
Output:
Scenario 3: Combining IDs and Classes
Objective: Use both IDs and classes to style elements.
Expected Output: A webpage demonstrating the combination of IDs and classes for styling.
Output:
Scenario 4: Using ID with JavaScript
Objective: Use an ID to manipulate an HTML element with JavaScript.
Expected Output: A button that changes the text color of a paragraph when clicked.
Output:
Scenario 5: IDs for Layout and Navigation
Objective: Use IDs to style specific sections for layout and navigation.
Expected Output: A webpage with a header, navigation menu, main content area, and footer, each uniquely styled using IDs.
Output:
