HTML Block Elements

These are elements that only takes 100% of the entire width. It always starts from a new line entirely.

Example

TRY IT OUT YOURSELF

BLOCK ELEMENTS

The list of block elements are as follows:

<h1-h6>
<p>
<div>
<ul>
<li>
<form>
<ol>
<address>
<article>
<fieldset>
<nav>
<main>
<dl>
<dt>
<pre>
<section>
<header>
<video>
<aside>
<canvas>
<figcaption>
<footer>
<hr />
<noscript>
<tfoot>
<blockquote>
<dd>
<figure>
<table>

Block To Inline Elements

You can convert block element to inline element by applying the style: display: inline.

Example

TRY IT OUT YOURSELF

Inline-Block

This style accepts width and height properties and do not start a new line. It is often used by design for creating layouts. display: inline-block.

Example

TRY IT OUT YOURSELF

HTML

BASIC

INTERMEDIATE

ADVANCE

HTML Block Elements

Example

BLOCK ELEMENTS

Block To Inline Elements

Example

Inline-Block

Example

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT