Summary
Highlights
The core distinction between divs and spans lies in their display type: spans are inline containers, and divs are block containers. This means that content within multiple spans will appear on the same line, while content within multiple divs will each start on a new line.
Using links as an example, the tutorial shows that they are inline elements. Multiple links placed consecutively will appear next to each other on the same line, demonstrating that they only take up the necessary space.
Paragraphs are used to illustrate block elements. Even if there's enough horizontal space, a new paragraph element will always start on a new line, pushing subsequent content below it, because block elements occupy the full width.
A container in HTML is a set of tags (like wrapper tags) that encloses other HTML elements. This practice is beneficial for managing and styling multiple elements, particularly when using CSS. The video introduces divs and spans as two common container types.
Before discussing divs and spans, it's crucial to understand how HTML elements are displayed. HTML elements primarily have two display types: block and inline. Block elements take up the entire width of the page, forcing subsequent elements to a new line, while inline elements only occupy the space they need, allowing other inline elements to sit beside them.
Both divs and spans are used to group text or other HTML elements. Divs are generally more common for overall page structuring due to their block-level nature, making them suitable for wrapping larger sections. Spans are better suited for styling smaller, inline portions of text within a larger block.