HTML Block & Inline
In this tutorial, we will learn about Block and Inline elements in HTML with the help of examples.
Block & Inline Elements
Every HTML element can be categorized into two categories :
- Block-level Element
- Inline Element
All the HTML element has a default display value, depending on what type of element it is.
Block-level Elements
A block-level element always starts a new line. Block-level elements take up a line break before and after them.
They take up the full width available.
The List of all Block-level Elements
| <address> | <article> | <aside> | <blockquote> |
| <canvas> | <dd> | <dl> | <dt> |
| <div> | <fieldset> | <figure> | <figcaption> |
| <footer> | <form> | <h1-h6> | <header> |
| <hr> | <li> | <main> | <nav> |
| <noscript> | <ol> | <p> | <pre> |
| <section> | <table> | <tfoot> | <ul> |
| <video> |
Inline Element
The inline elements always appear within the sentences. Inline elements do not start on a new line.
They only take up as much width as necessary.
The List of all Inline Elements
| <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> |
HTML Elements Grouping
There are two important tags which are used to group various other HTML tags:
- <div> Element
- <span> Element
<div> Element
The <div> element is block-level element which plays a significant role in grouping various other HTML elements. It is used as a container for other HTML elements.
The <div> element doesn’t add or change the content in the HTML document. The <div> element doesn’t have any required attributes, but style , class , and id are common.
Note : When CSS is used with HTML, the <div> element can be used to style block of the content.
Example :
<!DOCTYPE html>
<html>
<head>
<title>div Element</title>
</head>
<body>
<div style = "background-color : yellow;">
<h2>Washington D.C.</h2>
<p>Washington D.C. is the capital city of USA.</p>
</div>
</body>
</html>Output
Washington D.C.
Washington D.C. is the capital city of USA.
<span> Element
The <span> element is an inline element. It is used to grouping inline elements in an HTML document. The <span> element is an inline container and used to mark up a part of a document.
The <span> element doesn’t add or change the content in the HTML document. The <span> element doesn’t have any required attributes, but style, class, and id are common.
Note : When CSS is used with HTML, the <span> element can be used to style block of the content.
Example :
<!DOCTYPE html>
<html>
<head>
<title>span Element</title>
</head>
<body>
<h2>New York</h2>
<p>Paris is the <span style = "color : blue;">capital city of France.</span></p>
</body>
</html>Output
New York
Paris is the capital city of France.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of block-inline in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML classes Tag.