HTML Bekezdések és Sortörések

Miután a címsorokkal (H1-H6) megadtuk az oldalunk vázlatát, ideje megtölteni azt tartalommal. A weboldalakon olvasható normál szövegek túlnyomó többsége bekezdésekben helyezkedik el.

A Bekezdés tag: <p>

A HTML-ben a bekezdéseket a <p> (az angol paragraph szóból) tag segítségével hozzuk létre. Ahogy a legtöbb tagnél, itt is szükség van egy nyitó és egy záró elemre.

<p>Ez itt egy bekezdés. A böngésző automatikusan tesz egy kis üres helyet (margót) a bekezdés elé és után, hogy a szöveg könnyen olvasható legyen.</p>

<p>Ez pedig már egy teljesen új bekezdés, ami az előző alatt fog megjelenni.</p>

A furcsa HTML szabály: A szóközök és enterek eltűnése

Amikor elkezdesz HTML-ben kódolni, hamar találkozni fogsz egy nagyon furcsa jelenséggel. A böngészők figyelmen kívül hagyják a felesleges szóközöket és az entereket (sortöréseket) a kódban.

Nézd meg ezt a példát. Hiába nyomsz a kódszerkesztőben sok entert és szóközt:

<p>
    Ez a szöveg
    több sorba van írva a kódban,
    és itt van      nagyon sok      szóköz is.
</p>

A böngésző ezt a képernyőn egyetlen, folyamatos sorként fogja megjeleníteni, és a sok szóközt összevonja egyetlen darab szóközzé. Ezt a jelenséget a webfejlesztésben "Whitespace collapse"-nek hívják. A böngésző csak akkor kezd új sort, ha a szöveg eléri a képernyő szélét.

Hogyan csináljunk mégis sortörést? A <br> tag

Ha azt szeretnéd, hogy a szöveg egy új sorban folytatódjon anélkül, hogy egy teljesen új bekezdést (és azzal járó üres sorközt) kezdenél, a <br> (break) taget kell használnod.

<p>Ez a mondat az első sorban van.<br>Ez a mondat pedig már a második sorban kezdődik.</p>

Fontos megfigyelés: Észrevetted, hogy a <br> tagnek nincs záró párja (nincs </br>)? Ezt úgy hívják, hogy üres elem (empty element). Mivel a sortörésnek nincs "belseje" vagy tartalma, elég csak magát a taget beírni oda, ahol a törést szeretnéd.

A tematikus elválasztó: <hr>

Van még egy hasznos üres elem, a <hr> (horizontal rule). Ha ezt beírod a kódba, a böngésző egy vízszintes vonalat húz a képernyőn. Ezt akkor használjuk, ha egy témát lezárunk, és egy teljesen új gondolatmenetet kezdünk az oldalon belül.

<p>Itt véget ér az első téma.</p>
<hr>
<p>Itt pedig egy új téma kezdődik a vonal alatt.</p>