HTML BLOCK AND INLINE ELEMENTS

In HTML, there are two basic categories of HTML elements namely:

• BLOCK LEVEL ELEMENTS
• INLINE ELEMENTS

BLOCK LEVEL ELEMENTS

Block-level elements are elements in HTML (Hypertext Markup Language) that are used to structure the content of a web page into blocks or sections. These elements create a "block" that typically starts on a new line and extends to the full width of their containing element, which is usually the parent element.

Here are some common block-level elements in HTML:

<div>   <p>   <form>  <li>  <ul>   <main>  <section> 
<nav>  <hr>  <article>  <header>  <footer>  <br>  <figure>
<ol>  <figcation>  <pre>  <aside>  <dl>  <dd>  <figcaption>
<h1> <h2> <h3> <h4> <h5> <h6>

Example

Let's take the <div> and <p> elements:

<div>This is a Dog</div>
<p>This is a Cat</p>

Results

The <div> and <p> elements are block-level elements, and they consistently begin on a new line while occupying the entire available width, extending to both the left and right edges.

INLINE ELEMENTS

Inline elements in HTML are elements that do not create a new block-level box within the document's flow but instead flow within the content of a block-level element or other inline-level elements. They typically only take up as much width as necessary to contain their content and do not force a new line to start after them. Inline elements are used for formatting and styling parts of text or other inline-level elements within a block-level context.

Here are the inline elements in HTML:

<a>  <b>  <strong>  <i>  <span>  <em>
<small>  <code>  <abbr>  <button>  <img>
<input>  <output>  <sub>  <sup>  <textarea>
<map>  <time>  <script>  <select>   <label>  <big>

Example

Let's take the <i> and <strong> elements:

Hello my name is<i>Johnn Doe</i>and i am <strong>38 years old</strong> 

Results