Div Tag in HTML

Div Tag in HTML

In HTML, ‘div’ is a tag that specifies division or section in HTML document. But before going in detail of it, let’s first understand about tags in HTML. The tag in HTML can be imagined as a keyword which basically defines how our browser(web-browser) will interpret, format and display the content. The tags act as a line of difference between our HTML content and non-HTML content, this helps the browser to distinguish both efficiently.

HTML tags can be classified into 3 main parts:

Opening tag,
Content and
Closing tag.

Eg:  <tag> content </tag>

Note: There are some tags in HTML which do not require the closing tag, i.e., they are referred to as unclosed tags.

Semantic Tags vs Non-semantic tags in HTML

A semantic tag in HTML is a tag whose name clearly describes its purpose and its content.

Eg: <h1> —> Used to show important text (generally the heading of the document)

<h6> —> Used to show less important text

<Nav> —> Used to show navigation information of webpage

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |




</nav>

Non-semantic tags in HTML

The non-semantic tags can be referred to as the tags in HTML which tells nothing about their content.

Eg: <div> –> creates a generic container that groups other elements.

<span> –> creates an inline text fragment.

<div> Tag in HTML

The div tag in HTML is a block level element which is used to create a generic container which is generally not visible and is used to group other elements.

When a div tag is declared, all the tags inside it are assigned as a whole separate block. This means if we declare a paragraph (<p> ‘ ‘ ‘ </p>) tag inside a div tag. The paragraph will have a whole block assigned to it.

Eg:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML div Tag</title>
  </head>




  <body>
    <div id="contentinfo">
      <p>Welcome to our website.</p>
      <p>Checkout our huge collection of technical content</p>
<p> Enjoy! your session</p>




    </div>
  </body>
</html>

Output:

Welcome to our website.
Checkout our huge collection of technical content
Enjoy! your session

Code 1: Example of div tag in HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HTML div Tag</title>
  </head>
  <style>
    .contentinfo {
      border: 6px outset maroon;
      background-color: rgb(142, 224, 252);
      text-align: center;
    }
    </style>
    </head>
  <body>
      <h3>This text is outside the div tag</h3>
    <div class="contentinfo">
      <p>Welcome to our website.</p>
      <p>Checkout our huge collection of technical content</p>
      <p>Enjoy! your session</p>
    </div>
  </body>
</html>

Output:

<div> vs <span> | Difference between div and span tags

<div>	<span>
It is a block level element	It is an inline element
It creates a generic container that groups other elements.	It creates an inline text fragment.
Whole block is assigned to each individual entity inside this tag.	Only required space is assigned.
It adds a line break after its closing tag.	It doesn’t add a line break after its closing tag.
Eg: <p>This is first paragraph</p> <p>This is second paragraph</p> <p>This is third paragraph</p>	Eg: <em> This is em tag </em> <em>em is used to </em> <em> emphasize text</em>
Output: This is first paragraph This is second paragraph This is third paragraph	Output: This is em tag em is used to emphasize text

Styling the content of <div>

The main reason to inherit the feature of div tag which allocates a separate block to each individual entity, is to enjoy the benefit of styling each entity on the webpage according to user choice/theme. This not only helps in scaling but also helps in designing beautiful web pages.

Code 2: Styling the content

Html file: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HTML div Tag</title>
  </head>
  <link rel=stylesheet href="style.css">
    </head>
  <body>
   
        <div class="div_styling">
    </div>
    <div class="text_styling">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
          ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
          ipsam eaque rem dicta, quos quas ipsum.
        </p>
  </div>
  </body>
</html>

CSS file: style.css

body {
  margin: 0 auto;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e2dcdc;
}




.div_styling {
  background-color: #3ee5eb;
  width: 185px;
  height: 185px;
  border-radius: 50%;
}




.text_styling {
  font-family: cursive, sans-serif;
  font-size: 1.2rem;
  font-weight: bolder;
  font-style: italic;
}

Output:

Code 3: Basic HTML web page layout using div tag

<!DOCTYPE html>
<html>
  <head>
    <title>Basic HTML Layout using Div</title>
  </head>
  <body
  style="background-color: blanchedalmond;">
    <div style="width: 100%">
      <div style="background-color: rgb(71, 207, 207); text-align: center">
        <h1>Example of page layout using div tag</h1>
      </div>
      <div
        style="
          background-color: rgb(230, 82, 82);
          height: 350px;
          width: 30%;
          float: left;
        "
      >
        <h2>Main Menu</h2><br />
        <p><a href="Link L1 ">sample link L1</href><br /> </p>
        <p><a href="Link L2 ">sample link L2</href><br /> </p>
        <p><a href="Link L3 ">sample link L3</href> <br /><hr><hr>
      </div>
      <br>
      <br>
      <div
        style="background-color: orange;
        color: black;
        height: 400px;
        width: 70%;
        float: left"
        >
       <h3> This is a sample content. </h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
          excepturi corporis accusamus quas consectetur ab modi voluptatibus
          quaerat reprehenderit, sint dignissimos quibusdam quae reiciendis
          temporibus.
        </p>
      </div>
  </body>
</html>

Output:

Code 4: Example of span tag in HTML

File 1: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example of span tag</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>
      We can use span tags to target text with CSS styling, like with
      <span id="blue-text">this blue text</span> and
      <span id="orange-text">this orange text</span>.
    </p>




    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur,
      necessitatibus.
      <span id="new-font"
        >Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </span>
      or <span id="new-font-size">font size</span>.
    </p>
  </body>
</html>

File 2: style.css

#blue-text {
  color: blue;
}
#orange-text {
  color: orange;
}




#new-font {
  font-family: Helvetica;
}




#new-font-size {
  font-size: 28px;
}

Output:

We can use span tags to target text with CSS styling, like with this blue text and this orange text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, necessitatibus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. or font size.

Conclusion:

The div tag in HTML is a block level element which is used to create a generic container which is generally not visible and is used to group other elements. Some key points of div tag are:

It is a block level element

Creates a generic container that groups other elements.

Whole block is assigned to each individual entity inside this tag.

It adds a line break after its closing tag.

HTMLs Tutorial

HTML5 Advance

Misc

HTMLs Tutorial

HTML5 Advance

Misc

Div Tag in HTML

Semantic Tags vs Non-semantic tags in HTML

Non-semantic tags in HTML

<div> Tag in HTML

<div> vs <span> | Difference between div and span tags

Styling the content of <div>

Conclusion: