Hello everyone! Welcome back to the learning journey again! We’ve covered almost all of the major aspects of HTML already and soon we going to start learning CSS. But before we begin learning CSS, I want to discuss a little bit about HTML Block and Inline Elements. I think it’ll help us a lot for a better understanding of CSS. So let’s begin!
N.B. This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
Block and Inline Elements
We know what an HTML element is, right? We’ve learned it in Basic to code in HTML post. Go ahead and read that first if you need a refresher.
So, HTML element can generally be of two types. They are Inline elements and Block elements. This two type of element is a bit different from each other for their specific kind of behavior.
Block Level Element
Elements that takes up the entire space of its parent element (container) is a Block level element. That’s the one sentence definition of Block level elements. Let’s break it down!
Most of the HTML element on a web page are formed as a rectangle. They sit one after another vertically and creates the structure of the web page. These rectangles take the entire space of the screen from left to right.
Now, the data or text we pass into these elements doesn’t always fill up all the space of its rectangle. The behavior of Block level element is that it takes up all the space of its rectangle anyway. Which means, it doesn’t let other elements use the empty space of its own rectangle. In other words, It blocks all the space it gets in its line.
Let me show you an example which will make it clear.
So, I’ve created an h1 heading and a simple paragraph. I’ve added background color to them to help you see how much space they are occupying. And as you can see, even though the content of the heading and paragraph isn’t taking much space, the elements still taking up or, blocking all the space from left to right.
And also for the same reason, the paragraph has created on a new line. If the heading element only took the space it needed to show it’s content, then the paragraph could be accommodated on that same line.
Characteristics of Block Level Elements:
- Block level elements always starts on a new line
- Block level element can have customized margin and padding
- Block level element can contain other block level element or Inline-level element
- If the width is not manually set, A block level element always takes up full width of its container
- If the height isn’t manually set, Block level element’s height is adjusted automatically to fit all the content and other elements within itself.
Most of the element of HTML is Block level element. Including: <h1> through <h6>, <p>, <div>, <form>, <header>, <footer>, <ul>, <ol>, <li> and so on. A full list of block-level element can be found here.
If you’ve understood the concept of Block level element, then understanding inline elements is easy. Unlike block level elements, Inline elements don’t take up all the space of its container. It usually sits within other elements and only takes as much space as it’s content needs. And thus, you can have multiple Inline elements in the same line.
Let’s get straight to example:
So now, I have added some inline elements within that same HTML file. In the heading, I’ve added <em> tag for the word lonely and in the paragraph, I’ve added two <strong> element for the words still and anyone.
Notice how they are sitting within those block level elements and still not breaking anything. From their background color, you can also see that they are taking space only as much as their content needs. In the paragraph, There are two inline elements on the same line.
Characteristics of Inline Level Elements:
- An inline element doesn’t require a new line to start. It can work within an existing line of content.
- Top & bottom margin can not be applied to inline elements (Unless they are converted to block level element via CSS)
- Inline-level elements can only contain data or other inline level elements.
Some of the inline element is: <a>, <em>, <strong>, <span>, <img>, <input>, <button>, <code> etc. A full list can be found here.
In the beginning of this article, I’ve said HTML element can generally be of two types. But there are a few elements that neither falls completely under the characteristics of block level elements nor under inline level elements. These elements are called Replaced element. They are rarely mentioned and you might not need to know much about them. But I think it’s still worth knowing.
Simply put, Replaced elements are elements whose content is replaced by some kind of external resources. And as the content comes from outside, the height and width of the element are also determined by that external resource.
Replaced elements generally show most of the characteristics of inline elements and hence they are often considered as inline elements. You might not ever encounter anything regarding replaced element unless you’re trying some super advanced stuff.
The example of replaced elements is: <img>, <video>, <input>, <br>, <hr>, <textarea> etc.
I think this is going to be the last post for basic HTML. We’re going to start learning basic CSS from next post. Things are about to get more exciting!
So, feel free to ask me anything about HTML. If there’s anything I didn’t write about and you feel like you need a detailed explanation, let me know. I might write a post on that. Leave your comment below.
Be sure to share this post on your social networks.
Practice everything we learned about HTML and keep mistaking until I come back with basic CSS lessons. 🙂
More from HTML
Hi! Welcome back to the journey once again! We’ve learned about HTML Lists in the last post. Another very important …
Hello, folks! How’s your hacking going? Last time we learned about HTML and HTML tags. We also wrote a little …