Elementy liniowe i blokowe

Elementy liniowe (inline)

Elementy liniowe zajmują tylko tyle przestrzeni, ile potrzebują, i nie wymuszają nowej linii. Sąsiadują z innymi elementami w tej samej linii.

• <a> – link
• <em> – emfaza (pochylenie)
• <strong> – pogrubienie ważnego tekstu
• <span> – fragment tekstu bez semantyki
• <img> – obrazek

Elementy blokowe (block)

Elementy blokowe zawsze zaczynają się od nowej linii i zajmują całą dostępną szerokość kontenera.

• <div> – ogólny kontener bez semantyki
• <p> – paragraf
• <h1> ... <h6> – nagłówki
• <section> – logiczna sekcja
• <article> – samodzielna jednostka treści
• <nav>, <header>, <footer> – elementy struktury strony

Zachowanie hierarchii bloków

Elementy blokowe tworzą strukturę strony i układają się pionowo, w kolejnych "blokach". Elementy liniowe występują w obrębie bloków, formatując fragmenty tekstu lub dodając multimedia.

<section>
  <h2>Tytuł sekcji</h2>
  <p>Paragraf z <strong>pogrubionym</strong> tekstem i linkiem <a href="#">odsyłającym</a>.</p>
</section>

Ćwiczenia praktyczne

<div>
  <h1>Nagłówek</h1>
  <p>Tekst z <em>pochyleniem</em> i <strong>pogrubieniem</strong> oraz obrazkiem <img src="zdjecie.jpg" alt="zdjęcie">.</p>
</div>

Elementy blokowe: div, h1, p
Elementy liniowe: em, strong, img

Quiz

Podsumowanie

Zrozumienie różnic i zastosowań elementów liniowych i blokowych jest kluczem do poprawnego projektowania struktury strony internetowej oraz do jej semantycznego uporządkowania.

Pamiętaj, że elementy liniowe umieszcza się w elementach blokowych, aby tworzyć hierarchię i czytelny układ strony.

Checklista