HTML "block" and "inline" are two most prevalent display values for HTML elements.
display:block - Initiates on a new line, with browsers automatically adding space (a margin) before and after the element.
display:inline - Does not begin on a new line, instead multiple elements are displayed side-by-side.
Block-level Elements
These elements inherently expand to occupy the entire available width, extending from the left to the right edges.
Two frequently utilized block elements are <p>, defining a paragraph, and <div>, defining a division or section within an HTML document.
The <p> element is classified as a block-level element.
The <div> element is also categorized as a block-level element.
<p>This is a paragraph</p>
<div>This is a section</div>
These are the block-level elements in HTML.
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
An inline element does not begin on a new line and it occupies only the width required by its content. So, inline elements are displayed side-by-side or inline depending on the available section width.
For example, <span> element is an inline element.
<p>This is an <span>inline</span> <span>element</span> example.</p>
These 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: An inline element cannot contain a block-level element.
The <div> Element
The <div> element is frequently employed as a container for various HTML elements.
Most HTML pages now a days consists of multiple <div> elements stacked together.
The <div> elements contain attributes like style, class, and id.
When combined with CSS, the <div> element can be utilized to style content blocks.
<div style="background-color:grey; padding: 5px 10px; border: 1px solid #ccc;">
<h2>Heading 1</h2>
<p>This is a description.</p>
</div>
<div style="background-color:black; color:#fff; padding: 5px 10px;">
<h2>Heading 2</h2>
<p>This is a description.</p>
</div>
The <span> Element
The <span> element serves as an inline container for marking up sections of text or documents.
While the <span> element does not require any specific attributes, style, class, and id are frequently used.
When employed alongside CSS, the <span> element can be utilized to style text sections.
<p>This is a paragraph with bold <span style="color:red;font-weight:bold;">red</span>
and <span style="color:blue;font-weight:bold;">blue</span> words.</p>
You will learn more about these in our HTML Web Page Development guide.
Please check below options for the links to our previous or next tutorial.