HTML Block Level and Inline Elements
Every HTML element has a default value that is displayed on browsers. The values for most elements are block or inline. Based on these values, all elements can be divided into two categories ─ (1) Block-level Elements and (2) Inline Elements.
Block-level Elements
A block-level element occupies the entire space of its parent element (container). It stretches out to the left and right of its parent element as far as it can.
A block-level element always starts on a new line. The element is block because browsers have a built-in style sheet, that is selector {display: block;}
.
A list of block-level elements
<div>
<h1>
–<h6>
<p>
<ol>
,<ul>
,<dl>
<form>
<pre>
<blockquote>
<address>
<hr>
An Example of Block-level Elements
<h1>This is an <h1> element</h1> <div>This is a <div> element</div> <p>This is a <p> element</p> <ul> <li>item 1</li> </ul> <pre> Nice to meet you, ... </pre> <blockquote>This is a <blockquote> element</blockquote>
The <div> Element
The <div>
element is a block-level element that is often used as a container for text or other HTML elements. Even this element can be used to create webpage layout and designed using CSS. The class
, id
, and style
attributes are common used in this element.
The example below contains a simple web page layout that is designed with CSS. You have to click the “Try this Code” button to see how it looks like.
<div>This example contains a lot of codes... Of course you have to click on the "Try this Code" button</div>
HTML Inline Elements
An inline element does not start on a new line and only takes as much width as necessary. All inline elements do not contain inline value, even some elements don’t have any built-in style sheet in browsers.
A list of Inline Elements
<span>
<a>
<img>
<b>
,<strong>
<em>
,<cite>
,<i>
<small>
<br>
<code>
<button>
<input>
,<label>
,<select>
,<textarea>
<abbr>
<mark>
<sub>
,<sup>
An Example of Inline Elements
<p>A text can be wrapped with <span> tag. A link is made by <a> tag. An alt text is required for an image. The <b> tag defines bold text and <strong> tag defines important! text but both are bold. The <em> and <i> tags both are italic but <em> tag emphasized a text/phrase. This is a simple <button>Button</button>. Use <mark> tag to highlight a text. The <input> tag is basically used in form. Use <code> tag to display a code on a web page.</p>
The <span> Element
The <span>
element is an inline element can be used as a container for one or more text. It has no required attributes but style
and class
are most common.
Sometimes you might need to make a different color or highlight any text inside the content, then you should use this <span>
tag including CSS like ─
<p>Using <span> tag, I used red color for <span style="color: red">this text</span>.</p>
Block-level vs. Inline Elements
- Block-level elements start on new lines, but inline elements can start anywhere in a line.
- Block-level elements can contain inline elements and other block-level elements.
- Block-level elements should not be used into inline elements.
- Block-level elements create “larger” structures than inline elements.