HTML block and inline elements are two types of element with respect to element display value.
Block and Inline elements
Now lets see block and inline elements below:
Block element: A block element always start on a new line and take full available width. The block level element can contain other block and inline elements within it. For example <div>,<footer>,<form>.
<div style="border: 1px solid black">Block level element</div>
Block level Elements in HTML
<div> <form> <header> <hr> <main> <section> <table> <ul> <ol>
<pre> <video> <nav> <footer> <address> <article> <h1>-<h6> <p>
Inline Element
An inline element does not start on a new line and take only necessary width. The inline elements can contain data and other inline elements within it. For example <span>,<b>,<var>.
<p>Example of <span style="border: 1px solid black">Inline </span>Element</p>
Inline Elements in HTML
<span> <abbr> <b> <i> <u> <em> <img> <br> <sub> <sup> <time> <big>
<small> <mark> <code> <label> <select> <a> <button> <input> <script> <output>
Inline Element within Block Element
Note: The inline elements cannot contain block elements within it but block level can contain inline elements within it.
<div style="border: 1px solid black">My Favorite <span style="border: 1px solid black">color</span> is blue</div>
Here in the above code style attribute is added so it can become more clear that how much width both elements are occupying.
You can visit html element to learn more types of html elements.