The elements in HTML are categorized into two categories : block-level elements and inline elements.
Block-level Elements:
A block-level element always starts on a new line and takes the full width of a page, from left to right.
A block-level element can take one line or multiple lines and has a line break before and after the element.
The block level elements can contain block-level as well as inline elements.
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:
As the name says inline elements begin within a line, it does not start a new line.
Inline elements take only the necessary width.
By default inline elements start on the same line do not begin on the new line.
Inline elements in HTML:
<b>
<i>
<u>
<em>
<strong>
<sup>
<sub>
<big>
<small>
<li>
<ins>
<del>
<code>
<cite>
<dfn>
<kbd>
<var>
<tt>
<time>
<textarea>
<a>
<button>
<span>
<input>
HTML Grouping Elements:
There are two important tags which we use to group various HTML tags: the <div> tag and <span> tag.
The <div> Element:
In HTML the <div> tag is a division tag that is used to make divisions of content on the web page.
The <div> is a block-level element, so a line break is placed before and after it.
The <div> element is used to group HTML elements and to apply CSS styles to multiple elements at once.
You can place any HTML element inside <div> tag, including another <div>.
The <span> Element:
In HTML <span> tag is used for grouping inline elements and applying styles to those inline elements.
The main difference between <span> tag and <div> tag is that the <span> tag is used with inline elements while the <div> tag is used with block level content.