Block & Inline Tags in HTML | Lesson 20 HTML Tutorial
Block or Inline Lesson

Block & Inline Tags in HTML | Lesson 20 HTML Tutorial

In this lesson you will know what is the different between the blocks tag and inline tags and how to use some of them.
The block tags is like div which takes the whole horizontal line, in the opposite side the inline elements like the image tag takes only the size it requires.

For Visual Explain! Watch this video:

Block & Inline Video

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.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element.

Fore Example:

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

In that code result will take the whole inline block.

Here is HTML Block Tags:

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

nline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

Example: This is an inline <span> element inside a paragraph.

 <span>Hello</span>
<span>World</span> 

Here is HTML Inline Tags:

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

Note:You could make any tag inline tag and make them block tag or take block tag and make inline once with CSS.


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

This Post Has 2 Comments

    1. Mofreh

      you are welcome any time

Leave a Reply