Block & Inline Elements in HTML:

HTML Block Element:

Block level elements are nothing but they are container for similar data. All block level elements have a starting tag and ending tag. They occupy 100% width of page and also they can occupy margin form top and bottom.

You have already learned some of block elements for example <h1>, <p>, <table>, <ul> etc.

Now in this topic we will learn about the <div> tag.

HTML <div> Element:

The <div> tag is a block level element. This tag has opening <div> and closing </div> both tags. If you forgot to write closing tag it will automatically inherit all the property from parent tag. So always close the tag. It is nothing but a container to group HTML elements together means wrapping up data in a section. You can also set styles to it by CSS.

Example:

In following example we take to div tag with different styles:

 

HTML Inline Element:

Inline elements are also container. But the difference is that they do not occupy 100% width and ignores top and bottom margin setting means you can not apply css for that but they support left and right margin settings.

You already know some of inline element for example <b>, <i>, <mark>, <a> etc.

Now we are going to learn about <span> tag which is also a Inline Element.

HTML <span> Element:

The <span> element is an inline element which you already know. The span tag takes the width of text not 100% width of page. This element also has opening <span> and closing </span> tag. You can also apply CSS to span tag.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *