• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/11/2022

Understand block-level and inline elements

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">
A screenshot of the result from the code above, which shows 3 paragraphs (each on its own line) and 3 images (all next to one another)
Result

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!

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite