Block elements, inline elements, div and span in HTML

HTML elements

The HTML elements are divided into different blocks of elements. Every element has its own display depending on what type of element is this. There are two types of display elements.

  1. Block elements
  2. Inline elements

Block elements in HTML

Block elements always start with a new line and have a line break. Block elements appear on the screen as if they have a line break before and after them. HTML blocks divide document into sections. The following are some tags which works as block element.

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

They all start on their own new line, and anything that follows them appears on its own new line.

Inline Elements in HTML

On the other hand, Inline elements can appear within sentences and do not have to appear on a new line of their own when cursor moves to new line. The following are the examples of inline elements.

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

Grouping elements in HTML

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

The <div> tag in HTML

This is  an important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. The <div> tag works like a small set of code. More than one <div> tags can be used in an HTML code. The properties can be modified by targeting <div> tag using CSS (Cascading Style Sheet). This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Let us take an example code to better understand <div> tag. For that, we are using inline CSS (Cascading Style Sheet).

<!DOCTYPE html>
<html>
<head>
<title>HTML div tag explanation code</title>
</head>
<body>
         <! -- First div-->
         <div style = "color:blue">
         <h3>This is first group</h3>
         <p>Following is a list of fruits</p>
         <ul>
            <li>Apple</li>
            <li>Mango</li>
            <li>Grapes</li>
            <li>Banana</li>
         </ul>
      </div>
      <! -- Second div-->
      <div style = "color:red ">
         <h3>This is second group</h3>
         <p>Following is a list of Cars</p>
         <ul>
            <li>Swift</li>
            <li>I 10</li>
            <li>Amaze</li>
            <li>Verna</li>
         </ul>
      </div>
   </body>   
</html>

The result of above code is is shown below. Just copy this code and paste in notepad and run with browser. We have used two <div> groups in above code, the colour of first <div> is set as blue and the colour of second <div> is set to red colour.

The <div> tag in HTML, www.programmingtutorial.in

The <span> tag in HTML

The <span> tag is used when you want to modify the properties of a small portion of inline text. This tag does not change the visual and works well with the help of CSS. 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. Following is an example of <span> tag which will make you better understand the concept of <span>.

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This tag is used to change attributes of <span style = "color:green">small portion </span> 
<span style = "font-style:bold">of text.</span></p>
</body>
</html>

The result of above code is shown below:

The <span> tag in HTML, www.programmingtutorial.in

In above code, a small part of paragraph has changed its colour as green and another small bit of paragraph has changed its colour as red. This is because of the use of <span> with CSS. The <span> tag has altered bit wise portion of paragraph.