1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
33. 

HTML Div

Updated on 16/08/2024436 Views
Content

HTML div is a very useful tool for grouping different HTML elements together. This helps in maintaining the structure of the web page. The term "div" stands for "division" and is named so because it separates the content of a webpage into various parts or containers. These containers can then be styled, formatted, or modified with CSS (Cascading Style Sheets) or JavaScript. 

I use HTML div in almost all my projects. In this tutorial, let me show how you can too.

Use of DIV Tag in HTML

HTML div tag helps massively in HTML programming. It is a very widely used element in the modern day. Here in this section of the tutorial, let me discuss some of the advantages of HTML div with you.

Layout structure

<div> is mostly used for setting up a webpage's layout structure. We use <div> components for dividing your webpage into sections like header, navigation, content, sidebar, and footer. To add style and organization, surround each section in a <div>.

Let me share an example to explain better.

example to explain uses of HTML div(layout structure)

Code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title> HTML Div Structure Layout Usecase </title>

</head>

<body>

  <div id="header">

      <h2> Header Content here </h2>

    <!-- Header content -->

</div>

<div id="nav">

    <h2> Navbar Content here </h2>

    <!-- Navigation menu -->

</div>

<div id="content">

    <h2> Main Content here </h2>

    <!-- Main content -->

</div>

<div id="sidebar">

    <h2> Sidebar Content here </h2>

    <!-- Sidebar content -->

</div>

<div id="footer">

    <h2> Footer Content here </h2>

    <!-- Footer content -->

</div>

</body>

</html>

We can use the div id in HTML attribute to target specific div in CSS and JavaScript.

Grouping Different Elements Together and Styling

<div> elements are commonly used to group relevant information together. You can use a <div> to organize paragraphs, images, or form components.

example to explain uses of HTML div(Grouping and Styling)

Code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title> HTML Div Grouping and Styling Usecase </title>

</head>

<body>

  <div class="content-group">

    <p> This is just to demonstrate the usecase.</p>

    <img src="image.jpg" alt="Example Image">

    <form>

        <!-- Form elements -->

    </form>

</div>

</body>

</html>

You can use div class HTML to assign a class to a different div in HTML. This helps target the div in the class when calling them via CSS or JavaScript.

Responsive Design

Responsive web design relies heavily on <div> elements for adaptable layouts. Using <div> and CSS rules like display: flex or grid, you may develop responsive designs that adjust to different screen sizes.

Let me show with the help of an example.

Modal content and popups

Modal windows and popups are often created with <div> elements. The modal content is placed within a <div>, which is hidden by default but visible when activated. Let me show with the help of a div tag in HTML example.

Modal and Popups example in HTML div

Code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title> HTML Div Modal and POPUP Usecase </title>

</head>

<body>

<div id="modal" class="modal">

    <div class="modal-content">

        <span class="close">&times;</span>

        <h2> Example </h2>

        <p>Modal and popup content goes here.</p>

    </div>

</div>

</body>

</html>

HTML Div Alignment

There are many ways you might want to position a div container HTML. To alter the div layout HTML, we have a lot of alignment div HTML attributes that we can use to position an HTML div exactly the way we want to. Let us get into it in this section of the tutorial.

Horizontal Alignment

There are three types of alignment when it comes to positioning a div in HTML. Let us discuss them one by one.

  • Left alignment: When we create a div in HTML, the default positioning of the div is left. This means the HTML div is by default left-aligned.
  • Center alignment: If we want div align center HTML, we can use the centre-align class. We can also use CSS to make center div HTML.
  • Right alignment: When we want the HTML div to be on the right-hand side, we can use the right-align class to do so.

Let me explain with the help of a simple div code HTML.

Horizontal alignment HTML div

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Horizontal Div Alignment Example </title>

<style>

    .container {

        display: flex;

        justify-content: space-around;

        align-items: center;

        height: 100vh;

        background-color: lightgreen;

    }

    .box {

        width: 100px;

        height: 100px;

        background-color: #333;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 20px;

        font-weight: bold;

    }

</style>

</head>

<body>

    <h2> Horizontal Div Alignment Example </h2>

    <div class="container">

        <div class="box">Left Div</div>

        <div class="box center-align">Center Div</div>

        <div class="box right-align">Right Div</div>

    </div>

</body>

</html>

In the above example,

  • We have a container <div> with a container class that uses HTML div classes to align its child elements horizontally and vertically.
  • The container has three child <div> elements with the classes box, center-align, and right-align.
  • The box class gives all boxes a defined size, background color, text color, and centered content.
  • The center-align and right-align classes change the alignment of the boxes within the container to the center, and right, accordingly.

Vertical alignment

You can align a <div> to the top or bottom of its container with Flexbox or CSS Grid. Let me show you with the help of an example.

Vertical Div Alignment Example

Output for vertical Div Alignment Example

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vertical Div Alignment Example</title>

<style>

    body {

        margin: 0;

        padding: 0;

        height: 100vh;

        display: flex;

        justify-content: center;

        align-items: center;

        background-color: #f0f0f0;

    }

    .container {

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        height: 300px; /* Adjust height as needed */

        border: 2px solid #333;

        padding: 10px;

        background-color: lightgreen;

    }

    .box {

        width: 100px;

        height: 100px;

        background-color: #333;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 20px;

        font-weight: bold;

    }

    .top {

        align-self: flex-start;

    }

    .center {

        align-self: center;

    }

    .bottom {

        align-self: flex-end;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="box top"> Top Div </div>

        <div class="box center"> Center Div </div>

        <div class="box bottom"> Bottom Div </div>

    </div>

</body>

</html>

In the above example,

  • Using flexbox (display: flex), the <body> element centers its content horizontally and vertically.
  • The body contains a <div> with a container class that aligns its child items vertically using flexbox (display: flex) and flex-direction (flex-direction: column).
  • The box class styles all boxes with a defined size, background color, text color, and content centering.
  • The top, center, and bottom classes change the vertical alignment of the boxes within the container to the top, center, and bottom, respectively.

Difference between div and span in HTML

People tend to confuse between div and span in HTML. div span HTML difference lies more or less in their use cases. Let me discuss their differences to give you a better idea.

Point of difference

div

span

Behaviour of display

The <div> tag is a block-level element, starting on a new line and taking up the full width of its parent container. Block-level elements generate a "block" of content.

The <span>  tag is an inline-level element, meaning it does not start a new line and only takes up the necessary width. Inline-level elements are commonly used inside block-level elements to design or group certain sections of content.

Why are they used

The <div> tag is commonly used to create sections or divisions on a webpage. It is frequently used for layout, grouping groupings of items, and applying styles or scripts to several elements at once.

The <span> tag is commonly used to style or apply inline-level formatting to specific text or content within a block-level element. It is helpful for applying styles to specific words, phrases, or tiny sections of text.

Let me spare an example to explain better.

Difference between div and span in HTML example

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Div between Span Example</title>

<style>

    .container {

        border: 2px solid #333;

        padding: 10px;

        margin-bottom: 20px;

    }

    .box {

        width: 80px;

        height: 80px;

        background-color: lightgreen;

        border: 1px solid #333;

        margin: 5px;

    }

    .highlight {

        color: red;

        font-weight: bold;

    }

    

</style>

</head>

<body>

    <div class="container">

        <div class="box">Box A</div>

        <div class="box">Box B</div>

        <div class="box">Box C</div>

    </div>

    <div class="container">

        This is a <span class="highlight ">span</span> element inside a paragraph.

    </div>

</body>

</html>

In the above example,

  • <div> element: The first <div> with the class container has three <div> elements with the class box. Each <div> with the class box indicates a distinct block-level container or division. These <div> elements are block-level by default, which means they start on a new line and take up the full width of their parent container. The div border HTML has been set to 1.
  • <span> element: The second <div> with the class container contains a paragraph of text with a <span> element within it. The <span> element contains the class highlight, which colors the word "span" in the paragraph with red color and bold lettering. 

Summing Up

HTML div plays an important role in managing HTML elements. We have discussed several div examples HTML in this tutorial explaining the several use cases of HTML div in web development. Now you can apply the concept of HTML div in your future projects also.

To learn more advanced concepts of HTML and web development, I would recommend doing a certified course from a reputed platform. One such platform that I recommend is upGrad. Their courses are curated by some of the best professors in this field. The courses are also in collaboration with some of the best universities around the world.

Frequently Asked Questions

  1. What is an HTML <div> element?

The HTML <div> element is a block-level container that organizes and styles content. It has no intrinsic semantic value, however it is commonly used for layout and applying CSS styles.

  1. Why is div used in HTML?

HTML <div> element creates divisions or sections inside a web page. It is mostly used for layout, content structure, and CSS styling. This helps to organize text, improves readability, and allows for more flexible design possibilities.

  1. How do I create a <div> element in HTML?

The <div> tag is used in HTML to generate a <div> element. You can provide properties such as id or class for styling and JavaScript interaction.

  1. What is the purpose of using <div> elements?

Using <div> elements in HTML creates divisions or sections inside a webpage. They assist with layout structure, content organization, and CSS styling for design and presentation.

  1. How to display HTML in div?

To show HTML material in a <div>, you can utilize JavaScript's innerHTML property or simply insert HTML code within the <div> tags.

  1. What is HTML div ID?

HTML div IDs are unique identifiers assigned to <div> elements using the id attribute. You can target and style a specific <div> with CSS or change it with JavaScript.

  1. How to hide div in HTML?

To conceal an <div> in HTML, set its style attribute to display: none, or use JavaScript to adjust its style (.display) the display property to 'none'.

  1. Can I add a div in table HTML?

Yes, you can insert a <div> element inside a table cell (<td> or <th>) in HTML. You can use <div> components to structure and style content in a table cell.

Mukesh kumar

Mukesh kumar

Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...