Home Become a sponsor Become a Contributor Old Website

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:

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:

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

HTML