Crus4

logo

Table of Contents

HTML Inline and Block Elements


Hi everybody, in this article we will about HTML Inline and Block Elements.

Every HTML element is displayed as block level or inline elements.


Block Level Elements

Block level elements always starts from a new line. In this case, the web browser automatically add some space before and after the element.

Some commonly used block elements are:

<p>, <table>, <form>, <div> etc.

Here you may have notice a strange element (<div> element). Actually the <div> element defines a division or a section in an HTML document.

Example

<div> text here </div> 

Note :- We will more about the uses of <div> element later in this chapter.


Other block level elements are:

<aside>, <canvas>, <address>, <footer>, <main>, <section>, <video>, <ul>, <ol>, <nav>, <tfoot> <nonscript>, <figcaption>, <figure>, <h1–h6>, <section>, <article>, <fieldset>, <header>, <pre>

Inline Elements

Inline elements are normally does not displayed on a new line.

An inline element only takes up as much space it required.

Example

<p> This is a <b> paragraph </b> </p> 

Output


This is a paragraph

As you can see here the <b> element does not start on a new line.

other Inline elements are:

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

Note:- An Inline element will never contain a block level element.

Difference between Block and Inline elements:

Block ElementsInline Elements
i) Block level elements always starts from a new line.  i) Inline elements normally doesn’t start from a new line.
ii) Block level elements occupy the full width no matter what their sufficiency is. ii) Inline elements occupy only the sufficient width that require.
iii) <p>, <form>, <table>, <div> are commonly used block level elements.iii) <a>, <b>, <i>, <span> are commonly used inline elements.

The <div> element

The <div> element is also used as a container for other HTML elements. When we use <div> element with CSS, we can style the blocks of content.

Example

  <div 
style="background-color:blue;color:white; padding:10px;">
    <p> This is a white text with blue background </p> 
    <p> This is another white paragraph with blue background </p> 
  </div>

Output

This is a white text with blue background

This is another white paragraph with blue background

The <span> Element

The <span> element is an inline element, which is used to markup a particular part of text. When we use <span> element with CSS, we can style any part of text:

Example

<p> Learn to code with <span style= "color:blue"> crus4 </span> 
</p> 

Output

Learn to code with crus4

Summary


Watch Video about HTML Inline and Block Elements

Related Posts

HTML Forms – crus4

HTML Lists and Tables

Images in HTML

HTML Inline and Block Elements – crus4