HTML is made up of various elements that act as the building blocks of web pages. For the purpose of styling, elements are divided into two categories: block-level elements and inline elements.
In summary, a
<span> element is used as an inline element and a
<div>element as a block level element.
The difference between the two elements is a commonly misunderstood concept of web design but it does not have to be!
Basically, an inline element does not cause a line break (start on a new line) and does not take up the full width of a page, only the space bounded by its opening and closing tag. It is usually used within other HTML elements.
Other examples of inline elements are:
A block-level element always starts on a new line and takes up the full width of a page, from left to right. A block-level element can take up one line or multiple lines and has a line break before and after the element.
Other examples of the block-level tag are:
- Heading tags
- List (Ordered, Unordered, Description and List Item) tags
- Pre-formatted text tag
- Blockquote tag
<div>element is usually used as a container for other HTML elements and to separate them for the rest. The
<div>element is an unstyled tag, in other words, using it does not change the look of an HTML element. Also, it has no required attribute.
<span>element can be used as a container for HTML text. But essentially, it is used to style a certain text within a larger text element. The
<span>element does not automatically style an HTML element. The
<span>does notrequire an attribute too!
Understanding the difference between these two elements allows you to better understand the structure of a web page and how it is displayed.
Congratulations on moving one step closer to becoming a web design expert!