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 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
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
- Every HTML Element can be displayed either block level or inline elements.
- Block level elements always starts from a new line.
- <p>, <form> <table> <div> are commonly used block level elements.
- Inline elements are normally does not displayed on a new line. It takes up only as much space it required,
- <b>, <i>, <span>, are commonly used inline elements.
- The <div> is a block level element, which when we use with CSS can helps us to style the blocks of content.
- The <span> element is an inline element, which is used to highlight a part of a text.
Watch Video about HTML Inline and Block Elements
Related Posts
