HTML Block and Inline Elements

Every HTML tag categorized into two types. They are block-level elements and inline elements. Both types have their default display values.


Block-level Elements

A block-level element always starts on a new line before and after the element.

In HTML, A block-level element always takes up the entire horizontal space (as much space as possible) of its parent element, and vertical space equal to the height of its contents.

block-level element has a top side margin and a bottom side margin.

For example, The div element is a block-level element.

<div>Welcome Home</div>

Output

Welcome Home

Here are the block-level elements in HTML:

addressarticleasideblockquote canvasdd div dl dt fieldset figcaption figure footer form h1h6 header hr li main nav noscript ol p pre section table tfoot ul video

It is also used for block element inside inline element, what are the block and inline elements, difference between block and inline elements


Inline Elements

An inline element does not start on a new line.

Inline elements will occupy only the space bounded by the tags and It will not force the content to flow to a new line.

An inline element does not have any margin.

For example, The span element is a inline element.

<span>Welcome Home</span>

Output

Welcome Home

An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

Here are the 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

Note: There can't be a block-level element inside an inline element!

It is also used for inline elements space, margin and height, align inline elements, inline elements are normally displayed, inline form elements and style elements

The <div> Element

The div element is often used as a container that encapsulates other HTML elements to group together.

The div element has no any special attributes, but you can use common HTML elements attributes (style, id, and class) to it.

The div tag can be used with CSS to format content blocks.

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

Output

Subtitle

This paragraph would be your content paragraph...

Here's another content article right here.

It is also used for div class, inline, border, height and width, center of screen, align center, div element events, div element attributes, div element spacing

The <span> Element

The span element is used as a container for a part of a text or sentence. It groups other inline elements together.

The span element has no any special attributes, but you can use common HTML elements attributes (style, id, and class) to it.

The span tag can be used with CSS to style part of text.

Example

<p>My favourite color is <span style="color:green;font-weight:bold">Green</span>
and my sister's favourite color is  <span style="color:Red;font-weight:bold">Red.</span></p>

Output

My favourite color is Green and my sister's favourite color is Red.

It is also used for span left and right align and align center, span font size, span attributes, span element value, span element width and height