W HTML5, elementy można klasyfikować na podstawie sposobu, w jaki są wyświetlane na stronie: jako elementy blokowe lub liniowe. Rozróżnienie to jest kluczowe dla zrozumienia, jak struktura strony wpływa na jej układ i prezentację treści.
Elementy blokowe
Elementy blokowe zajmują całą dostępną szerokość kontenera, w którym się znajdują, tworząc “blok” na stronie. Zawsze zaczynają się od nowej linii i mogą zawierać inne elementy blokowe oraz liniowe. Typowe przykłady elementów blokowych to:
<div>: Uniwersalny kontener na inne elementy.<p>: Reprezentuje akapit tekstu.<header>,<footer>,<section>: Elementy semantyczne służące do strukturyzowania treści.<ul>,<ol>: Listy nieuporządkowane i uporządkowane.<h1>–<h6>: Nagłówki różnych poziomów.
Przykład elementu blokowego:
<div>
<p>To jest akapit tekstu wewnątrz diva.</p>
</div>
Elementy liniowe
Elementy liniowe nie zaczynają się od nowej linii i zajmują tylko tyle miejsca, ile jest potrzebne do wyświetlenia ich treści. Są wyświetlane jeden za drugim, do momentu, gdy braknie miejsca w linii. Mogą zawierać inne elementy liniowe, ale nie mogą zawierać elementów blokowych. Typowe przykłady elementów liniowych to:
<span>: Uniwersalny kontener liniowy, używany do grupowania treści dla stylizacji.<a>: Definiuje hiperłącze.<strong>,<em>: Służą do wyróżniania tekstu, odpowiednio poprzez pogrubienie i kursywę.<img>: Reprezentuje obraz.<input>: Pole formularza.
Przykład elementu liniowego:
<p>To jest <span><strong>wyróżniony tekst</strong></span> w akapicie.</p>
Jak to wpływa na układ strony?
Rozumienie różnicy między elementami blokowymi i liniowymi jest kluczowe przy projektowaniu układu strony. Elementy blokowe są używane do głównej struktury i organizacji treści, podczas gdy elementy liniowe służą do formatowania mniejszych fragmentów treści wewnątrz tych bloków.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.