Elementy blokowe i liniowe w HTML
W HTML każdy element ma swój model wyświetlania (display mode) – domyślnie jest to block (blokowy) albo inline (liniowy). Zrozumienie różnicy między elementami blokowymi a liniowymi jest kluczowe przy tworzeniu układu strony.
Elementy blokowe
Elementy blokowe zajmują całą dostępną szerokość w swoim kontenerze (o ile nie zostanie to zmienione CSS-em) i zawsze zaczynają się od nowej linii. Ponieważ blok zajmuje całą szerokość, kolejny element blokowy pojawi się dopiero poniżej niego. Elementy blokowe mogą zawierać w sobie inne elementy (zarówno block, jak i inline).
Przykłady elementów blokowych:
<p>(paragraf)<h1> - <h6>(nagłówki)<ul>i<ol>(listy)<div>,<section>,<article>i większość semantycznych elementów strukturalnych
Elementy liniowe (inline)
Elementy liniowe zajmują tylko taką szerokość, jaką potrzebuje ich zawartość i nie wymuszają nowej linii. Układają się obok siebie w ramach bieżącego wiersza, dopóki nie zabraknie miejsca. Elementy inline nie powinny zawierać elementów blokowych w środku (specyfikacja HTML tego zabrania dla poprawnej struktury), natomiast mogą zawierać tekst i inne elementy inline.
Typowe elementy liniowe:
<span><a>(odnośnik)<strong>,<em>i inne znaczniki tekstowe<img>(obraz jest traktowany jak element liniowy)<input>,<label>(pola formularza)
Przykład ilustrujący różnicę
<!-- Elementy blokowe -->
<div>To jest blok DIV - pojawi się w osobnej linii i zajmie całą szerokość.</div>
<div>To jest drugi DIV - zostanie umieszczony poniżej poprzedniego.</div>
<!-- Elementy liniowe w tekście -->
<span style="background: #eef;">To jest span</span> w akapicie, a obok niego jest <span style="background: #eef;">drugi span</span>.
W powyższym przykładzie dwa elementy <div> wyświetlą się jeden pod drugim (każdy jako oddzielny blok). Natomiast elementy <span> zostały wstawione w zdaniu i pojawiają się obok siebie, nie przerywając ciągłości linii tekstu (tu dodatkowo z delikatnym kolorowym tłem, by było widać ich zakres).
<div> i <span> — podstawowe elementy kontenerowe
<div> jest elementem blokowym. Używamy go, gdy potrzebujemy podzielić stronę na sekcje lub grupy elementów w celach stylowania lub skryptowania, a nie mamy do dyspozycji bardziej semantycznego tagu (lub semantyka nie jest istotna w danym przypadku). Przykładowo, możemy otoczyć grupę obrazków w <div class="galeria">...</div>, aby potem łatwo ostylować całą galerię poprzez tę klasę. Sam <div> nie niesie żadnego znaczenia — to po prostu kontener.
<span> jest elementem liniowym. Służy do wydzielania fragmentów tekstu lub małych elementów wewnątrz innych, gdy chcemy zmienić ich styl lub wyróżnić je za pomocą JavaScript, a nie istnieje specjalny semantyczny element dla tego fragmentu. Na przykład, jeśli w akapicie chcemy jednemu słowu nadać inny kolor, możemy to słowo objąć <span style="color: red;">...</span>. Podobnie jak <div>, <span> sam w sobie nic nie znaczy dla treści — to po prostu kontener inline.
Podsumowanie
Elementy blokowe to klocki budujące strukturę w pionie (jeden pod drugim), a elementy liniowe to elementy wpinające się w linię tekstu lub innego otoczenia. W kolejnych lekcjach, gdy zaczniemy stosować CSS, zobaczymy też, jak można zmieniać zachowanie elementów (np. sprawić, by element blokowy zachowywał się jak inline i odwrotnie) za pomocą właściwości display.
