Inline vs Block Elements in HTML5

HTML has 2 types of elements: Inline and Block. A Web page is made by the combination of Inline and Block elements. But What is the difference between block elements and inline elements?

In this article, we are going to learn What are Inline and Block elements, how many of them are there, and the most commonly used Inline and Block elements.

Inline elements

Inline elements are those elements that do not begin on a new line when you insert the element in the code. They are considered as a part of the main text and not as a separate section. You can add space to the left or right of an inline element but you can't add space on the top and bottom of the element.

Some common Inline elements are <span>, <a>, <code>, <strong>, <img>, <cite>, <button>, <input>, <textarea>, <select>, <small>.

Example of an Inline element

<div>
    The span tag is an 
    <span style="background-color:yellow;">
        inline element
    </span>;
    its background has been colored to display both the beginning and end of
    the inline element's influence.
</div>

Try the Code yourself

Output:

The span tag is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.

In the above example, we have added a <div> tag which is a block element and a <span> tag within it. You can see in the output that the highlighted text that is contained by a span tag doesn't start on a new line. The whole text renders as a single sentence.

Block Elements

Block elements work exactly opposite to the inline elements. They start on a new line and they take the full width of the webpage for the content. You can add top and bottom margins to these elements and they also create a larger structure than inline elements.

Some common Block elements are <div>, <p>, <li>, <main>, <nav>, <ul>, <form>, <video>, <table>, <aside>, <article>.

Example of a Block element

<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>

Try the Code yourself

Output:

Hello World

In the above example, we have added a <p> tag and a <div> tag. Both elements are Block elements, that's why both started on a new line as you can see in the output.

Difference Between Inline elements and Block elements

Block Elements	Inline Elements
Block elements always start on a new line	Inline elements don't start on a new line.
You can add top and bottom margins to the Block Elements.	Inline Elements don't have Top and Bottom margins.
Block elements cannot break among the lines	Inline elements can break among the lines.
Inline Elements cannot contain Block Elements.	Block Elements can contain Inline Elements.
Border and padding of any type are accepted in inline elements that can make any changes to the files.	Block elements accept only width, margins, border, height, and padding.
Width and height are considered in Block Elements.	Width and heights are not considered in inline elements.
Examples of Block Elements are : <div>, <p>, <li>, <main>, <nav>, <ul>, <form>, <video>, <table>, <aside>, <article>.	Examples of Inline Elements : <span>, <a>, <code>, <strong>, <img>, <cite>, <button>, <input>, <textarea>, <select>, <small>..

Conclusion

In summary, we've discussed Inline and Block Elements in HTML5, which are essential components in defining the layout and structure of a webpage. We have learned about the differences between Inline and Block Elements, including their default display behaviour and how they affect the page layout.

We also examined some examples of Inline and Block Elements, such as <p> and <span> for the former and <div> and <h1> for the latter. By understanding the differences between these two types of elements, developers can make informed decisions when designing web pages.

In conclusion, I hope this article has been helpful in your understanding of Inline and Block Elements in HTML5. With this knowledge, you will be better equipped to create visually appealing and functional web pages. Thank you for reading!

Frequently Asked Questions

1. What are inline and block elements in HTML5?

Inline elements in HTML5 are elements that are displayed inline with the text and do not start on a new line, while block elements are elements that start on a new line and take up the full width available.

2. Can I change the display of an inline element to a block element or vice versa?

Yes, you can change the display of an element using CSS. For example, you can use the display property to change an inline element to a block element or vice versa.

3. Which elements are typically block elements in HTML5?

Some common block elements in HTML5 include headings (h1-h6), paragraphs (p), lists (ul, ol), and divs.

4. Which elements are typically inline elements in HTML5?

Some common inline elements in HTML5 include links (a), spans, images (img), and buttons (input type="button").