HTML Div

An HTML <div> is a block-level element used to group other HTML elements together. It’s often used for styling and layout purposes with CSS and can contain various other HTML elements such as text, images, links, and other nested <div> elements.

Basic Syntax


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

Characteristics of <div>:

Block-Level Element: Occupies the full width available and starts on a new line.

Generic Container: Can contain various other HTML elements such as text, images, links, other nested <div> elements, etc.

No Default Styling: By itself, it doesn’t apply any styles or formatting, making it a flexible tool for layout and design.

Example:

Here’s an example of how a <div> can be used to structure a simple webpage:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Div</title>
    <style>
        .container {
            width: 100%;
            background-color: lightgrey;
        }
        .header {
            background-color: blue;
            color: white;
            padding: 10px;
        }
        .content {
            padding: 20px;
        }
        .footer {
            background-color: blue;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="content">
            <p>This is the content area.</p>
        </div>
        <div class="footer">
            <p>Footer</p>
        </div>
    </div>
</body>
</html>

Explanation of the Example:

Container Div: The .container div wraps the entire content, creating a main container for the page.

Header Div: The .header div contains the header section, styled with a blue background and white text.

Content Div: The .content div holds the main content, with padding applied for spacing.

Footer Div: The .footer div contains the footer, styled similarly to the header.

HTML Div – Interview Questions

Q 1: What is
used for?
Ans: It is used to group HTML elements.
Q 2: Is
a block-level element?
Ans: Yes.
Q 3: Does
have semantic meaning?
Ans: No, it is a non-semantic element.
Q 4: Why is
commonly used?
Ans: For layout and styling with CSS.
Q 5: Can
contain other elements?
Ans: Yes.

HTML Div – Objective Questions (MCQs)

Q1. What is the purpose of the tag in HTML?





Q2. Is an inline or block-level element?





Q3. Can elements be nested inside other elements?





Q4. What attribute is commonly used with for styling?





Q5. Which tag is typically used with to create sections in a webpage?





Related HTML Div Topics