HTML Blocks

HTML BLocks: Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

HTML Blocks

The HTML block elements can be categorized into two types. They are as follows:

1. Block-level elements
2. Inline elements

1. HTML Block-level elements

A block-level element always starts on a new line and takes up the full width available.The <div> element is a block-level element.

Block level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<d1>
<dt>
<fielset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

Example:

<div>Hello</div>
<div>World</div>

2. Inline elements in HTML

Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own.

Inline elements in HTML:

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag.

(i) <div> tag:

The <div> element is often used as a container for other HTML elements.The <div> element has no required attributes, but style, class and id are common.When used together with CSS, the <div> element can be used to style blocks of content.

Example:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
  
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>      
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Output:

The first group is a list of vegetables

  • Beetroot
  • Ginger
  • Potato
  • Radish

The second group is a list of fruits

  • Apple
  • Banana
  • Mango
  • Strawberry

(ii) <span> tag

The <span> element is often used as a container for some text. The <span> element has no required attributes, but style, class, and id are common. When used together with CSS, the <span> element can be used to style parts of the text.

Example:

<!DOCTYPE html>
<html>
  <head>
      <title>HTML span Tag</title>
   </head>	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
  
</html>

Output: This is red and this is green

Difference between <div> tag and <span> tag.

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements.