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:
This is a Dog
This is a Cat
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:
Take Note:
An inline element cannot contain a block-level element