codeswithpankaj

HTML Div Element

Welcome to the HTML <div> Element tutorial on codeswithpankaj.com. In this tutorial, we will explore what the <div> element is, its usage, and provide examples to help you understand how to use it effectively.

What is the <div> Element?

The <div> (short for division) element is a block-level container used to group other HTML elements together. It is often used to structure content on a web page and can contain other block-level and inline elements.

Usage of the <div> Element

Basic Example

A basic example of a <div> element grouping a heading and a paragraph:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Div Example - codeswithpankaj.com</title>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>This is a paragraph inside a div element.</p>
    </div>
</body>
</html>

Using <div> for Layout

You can use <div> elements to create a simple webpage layout with a header, main content area, and footer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Layout - codeswithpankaj.com</title>
</head>
<body>
    <div>
        <div>
            <h1>Header</h1>
        </div>
        <div>
            <p>Main content goes here.</p>
        </div>
        <div>
            <p>Footer</p>
        </div>
    </div>
</body>
</html>

Example with Attributes

Using id and class attributes with the <div> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div with Attributes - codeswithpankaj.com</title>
</head>
<body>
    <div id="uniqueDiv">
        <h2>Unique Div</h2>
        <p>This div has a unique ID.</p>
    </div>
    <div class="myClass">
        <h2>Class Div</h2>
        <p>This div has a class name.</p>
    </div>
</body>
</html>

Practical Examples

Example 1: Creating a Card Layout

Using <div> elements to create a card layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card Layout - codeswithpankaj.com</title>
</head>
<body>
    <div>
        <h2>Card Title</h2>
        <p>This is a card. It contains some content and a title.</p>
    </div>
</body>
</html>

Example 2: Responsive Grid Layout

Using <div> elements to create a responsive grid layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid Layout - codeswithpankaj.com</title>
</head>
<body>
    <div>
        <div>Column 1</div>
        <div>Column 2</div>
    </div>
</body>
</html>

Conclusion

The HTML <div> element is a versatile and powerful tool for creating and managing the structure and layout of your web pages. By using the <div> element, you can group related elements together and create well-structured web pages. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

PreviousHTML Block and Inline Elements

Last updated