• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Div Quiz

Q1: What does the <div> tag represent in HTML?

A. Divider line
B. Division or container
C. Data input value
D. Dynamic value

Q2: What is the default display behavior of <div>?

A. inline
B. none
C. block
D. inline-block

Q3: How can you apply a style to a <div>?

A. Only inline
B. Only internal CSS
C. Only external CSS
D. Using class, id, or inline styles

Q4: Which of the following can be grouped inside a <div>?

A. Paragraphs
B. Images
C. Lists
D. All of the above

Q5: What is the purpose of giving a class to a <div>?

A. Make it visible
B. Define data
C. Apply CSS or JavaScript easily
D. Hide the content

Q6: What will happen if you nest <div> elements?

A. Error occurs
B. It won’t render
C. It works properly
D. Browser crashes

Q7: Which tag is commonly used with <div> to separate layout sections?

A. <table>
B. <iframe>
C. <span>
D. <section>

Q8: Which CSS property can you use to style the border of a <div>?

A. text-style
B. div-outline
C. border
D. block-style

Q9: What tag is used for inline text grouping instead of <div>?

A. <inline>
B. <text>
C. <span>
D. <section>

Q10: How can you make a <div> float next to another?

A. display: block;
B. float: left;
C. margin: 0 auto;
D. visibility: show;
← Previous Next →
Login
Go Back Top