What is the Difference Between Block vs Inline Elements

What is the Difference Between Block vs Inline Elements

Understanding display values in HTML
Ferenc Almasi β€’ 2023 June 23 β€’ Read time 4 min read
Learn what is the difference between block and inline-level elements in HTML, and how they alter the display of elements.
  • twitter
  • facebook
HTML

This lesson is a preview from our interactive course

Every HTML element has a different display value, depending on the type of the element. When developing web pages, it's essential to understand the difference between these display values: block and inline.

Block and inline elements serve different purposes and have specific behaviors that can significantly impact the layout and structure of a page. In this lesson, we'll explore the differences between block and inline elements, how to use them effectively, and provide code examples to illustrate their use.


Block Elements

Block elements are HTML tags that, by default, create a new block-level box on the web page. Each block-level element appears on a new line, and its width automatically expands to fill the available space within its parent container. Some common block-level elements include:

Copied to clipboard! Playground
<h1>Heading</h1>
<p>Initial paragraph</p>
<div>
    <p>Paragraph inside a div.</p>
</div>
Block elements in HTML Execute code

In the above example, all elements are block-level elements. Execute the above code to verify their appearance. You'll notice that all of them appear on a new line.

Note that block-level elements can be nested inside each other.


Inline Elements

Inline elements, on the other hand, do not create new block-level boxes; instead, they flow alongside adjacent content within the same line. They only take up as much width as necessary to accommodate their content. Some common inline elements include:

Copied to clipboard! Playground
<p>
    <strong>Inline elements</strong> only take up as much width as necessary.<br />
    They also <em>don't break on new lines</em>. Instead, we need to use
    <span>br</span> tags. <a href="#top">Go back to top</a>
</p>
Inline elements in HTML Execute code

Unlike block-level elements, inline elements don't start on a new line, nor do they take up the full width of their container.

In the above example, we defined four different inline elements inside a paragraph. As you can see, span elements are displayed without any formatting, just like div elements.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTMLinfo Remove ads

Mixing Block and Inline Elements

It's common to use both block and inline elements together to create well-structured and visually appealing web pages. Block elements are often used for larger sections of content, such as paragraphs or headings, while inline elements are used within those blocks for more specific formatting or interactive elements. For example:

Copied to clipboard! Playground
<div>
    <h2>Learn more about frontend:</h2>
    <p>
       <a href="/categories/html">HTML</a><br />
       <a href="/categories/css">CSS</a><br />
       <a href="/categories/javascript">JavaScript</a>
    </p>
</div>
Combining block and inline elements Execute code

In this example, the entire content is wrapped within a div block, which serves as the container. Inside the div, we have a heading for the title, followed by a paragraph containing a list of links. Each line is wrapped in a hyperlink for pointing to a resource.

Make sure you don't use block-level elements inside inline elements.

block vs inline elements
The borders of block vs inline elements

Summary

In conclusion, block and inline elements are fundamental building blocks in HTML, each with its unique behavior and purpose. To summarize:

Understanding the distinction between block and inline elements is crucial for creating well-organized and visually appealing web pages. By using these elements effectively and combining them as needed, we can build websites that are both functional and aesthetically pleasing.

  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.