Current Location：How HTML > HTML Articles > Content

HTML Div ID

HTML Div ID

In HTML, the div element is a generic container used to group together HTML elements or content. By assigning an id attribute to a div, you can uniquely identify that particular div element within the HTML document. This allows you to style it with CSS or manipulate it with JavaScript.

Adding an ID to a Div Element

You can add an id attribute to a div element by specifying a unique identifier after the equal sign. The id attribute should start with a letter, followed by letters, digits, hyphens, underscores, colons, and periods.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Div ID Example</title>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to how2html.com</h1>
        <p>This website provides tutorials on HTML, CSS, and JavaScript.</p>
    </div>
</body>
</html>

Output:

HTML Div ID

Selecting a Div by ID in CSS

To apply CSS styles to a specific div element with a particular id, you can use the # symbol followed by the id value in your CSS stylesheet.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Div ID CSS Example</title>
    <style>
        #main-content {
            background-color: lightblue;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to how2html.com</h1>
        <p>This website provides tutorials on HTML, CSS, and JavaScript.</p>
    </div>
</body>
</html>

Output:

HTML Div ID

Manipulating a Div by ID with JavaScript

You can access and manipulate a div element by its id using JavaScript. This allows you to dynamically change the content or style of the div.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Div ID JavaScript Example</title>
    <script>
        function changeText() {
            document.getElementById("main-content").innerHTML = "How2HTML is a great resource for web development!";
        }
    </script>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to how2html.com</h1>
        <p>This website provides tutorials on HTML, CSS, and JavaScript.</p>
    </div>
    <button onclick="changeText()">Change Content</button>
</body>
</html>

Output:

HTML Div ID

Using Multiple Divs with Unique IDs

You can have multiple div elements with unique id attributes throughout your HTML document. This allows you to target and style each div individually.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Div IDs Example</title>
    <style>
        #section1 {
            background-color: lightblue;
            padding: 20px;
            border: 1px solid #333;
        }
        #section2 {
            background-color: lightgreen;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="section1">
        <h2>Section 1</h2>
        <p>This is the first section of the page.</p>
    </div>
    <div id="section2">
        <h2>Section 2</h2>
        <p>This is the second section of the page.</p>
    </div>
</body>
</html>

Output:

HTML Div ID

Nesting Divs with IDs

You can also nest div elements within each other, each with its unique id attribute. This allows you to create complex layouts and style them individually.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Nested Div IDs Example</title>
    <style>
        #container {
            border: 1px solid #333;
            padding: 10px;
        }
        #header {
            background-color: lightblue;
            padding: 10px;
            text-align: center;
        }
        #content {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Website Header</h1>
        </div>
        <div id="content">
            <h2>Welcome to how2html.com</h2>
            <p>This website provides tutorials on HTML, CSS, and JavaScript.</p>
        </div>
    </div>
</body>
</html>

Output:

HTML Div ID

Targeting Divs by ID in JavaScript

To interact with specific div elements in JavaScript, you can use the getElementById method to access the div by its unique id attribute.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Targeting Div by ID in JavaScript</title>
    <script>
        function changeColor() {
            document.getElementById("main-content").style.backgroundColor = "lightblue";
        }
    </script>
</head>
<body>
    <div id="main-content">
        <h1>Welcome to how2html.com</h1>
        <p>This website provides tutorials on HTML, CSS, and JavaScript.</p>
    </div>
    <button onclick="changeColor()">Change Color</button>
</body>
</html>

Output:

HTML Div ID

Adding Classes to Divs with IDs

In addition to assigning unique id attributes to div elements, you can also apply CSS classes to style multiple divs with similar characteristics.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Div IDs with CSS Classes Example</title>
    <style>
        .highlight {
            background-color: lightblue;
            padding: 10px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="section1" class="highlight">
        <h2>Section 1</h2>
        <p>This is the first highlighted section.</p>
    </div>
    <div id="section2" class="highlight">
        <h2>Section 2</h2>
        <p>This is the second highlighted section.</p>
    </div>
</body>
</html>

Output:

HTML Div ID

Dynamically Creating Divs with Unique IDs

You can use JavaScript to dynamically create div elements with unique id attributes, allowing you to generate content on the fly.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamically Create Divs with Unique IDs</title>
    <style>
        .generated {
            background-color: lightgreen;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        function createDiv() {
            var newDiv = document.createElement("div");
            newDiv.id = "generated-div-" + Math.floor(Math.random() * 1000);
            newDiv.className = "generated";
            newDiv.textContent = "This is a dynamically created div.";
            document.body.appendChild(newDiv);
        }
    </script>
</head>
<body>
    <button onclick="createDiv()">Create Div</button>
</body>
</html>

Output:

HTML Div ID

Conclusion

In HTML, assigning unique id attributes to div elements allows for more specific targeting, styling, and manipulation of content. By utilizing div IDs in conjunction with CSS and JavaScript, you can create dynamic and visually appealing web pages. Remember to choose meaningful and descriptive id values for your div elements to maintain clarity and organization in your code.

Like(0)

HTML Articles