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.

         div, span {
      Text before the Div tag
      <div> I am a Div </div>
      Text after the Div tag.
      Text before the span tag
      <span> I am a span </span>
      Text after the span tag.

Exercise 1: Create the below layout using Div tag.

html div layout