HTML elements behave in two main ways: block and inline.
Understanding this difference is very important because it controls how elements appear and how layouts are built.
Block elements always start on a new line and take the full width available.
Common block elements are div, p, h1 to h6, section, and article.
Inline elements do not start on a new line.
They stay in the same line and only take the space needed for their content.
Common inline elements are span, a, strong, and em.
Here, block elements are changed to inline so they appear in one line.
This technique is commonly used to create simple horizontal menus.
Notice that width and height do not work properly on inline elements.
This is why developers often use inline-block instead, which you will learn in the next lesson.
Practice task
Create:
- One div that behaves as block
- One span that behaves as inline
Then change the div to inline and see how its behavior changes.
Next lesson
In the next page, you will learn about display inline-block and why it is so useful in real layouts.