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.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: HTML Links

Next: HTML Tables

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.