• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Div

← Previous Next →

🔹 What is <div> in HTML?

The <div> tag in HTML stands for "division" and is used as a container element to group and style HTML elements using CSS or JavaScript.

It is a block-level element, meaning it starts on a new line and stretches the full width of its parent.

🔹 Syntax
<div>
  <!-- Content goes here -->
</div>

🔹 Use Cases of <div>

  • Grouping elements logically

  • Styling sections with CSS

  • Applying JavaScript interactions

  • Building layouts (like header, sidebar, footer)

🔹 Example: Grouping Elements

<div>
  <h2>News</h2>
  <p>Latest updates go here.</p>
</div>

🔹 Adding a Class or ID

You can assign a class or ID to a <div> for styling and targeting.

<div class="container">
  <h1>Welcome</h1>
</div>

<div id="footer">
  <p>Copyright © 2025</p>
</div>

🔹 Styling a <div> with CSS

<style>
  .box {
    background-color: #f2f2f2;
    padding: 20px;
    border: 1px solid #ddd;
  }
</style>

<div class="box">
  <p>This is a styled div.</p>
</div>

🔹 Nested <div> Tags

<div class="outer">
  <div class="inner">
    <p>Nested content</p>
  </div>
</div>

🔹 Layout Example with <div>

<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Main Content</div>
<div class="footer">Footer</div>

Practice Questions

Q1. Create a <div> that contains a heading and paragraph.

Q2. Use a <div> with a class name and apply background color using CSS.

Q3. Group three paragraphs inside one <div>.

Q4. Create a layout with four <div>s: header, sidebar, content, and footer.

Q5. Add borders and padding to a <div> using CSS.

Q6. Create nested <div> blocks and style them differently.

Q7. Center-align text inside a <div> using CSS.

Q8. Assign an ID to a <div> and target it with CSS.

Q9. Use JavaScript to change the content inside a <div>.

Q10. Display two <div>s side by side using display: inline-block.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top