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 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.
<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 are normally does not displayed on a new line.
An inline element only takes up as much space it required.
<p> This is a <b> paragraph </b> </p>
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.
|Block Elements||Inline 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 is also used as a container for other HTML elements. When we use <div> element with CSS, we can style the blocks of content.
<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>
This is a white text with blue background
This is another white paragraph with blue background
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:
<p> Learn to code with <span style= "color:blue"> crus4 </span> </p>