Példák különböző HTML elemek használatára

Paragrafus - p elem

A szöveg rendszerint paragrafusokba (bekezdésekbe) foglalva helyezkedik el a dokumentum törzsében. Az XHTML standard nem engedi meg, hogy a szöveget közvetlenül a törzsbe (body elem) helyezzük. Ehelyett az egyes szövegrészeket a <p> tag segítségével jeleníthetjük meg. A bekezdés megjelenítését illetően a böngésző annyi szót helyez egy sorba, amennyi a böngészőablakba belefér. Minden sor végére sortörés kerül (a szövegbe írt újsor-karaktereket nem veszi figyelembe a böngésző, illetve több egymásutáni szóköz egyetlen szóközzel lesz helyettesítve).

A p elembe ágyazott szöveget üres sor előzi meg.

Sortörés - br elem

Új sor kezdése a <br> (break) tag beiktatásával lehetséges (azt meglőző üres sor nélkül).
Üres elem, tehát nem lehet törzse, következésképpen záró tag-je sem. XHTML esetén az alakja: <br />
Itt jegyezzük meg, hogy az üres tag-ek esetében az XHTML szintaxisban a "/" karakter jelzi, hogy nyitó és egyben záró tag-ről van szó. A "/" előtti szóköz az üres tartalmat jelképezi. (Bizonyos régebbi böngészőknek gondot okoz a <br/> alak, a <br />-vel viszont boldogulnak ezek is.)

Címek

Egy dokumentumban a szöveget gyakran fejezetekre/alfejezetekre bontjuk, és mindenik egy-egy címmel kezdődik. Az (X)HTML 6 szintet határoz meg a címek hierarchiába való szervezésére: <h1>, <h2>, <h3>, <h4>, <h5> és <h6> (h = heading), ahol <h1> a legfelső szintet (a főcímet) jelöli. Ezeknek a címeknek a megjelenítése általában vastag betűvel történik, a standard betűméret pedig a címet jelölő elem sorszámának függvényében változik. A legtöbb böngésző esetében a <h1>, <h2>, <h3> a szöveg alapértelmezett méreténél nagyobb betűméretet használ, a <h4> betűmérete az alapértelmezett betűméretnek megfelelő, míg a <h5> és <h6> betűmérete ennél kisebb. A h elemek megtörik a sort, vagyis tartalmuk új sorban jelenik meg. A böngészők általában előtte és utána is kihagynak valamennyi helyet.

Alsó-, felső index

Az alsó- illetve felső index a <sub> (subscript), illetve <sup> (superscript) tag-ek segítségével valósítható meg.
Pl. x12+x22

A fehér karakterek megőrzését szolgáló pre elem

Amennyiben éppen azt szeretnénk, hogy a szövegbe írt fehér karakterek megmaradjanak, vagyis meg szeretnénk előzni, hogy a böngésző kiküszöbölje a többszörös szóközöket, illetve a sortörést figyelmen kívül hagyja, ezt megtehetjük a pre (preserve rövidítése) elem segítségével.
Pl.

      Som dere, som dara som vessző
        Kikereki pókokat ébresztő.
          Pitteg a pattog a bekereki bokorág,
            Heje-huja szélnek tél ad parolát.
      

Vízszintes vonal - hr

A szöveg tagoltabbá, ezáltal olvashatóbbá tehető vízszintes vonalak beiktatásával, melyet a <hr> (horizontal rule) üres tag segítségével valósíthatunk meg (XHTML esetén ennek alakja: <hr />).

Szövegformázó tag-ek

Korábban számos olyan tag volt használatban, mely a szöveg megjelenítésére vonatkozó információkat adott meg, mint pl. a betűtípus vagy betűméret. A CSS (Cascading Style Sheets, magyarul st1íluslapok) megjelenésével ezek a tag-ek elavulttá váltak, további használatuk nem ajánlott.
Maradt mégis néhány olyan, a karakterkészlettel kapcsolatos szövegformázó tag, melyeket napjainkban is széles körben használnak, ezek az ún. tartalomalapú tag-ek (content-based style tags).
A legelterjedtebbek: em, strong, code
Az <em> (emphasis) tag azt fejezi ki, hogy a törzsében levő szöveg valamilyen szempontből kiemelt. A legtöbb böngésző dőlt betűvel jeleníti meg a tartalmát. Így: kiemelt szöveg
A <strong> tag jelentése az <strong>-éhez hasonló, de még nagyobb hangsúlyt ad a törzsében levő szövegnek. A böngészők általában vastagított betűvel jelenítik meg: nagyon fontos ... szöveg
Dőltbetűs szöveget írhatunk az i (i = italic) elem segítségével (dőlt), illetve vastagított szöveget a b (b = bold) elemmel (vastag). Ezek az elemek nincsenek ugyan elavultnak nyilvánítva, de amennyiben egy tetszőleges szövegrész betűstílusát vagy betűvastagságát szeretnénk megadni, ezt célszerűbb CSS stílusmeghatározásként megadni. Az i, illetve b elemet használhatjuk olyankor, ha valamiképpen a tartalom kívánja meg, hogy dőlt , illetve vastagított betűt használjunk, pl. a szövegben szereplő kémiai elemeket dőlt betűvel szeretnénk írni (H2O+CO2...) vagy vastagított betűvel valamilyen kulcsszavakat...
A code elemet általában állandó betűszélességű karakterkészlettel írt szöveg (tipikusan számítógépes kód) beiktatására használják.
A szövegformázó tag-ek nyújtotta megjelenítés CSS stílusmeghatározással is elérhető, sőt, ez utóbbi jóval bővebb lehetőséget kínál, így az itt említett tag-eket igyekezzünk ritkán használni, és csak akkor, ha valóban inkább a tartalmat szeretnénk vele megjelölni, és nem a szöveg megjelenítését formázni, amire a CSS használata alkalmasabb.

Listák

Háromféle listát hozhatunk létre: rendezetlen, rendezett (sorszámozott), illetve definíciós listát.

Rendezetlen listát használunk, amennyiben a felsorolt elemek sorrendje nem lényeges (mint amilyen pl. egy bevásárlólista). A listát az <ul> (unordered list) tag hozza létre, új listaelemet pedig a <li> (list item) tag segítségével szúrhatunk be. Megjelenítéskor minden egyes lista-elem előtt egy felsorolási jel (bullet) jelenik meg (ez módosítható CSS stílus megadásával).

Pl. (bevásárlólista)

A rendezett listában számít az elemek sorrendje. A megjelenítéskor a lista-elemek elé implicit módon szekvenciális értékek (alapértelmezett módon arab számok) kerülnek.
A rendezett lista létrehozása az <ol> (ordered list) tag segítségével történik, a lista-elemek definiálása ugyanúgy történik, mint rendezetlen lista esetén.
A rendezett-, illetve rendezetlen listákat egyaránt egymásba is ágyazhatjuk, de nem közvetlenül az <ol>, illetve <ul> tag-be kell ágyazni a következő <ol>, illetve <ul> tag-et, hanem a külső lista <ol>, illetve <li> tag-ébe kerül bele a beágyazott lista.

Pl. (Fiktív tartalomjegyzék)

  1. Bevezetés Nekeresdfalva környezetzajzába
  2. Közeli települések
    1. Kukutyin
    2. Piripócs
    3. Üzgümüzgüfalva
  3. Régiófejlesztési ötletek

A definíciós lista név-érték párokat jelenít meg, tipikusan kifejezéseket és ezek definícióit. A <dl> (definition list) tag hozza létre a listát, ezen belül pedig a <dt> (definition term) tag határozza meg egy új bemenet értékét, a <dd> (definition description) tag pedig a leírást.

Pl. (légitársaságok operációs rendszer módra)

Unix Airways
Mindenki elhozza magával a repülőgép egy kis darabját, amikor megérkezik a reptérre. Mindannyian kimennek a kifutóra, és darabról-darabra összeállítják a gépet. Megállás nélkül vitatkoznak, hogy milyen típusú gépet kívánnak építeni.
Air DOS
Addig tolják a gépet, amíg az siklórepülésbe nem kezd, akkor mindenki beugrik és engedik a gépet siklani amíg az újra földet nem ér. Majd megtolják, beugranak és így tovább...
Windows Air
A terminál nagyon szép, színes, barátságos stewardess-ek, kényelmes csomagellenőrzés és beszállás, sima felszállás. Kb. 20 perccel később a gép felrobban a levegőben bármilyen figyelmeztetés nélkül.
Linux Air
Az összes többi légitársaság elégedetlen munkavállalói elhatározták, hogy saját légitársaságot állítanak fel. Önmaguk építik fel a gépeket, a jegyszámlálókat és a kifutópályát. Kis összeget számolnak fel, amely fedezi a jegynyomtatás költségeit, de önmagad is letöltheted és kinyomtathatod a jegyeket. Mikor felszálltál a gépre, kapsz egy széket, négy csavart, egy franciakulcsot és egy ülés-HOWTO.html-t. Ugyan sok időbe kerül összeraknod és beállítanod az ülést, de mire kész, nagyon kényelmesnek találod. A gép felszáll és megérkezik időben minden gond nélkül, a repülés közbeni kaja csodálatos. Megpróbálod elmesélni a többi légitársaság ügyfeleinek a nagyszerű utazást, de ők mindig csak azt kérdezik: "Hogy MIT kellett csinálnod az üléssel???"

Táblázatok

A táblázat egy cellákból felépülő mátrix. Táblázat létrehozása a <table> tag segítségével történik. Az ebbe ágyazott <tr> (table row) tag egy sort definiál. Egy soron belül elhelyezkedő cellák pedig a <td> (table data) tag segítségével adhatók meg.
A táblázat első sora és/vagy első oszlopa gyakorta valamilyen, az oszlopra (illetve sorra) vonatkozó címkét tartalmaz. Az ilyen jellegű cellát a <th> (table heading) tag segítségével adjuk meg.
Egy táblázatban kétféle szegélyvonal szerepel: egy külső szegély (border), illetve egy, a cellákat keretező belső szegély (rule). Amennyiben a table elemben nem jelenik meg a border attribútum, akkor egyik szegély sem lesz megjelenítve. A border attribútum értéke egy egész szám, mely a külső szegély vastagságát adja meg pixel-ekben (1-nél vastagabb külső szegély esetén a táblázat megjelenítése 3D-s hatást kelt). Amennyiben 0-tól különböző értéket adtunk meg a külső szegélynek, a belső szegély vastagsága 1 pixel lesz.

Pl. egy nagyon egyszerű táblázat:

x0x
x00
0x0

A colspan (illetve rowspan) attribútumok segítségével olyan cellát hozhatunk létre, amelyik több oszlopot (sort) is áthidal.

egy "bonyolultabb" példa (a Százholdas pagony lakóinak ízlése)
 MicimackóMalackaTigrisRóbert Gida
mézkedvencemmondjukhogy...pfúj!nyami!
pattogatott kukoricaaz is jó, ha nincs mézfincsi
sültkolbásznem az én esetemez már igen!

A táblázat megjelenítése tovább variálható CSS segítségével.

Képbeszúrás - img

Képet az img üres elem segítségével iktathatunk be. Legegyszerűbb alakja a következő két attribútumot tartalmazza: src, mely a képet tartalmazó állományt adja meg, illetve alt, mely egy alternatív szöveget határoz meg, ami akkor jelenik meg, ha a kép megjelenítése valamilyen okból nem lehetséges (nem grafikus böngésző vagy a böngészőben ki van kapcsolva a képek megjelenítése). Az alt attribútum használata kötelező a szigorú (X)HTML specifikáció szerint.
Amennyiben a kép ugyanabban a katalógusban található, mint a HTML oldal, elég az állomány nevét megadni, különben a HTML oldal katalógusához képest számítva, relatív úttal együtt adjuk meg. Az img elem további két opcionális attribútuma a width, illetve height, melyeket a kép átméretezésére használhatunk. Vigyázzunk arra, hogy az átméretezéssel ne torzuljon a kép, másrészt pedig a méretreszabást legtöbbször nem célszerű a böngészőre hagyni. Pl. amikor hatalmas méretű képeket kell lehívnunk a szerver gépről, melyeket majd a böngésző alaposan lekicsinyít a megadott méretre, egyrészt feleslegesen lesz terhelve a hálózati forgalom, másrészt az oldal betöltődése lassú lesz. Ehelyett célszerűbb a megjelenítésre szánt képet valamilyen képszerkesztő segítségével megfelelőképpen méretezni, és ezt az eleve kisebb méretű képet tárolni a szerveren.

Elterjedt kép-formátumok:

Pl. Ez itt egy „finom” billentyűzet:

csokibillentyűzet

Elemek csoportosítása - span és div elemek

A span elemet tipikusan arra szokás használni, hogy egy bizonyos szövegrésznek önálló stílust adhassunk meg.
Pl. „Micimackó egy erdőben élt, saját kunyhójában, Kovács János név alatt.”
(Megjegyzés: a példában az egyszerűség kedvéért inline stílusmeghatározást használtunk, tipikusabb a stílusosztály használata, de mindez a CSS témakörébe tartozik.)

A div elem segítségével az oldal egy részének, egy különálló nagyobb egységnek kölcsönözhetünk sajátos kinézetet.

Megj.: sem a span sem a div elemhez nincs a böngészőben alapértelmezett megjelenítési mód hozzárendelve.


HTML elemek kategorizálása: blokk, illetve inline típusú elemek

A(z) (X)HTML elemek két kategóriába vannak sorolva: minden elem vagy inline vagy blokk típusú.
Egy inline típusú elem tartalma az aktuális sorban jelenik meg, azaz megjelenítéséhez nem tartozik implicit módon egy sortörés is. Egetlen kivétel ez alól a br elem, mely inline elemnezk számít, de a rendeltetése tulajdonképpen éppen az, hogy egy sortörést beékeljen.
Egy blokk típusú elem megtöri az aktuális sort, így tartalma egy új sorban jelenik meg.
Pl.

Egyebek...

Magyar ékezetek

Példaszöveg, ami minden magyar ékezetes karaktert tartalmaz: árvíztűrő tükörfúrógép :)

A HTML 4.01-es szigorú specifikáció néhány általános szabálya