HTML Block Elements and Inline Elements

Depending on its type, each HTML element has a predefined default display value.

You can choose between two different values for the screen: block and inline.

Table of Contents:

Block-level Elements

Browsers will always insert extra space (a margin) before and after a block-level element because of how they treat new lines.

The width of a block-level element is always 100%. (stretches out to the left and right as far as it can).

The <p> and <div> tags are two examples of frequently used block elements.

If you want to create a paragraph in an HTML document, use the p> element.

To separate content in an HTML document, use the div> element.

Example

<!DOCTYPE html>
<html>
<body>
<p style=\”border: 1px solid black\”>Test p Block</p>
<div style=\”border: 1px solid black\”>Test div Block</div>
</body>
</html>

Output

$\"block$

As a block-level element, <p> is used to separate content within a block.
The <div> tag is used to create sections within a document.

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

To put it simply, an inline element does not begin on a new line.

If an inline element is included, it will only consume the minimum amount of width required.

Example

<!DOCTYPE html>
<html>
<body>
<p>This is an example of inline span <span style=\”border: 1px solid black\”>Test Spam</span> element inside a paragraph.</p>

</body>
</html>

Output

$\"span$

a <span> tag used within a paragraph.

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>

The <div> Tag

It\’s common practise to place content into the div> element and then utilise that to hold more HTML content.

There are no required properties for the <div> element, however style, class, and id are frequently used.

The <div> element can be used to create visually distinct sections of text when used with CSS:

Example

<!DOCTYPE html>
<html>
<body>
<div style=\”background-color:blue;color:white;padding:20px;\”>
<h2>Welcome </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

Output

$\"div$

<span> Tag

Marking up a segment of text or document with the span> element is done inline.

There isn\’t a set list of mandatory properties for the span> element, but style, class, and id are frequently used.

The CSS <span> element allows for selective formatting of text:

Example

<!DOCTYPE html>
<html>
<body>
<h1>The span element Example</h1>
<p>Hi this is <span style=\”color:red;font-weight:bold;\”>Span tag </span> example. I hope you <span style=\”color:darkolivegreen;font-weight:bold;\”>understand it.</span> </p>
</body>
</html>

Output

$\"The$

HTML Block Elements and Inline Elements

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)