HTML Div Tag

Unlike other HTML tags, these 2 tag display nothing unless CSS Properties are applied. The <div> and <span> tag allow you to group together several elements to create sections or subsections of a page.

Example 1: Using Div tag divide the page into sections.

Example 2: Using Div tag divide the page into sections.

HTML Span Tag

The <span> tag can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together with some formatting style, then you can use the <span> element as follows:

Example 3: Span tag.

Difference between Div and Span Tag

The difference between div and span is that Div tag is a block tag and Span tag is an inline tag means Div tag break the line whereas span tag continue in a single line.

Example 4: Difference between Div and Span Tag.

 <html>
   <head>
     <style>
         div, span {
         color:red;
         background:yellow;
         font-style:italic;
       }
     </style>
  </head> 
  <body>
    <p>
      Text before the Div tag
      <div> I am a Div </div>
      Text after the Div tag.
    </p>
    <p>
      Text before the span tag
      <span> I am a span </span>
      Text after the span tag.
    </p>
  </body>
</html>

Exercise 1: Create the below layout using Div tag.