HTML DIV
Sure! In HTML, the <div> element is a versatile container used to group and style content. It's a block-level element, meaning it takes up the full width available and starts on a new line.
Here are some common uses and examples of the <div> element:
HTML DIV Examples
Basic DIV Example
...
In this example, the <div> is used to wrap a paragraph <p>. It doesn't add any special styling or behavior by itself but allows you to apply CSS or JavaScript to the content inside.
DIV with CSS Styling Example
<!DOCTYPE html> <html> <head> <title>Basic DIV Example</title> </head> <body> <div> <p>This is a paragraph inside a div.</p> </div> </body> </html>
In this example, the <div> has a class my-div, which is styled with CSS. The background-color, padding, and border properties are applied to the <div>, affecting its appearance and layout.
Nested DIVs Example
<!DOCTYPE html> <html> <head> <title>Styled DIV Example</title> <style> .my-div { background-color: lightblue; padding: 20px; border: 2px solid darkblue; } </style> </head> <body> <div class="my-div"> <p>This is a paragraph inside a styled div.</p> </div> </body> </html>
Here, a <div> with the class container is used to center its child elements and give them a width of 80%. Inside it, there are multiple <div> elements with the class box, each styled to be a red square. This demonstrates how you can use nested <div> elements to structure and style complex layouts.
DIV with JavaScript Interaction Example
<!DOCTYPE html> <html> <head> <title>Nested DIV Example</title> <style> .container { width: 80%; margin: 0 auto; } .box { width: 100px; height: 100px; background-color: tomato; margin: 10px; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>
In this example, the <div> has an onclick attribute that triggers a JavaScript function when clicked. The function changeColor() changes the background color of the <div>.
Conclusion
These examples illustrate the flexibility of the <div> element for structuring, styling, and adding interactivity to your web content.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.