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>-<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:

That's all for this lesson, see you next one.