What is the difference between block and inline elements in HTML?

Block-level elements always start on a new line and takes up the full width available (stretches out to the left and right as far as it can) of a web page, while inline elements do not start on a new line and only takes up as much width as necessary on a section of a web page.

block tages like <p></p> ... IF we write this tage (for examble) 2 timer and see the page ,we will find the 2 paragraphes under eath other

inline tages like <img > ... if we put 2 images , we will find the two behind each other

A block-level element occupies the entire space of its parent element (container), thereby creating a "block."

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.

Block Level Elements

So what is a block-level element? A block-level element is an HTML element that begins a new line on a web page and extends the full width of the available horizontal space of its parent element. It creates large blocks of content like paragraphs or page divisions. In fact, most HTML elements are block-level elements.

Block-level elements are used within the HTML document's body. They can contain inline elements, as well as other block-level elements.

Inline Elements

In contrast to a block-level element, an inline element:

• Can begin within a line
• Does not start a new line
• Its width only extends as far as it is defined by its tags. 

HTML is made up of various elements that act as the building blocks of web pages. Each of these elements falls into one of two categories - either a block-level elements or an inline elements.

A block-level element is an HTML element that begins a new line on a Web page and extends the full width of the available horizontal space of its parent element.

It creates large blocks of content like paragraphs or page divisions. In fact, most HTML elements are block-level elements.

Example <div><p>

An inline element can:

• Begin within a line
• Does not start a new line
• Its width only extends as far as it is defined by its tags.

Example: <span><strong>

Every HTML element has a default display value depending on what type of element it is.The default display value for most elements is block or inline.

A block-level element always starts on a new line and takes up the full width available .

The <div> element is a block-level element.

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><output><p><pre><section><table><tfoot>

<ul> <video>.

Inline Elements 

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element.

Inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code>

<dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q>

<samp> <script> <select> <small> <span> <strong> <sub> <sup>

<textarea> <time> <tt> <var>.