HTML elements have default behavior, via CSS behind the scenes, that controls their positioning.
Look at the behavior of the paragraph elements versus the image elements in this example:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<img src="images/kitten1.jpg" alt="Cute Lynx kitten" title="Lynx kitten">
<img src="images/kitten2.jpg" alt="Cute spotted kitten" title="Spotted kitten">
<img src="images/kitten3.jpg" alt="Cute Siamese kitten" title="Siamese kitten">
Study the code and its result above. Can you identify which elements start on new lines by default (and which do not)?
Each paragraph expands to take up the full width of the page on its own line (greedy paragraphs)! However, the images all appear in the same line. That also explains why, earlier in this course, the two images of Millie Hughes-Fulford stacked right next to each other.
Every HTML element has a default block-level or inline behavior. Paragraphs are block-level elements, which means that they block off a whole line for themselves, and images are inline elements, which means they will automatically be placed next to one another on the same line.
Block-level elements that you've seen so far include:
Headings
Paragraphs (p)
Lists and list items (ul, ol, li)
Structuring elements (header, nav, section, article, aside, figure, footer)
Inline elements that you've seen so far include:
Images (img)
Emphasized text (em)
Strong text (strong)
Links (a)
As you code more and more, you'll memorize which HTML elements are block-level or inline. You'll also easily see their behavior every time you create them.
This concept is important in the next chapter on divs and spans, the ultimate generalist HTML elements (one of which is block-level and the other inline)! See you there!
