HTML Blocks

All the HTML elements can be categorized into two categories:

1. Block Level Elements

2. Inline Elements

Block Elements

Block elements appear on the screen as if they have a line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags

1. <div> tag

2. <span> tag

HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph, <h1> to <h6> tag are used to specify headings but the <div> tag is just like a container unit which is used to encapsulate other page elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once. For example: If you wrap a set of paragraph elements into a div element so you can take the advantage of CSS styles and apply font style to all paragraphs at once instead of coding the same style for each paragraph element.

To see how the <div> elements work, let's use three of these and let's set them width, height, and background.

Under the assumptions given above, the HTML will look like this:

<div class="container"><div>
<div class="container"><div>
<div class="container"><div>

In CSS, we write the class ".container" when referring to the <div> tag.


.container {
  width: 200px;
  height: 200px;
  background-color: blue;
}

Looks like a one big rectangle. What about separating <div> tags 10 pixels from the bottom?


.container {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin-bottom: 10px;
}

HTML Span Tag

The HTML <span> tag is used for grouping and applying styles to inline elements.

There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.

Example:

<!DOCTYPE html>
<html>
<head>
<title> HTML span Tag</title>
</head>
<body>
<p>This is a paragraph <span style="color:#FF0000;">
This is a paragraph</span>
This is a paragraph</p>
<p><span style="color:#8866ff;">
This is another paragraph</span></p>
</body>
</html>
Try it with the Editor