Elementy blokowe i liniowe w HTML
W HTML elementy domyślnie zachowują się różnie podczas wyświetlania na stronie. Bez użycia CSS szczególnie ważne jest rozróżnienie na elementy blokowe i elementy liniowe.
Elementy blokowe
Element blokowy zwykle zaczyna się od nowego wiersza i zajmuje całą dostępną szerokość kontenera. Dlatego dwa takie elementy zapisane jeden po drugim zostaną wyświetlone w osobnych liniach.
Przykłady elementów blokowych:
- <p> — akapit,
- <div> — uniwersalny kontener blokowy,
- <h1>–<h6> — nagłówki,
- <section>, <article>, <header>, <footer>.
Przykład:
<p>Dobre strony</p>
<p>mojej strony</p>
Bez CSS tekst pojawi się w dwóch wierszach, ponieważ <p> jest elementem blokowym.
Elementy liniowe
Element liniowy nie rozpoczyna nowego wiersza. Zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość. Kilka elementów liniowych zapisanych obok siebie pojawi się w jednym wierszu, o ile jest wystarczająco dużo miejsca.
Przykłady elementów liniowych:
- <span> — uniwersalny element liniowy,
- <a> — odnośnik,
- <strong> — wyróżnienie semantyczne,
- <em> — zaakcentowanie tekstu,
- <img> — obraz osadzony w treści.
Przykład:
<span>Dobre strony </span><span>mojej strony</span>
Tekst zostanie zaprezentowany w jednym wierszu, ponieważ <span> jest elementem liniowym.
Znaczenie na egzaminie
Jeżeli pytanie zakłada brak reguł CSS, należy kierować się domyślnym zachowaniem znaczników HTML. Do prezentacji fragmentów tekstu w jednym wierszu poprawnym wyborem jest zwykle <span>, a nie <p>, <div> ani nagłówki <h1>–<h6>.