HTML bekezdés (HTML p)

Ebből a cikkből megtanulhatod a HTML bekezdések használatát és a HTML p szintaktikáját.

Mi az a HTML? A HTML bemutatása című cikk és a HTML szerkesztő programok nyitóképe

HTML bekezdés (HTML p)

A HTML bekezdéseket (vagy paragrafusokat) arra használjuk, hogy szépen elkülöníthető bekezdéseket alkothassunk a szövegben. Azért hogy ez elérhető legyen, a HTML bekezdések rendelkeznek pár alaptulajdonsággal, mint például, hogy minden <p> tag új sorban kezdődik és, hogy minden <p> tartalmaz egy kis margót. Ezáltal a bekezdések jobban elkülöníthetővé válnak.

HTML p elem

A p elem egy bekezdést határoz meg, melynek nyitó- és zárótagjei közé szöveget írhatunk. Ahogy fentebb említettünk, a p elem automatikusan tartalmaz alsó, és felső margókat, amely által minden bekezdés vizuálisan könnyen elkülöníthető. Ebből adódik, hogy minden létrehozott p tag egy újabb sorba töri a szöveget.

Szintaktika

<p>Ide jön a szöveg.</p>
Code language: HTML, XML (xml)

A HTML bekezdés szintaktikája rendkívül egyszerű, egy nyitó és egy záró tag-ből áll. A kettő közé pedig a szöveg megy.

Példa

HTML kód

<p>Ez egy bekezdés.</p>
<p>Ez egy másik, hosszabb bekezdés.</p>
<p>Ez                   egy                          sok                szóközt               tartalmazó                    bekezdés.</p>
<p>Itt
pedig
külön
sorba
írom
az
összes
szót!
</p>

Code language: HTML, XML (xml)

Eredmény

Ez egy bekezdés.

Ez egy másik, hosszabb bekezdés.

Ez egy sok szóközt tartalmazó bekezdés.

Itt pedig külön sorba írom az összes szót!

A példán keresztül látszik, hogy hiába alkalmazok extra szóközöket, vagy hiába írom külön sorba az egyes szavakat front-end-en keresztül a szöveg formázatlanul fog megjelenni, mivel a böngésző automatikusan eltávolítja azt extra szóközöket és sorokat. (Front-end: Amit a felhasználó lát.)

Hogyan tagoljuk a bekezdést?

Alapvetően csak akkor kezdődik új sor, ha az adott sorba már nem fér több szó. De van egy-két egyszerű trükk, amellyel szépen tagolhatjuk a bekezdést.

Sortörés (br)

Megtörhetjük a sort egy <br> utasítással. A <br>-nek nincs zárópárja, így elég egy szimpla <br> beszúrása a megtörendő helyre.

HTML kód

<p>Ez egy <br> bekezdés.</p>
Code language: HTML, XML (xml)

Eredmény

Ez egy
bekezdés.

Horizontális elválasztás (hr)

Használhatunk vízszintes vonalakat elválasztás céljából, ezzel is megtörhetjük a szöveg monotonitását.

HTML kód

<p>Ez egy bekezdés.
<hr>
Ez egy másik bekezdés.</p>

Code language: HTML, XML (xml)

Eredmény

Ez egy bekezdés.


Ez egy másik bekezdés.

Hogyan formázzuk a bekezdések szövegét?

Számtalan HTML bekezdés formázási lehetőség van, megemlítünk párat a legnépszerűbbek közül.

Egy bekezdésen belül szimplán használhatjuk az alábbi lehetőségeket:

  • <b> – Félkövér szöveget alkot.
  • <strong> – Fontos szövegrészleteknél használjuk.
  • <i> – Dőlt szöveget eredményez.
  • <em> – Kiemeléshez használjuk.
  • <mark> – Szövegmegjelöléshez használjuk.
  • <small> – Kisebb szöveget eredményez.
  • <del> – Törölt szöveg hatást okoz.
  • <ins> – Beillesztett szöveghez használjuk.
  • <sub> – Alsó indexbe helyezi a szöveget.
  • <sup> – Felső indexbe helyezi a szöveget.

Példák formázásokra

HTML kód

<p><b>Ez </b>
<strong>itt </strong>
<i>egy </i>
<em>bekezdés </em>
<mark>, </mark>
<small>amelyben </small>
<del>bemutatom </del>
<ins>a </ins>
<sub>formázási</sub>
<sup>lehetőségeket.</sup></p>
Code language: HTML, XML (xml)

Eredmény

Ez itt egy bekezdés , amelyben bemutatom a formázási lehetőségeket

Szöveg rendezése

A HTML bekezdések szövegének tartalmát akár rendezhetjük is, azaz megmondhatjuk, hogy a szöveg balra rendezett, vagy sorkizárt legyen stb.

Szintaxis

text-align: IGAZÍTÁS.MÓDSZERE;
Code language: CSS (css)

Lehetőségek:

  • center (középre igazít)
  • left (balra igazít)
  • right (jobbra igazít)
  • justify (sorkizárt)

HTML kód

<p style="text-align:center;">Ez a szöveg középre igazított.</p>
<p style="text-align:left;">Ez a szöveg balra igazított.</p>
<p style="text-align:right;">Ez a szöveg jobbra igazított.</p>
<p style="text-align:justify;">Ez a szöveg sorkizárt, de csak akkor látszik, ha jó hosszú a mondat.</p>
Code language: HTML, XML (xml)

Eredmény

Ez a szöveg középre igazított.

Ez a szöveg balra igazított.

Ez a szöveg jobbra igazított.

Ez a szöveg sorkizárt, de csak akkor látszik, ha jó hosszú a mondat. Írok még egyet.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!