In HTML, elements are categorized into inline elements or block elements. Based on these classifications, the behavior of elements may vary.
Block elements
Some of the HTML elements like the headings and paragraph elements form a block structure in web pages. When these elements occur in the web page, they are rendered as separate blocks taking maximum available width. The content of these blocks starts at a new line and there is some line spacing between two block elements. Block elements can have other block elements nested inside them. Block elements can also have inline elements.
Inline elements
Inline elements do not break the flow of the web page. They are nested within block elements. They are a small part of a block and appear within the content. Elements like links and images are inline content. They occur within paragraphs and sections. Blocks elements cannot be nested inside inline elements. Only inline elements can be nested inside inline elements.
Ever since the HTML5 specifications came out, the terms block and inline elements have been replaced. There are new classifications like flow content elements and phrasing content elements. These terms are less ambiguous but are more difficult to understand. So the terms block and inline elements are still used even today.
Div element
The div element is a generic block element. We can use this element whenever there is no suitable element available. The div element has no additional meaning and works like any other block element.
<div> This is a div element. </div>
Span element
The span element is a generic inline element. Similar to the block element, we can use span elements when no other elements are suitable. It has no additional meaning and works like any other inline element.
<span>A span element does not force a new line.</span>