Types of Elements in HTML

All the HTML elements fall into two categories:

  • Block Elements
  • Inline Elements

Block Elements

Block elements are kind of elements which creates a block.
Any block level elements start with the new line and any elements which is after the block level element start with the new line.
for example <p>, <h1>, <h2>, <h3> <h4>, <h5>, <h6>, <hr />, <br> etc are block elements.

Inline Elements

Inline elements are kind of elements which appears between the line.
So Inline elements do not have a new line before and after.
for example <b>, <i>, <u>, <sub>, <sup>, <big>, <small>, <ins>, etc are inline elements.

<div>

<div> is very important block element in HTML. It is one of the most used elements in HTML. Most of the times, <div> element is used to make group of other elements. It created a division in HTML.
The HTML page can be divided into 4 parts.

  • Header
  • Main Content
  • Sidebar
  • Footer

So each part is made by many elements grouped togather. So for grouping, <div> element is very very important.
Let us have a look at an example.

This content is inside paragraph tag which is inside red div.

This content is inside another paragraph which is inside red div.

This content is inside paragraph inside yellow div.

This content is inside another paragraph inside yellow div.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background:red">
            <p>
                This content is inside paragraph tag which is inside red div.
            </p>
            <p>
                This content is inside another paragraph which is inside red div. 
            </p>
        </div>
        <div style="background: yellow">
            <p>
                This content is inside paragraph inside yellow div.
            </p>
            <p>
                This content is inside another paragraph inside yellow div.
            </p>
        </div>      
    </body>
</html>
                        

span

When you need to provide some CSS inline, span element is the one you are looking for. span element is an inline element which is more used to stylize to the content which is between some other content.
span element does not provide any visual change unless you provide some CSS to it.
So span is inline element while div is block element.

This is the contnet where some inofrmation needs to be styled different than other information.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>
            This is the contnet <span style="color: red; background: yellow;">where some inofrmation needs to be styled different</span> than other information.
        </p>     
    </body>
</html>
                        

Conclusion

We have learned about the block elements and inline elements. We also learnt about the div and span elements. These elements are the most used in HTML.
In next section, we will learn about howt to add images in HTML.