HTML-elem

right|bélyegkép|350px|Egy HTML-elem részei: <p class="foo">Ez egy bekezdés.</p> kezdőcímke: <p class="foo">;jellemző neve: class; jellemző értéke: foo; tartalom: Ez egy bekezdés.; zárócímke: </p>

A web-programozásban HTML-elemnek nevezik a HTML dokumentumok szerkezeti elemeit, amelyek lehetővé teszik a tartalom hierarchikus elrendezését.

Szorosabb értelemben a HTML-elem egy olyan SGML elem, amely eleget tesz egy vagy több HTML DTD követelményeinek.

Az elemek kétféle tulajdonságot tartalmazhatnak: jellemzőket (attribútumokat) és tartalmat, az adott HTML DTD-től (például HTML 4.01 strict DTD) függően kötelezően, vagy megengedetten.

Az elemek jelölhetnek fejezeteket, bekezdéseket, hiperhivatkozásokat, beágyazott tartalmat és számos más dolgot.

A HTML-elem szerkezete Nyelvtanilag (szintaktikusan) a HTML-elemek a következő részekből állnak:

kezdőcímke, amely az elem kezdetét jelöli tetszőleges számú jellemző (attribútum) – és a hozzájuk tartozó értékek. valamilyen tartalom (karakterek és/vagy beágyazott elemek) zárócímke – az elem végét jelöli

Egy HTML-elem a kezdőcímkében tartalmazhat jellemzőket, amellyel egy kívánt viselkedést vagy az elem további tulajdonságait definiálhatjuk.

A záró címke használata nem minden HTML-elem esetében kötelező.

Egy üres elem – amelynek nincs szöveges vagy más tartalma – legrövidebb formájában nem szükséges a zárócímke használata.

Van néhány olyan elem, amely nem része egyetlen hivatalos DTD-nek sem, néhány webböngésző mégis támogatja, és egyes weboldalakon használják.

Az ilyen elemeket az ezeket nem támogató böngészők hibásan vagy egyáltalán nem jelenítik meg.

A HTML-elemeket néha egyszerűen címkének (tag) nevezik, de szorosabb értelemben a címke csak az elem kezdetét és végét jelölő két szemantikai szerkezetet (végpontot) jelenti.

Az XHTML a HTML 4.01 változata után bevezetett utolsó szabvány. Az XHTML 1.0 támogatja a HTML 4 összes elemét és a legtöbb esetben az érvényesített XHTML 1.0 dokumentumok majdnem érvényes HTML 4 dokumentumok is. Az XHTML-ben azonban a HTML alapkövetelményeinek az SGML helyett már az XML szabványnak kell megfelelniük. Ebben a cikkben az elemeket a HTML 4.01-ben használt SGML szabvány szerint tárgyaljuk (ha nem, azt külön jelezzük).

Azokban az esetekben azonban, ahol a XHTML 1.0 elemek megegyeznek a HTML 4.01 elemeivel, a cikk XHTML-elemekre is értelmezhető.

Blokkok és szövegszintű elemek

A HTML-elemeket két nagy csoportba oszthatjuk: vagy blokkszintű vagy szövegszintű (inline) elemekre.

A blokkszintű elemek – mint a fejezetcímek, a bekezdések, a listák és a táblázatok – olyan nagyobb szerkezeti elemek, amelyek tartalmazhatnak más blokkokat, inline elemeket vagy szöveges elemeket (lást később a beágyazási szabályokat). Általában független tömbökként (blokk) jeleníti meg őket a böngésző, és a többi blokktól függőlegesen üres hely (szegély/margó) választja el őket.

A szövegszintű (vagy inline) elemek – mint a hiperhivatkozások, idézetek, cikkhivatkozások vagy a képek – kisebb szerkezeti elemek, amelyek kis szöveg- vagy adatrészleteket képviselnek a dokumentumban. Tartalmazhatnak csak szöveget vagy más szövegszintű elemeket és általában egymást követően jelennek meg a webböngészőben egy sorban az őket tartalmazó blokkon belül.

(Lásd "A HTML dokumentumok általános /globális/ felépítése")

Elemek beágyazása

Egyes HTML-elemeket be lehet ágyazni más HTML-elemekbe:

<p>You <em>rock</em></p>

<p>Király <em>vagy!</em></p>

A beágyazás lehet összetettebb is ennél:

<p>A következő mondást (Lagzi) Lajcsinak tulajdonítják: <q lang="fr">L'état, c'est <em>moi</em>!</q> = <q lang="hu">Az állam <em>én</em> vagyok!</q> (<cite> <a href="http:hu.wikipedia.org/wiki/XIV._Lajos_francia király"> Wikipédia</a></cite>).</p>

A beágyazás tetszőleges mélységű lehet, de az elemeket mindig fordított sorrendben kell bezárni, a nyitási sorrendhez képest – csak így kapunk érvényes kódot (ezt a sorrendet hívják LIFO-nak – Last in, first out/utolsóként be, elsőként ki).

helyes <p>Mari megpuszilta <em>„fülig” Jimmy-t.</em></p> helytelen <p>Mari megpuszilta <em>„fülig” Jimmy-t.</p></em>

Néhány blokkszintű elem (pl a bekezdés/paragrafus) tartalmazhat kizárólag inline elemeket, míg néhány elemnek (pl. az űrlapok/form-ok) szükségszerűen tartalmaznia kell blokkszintű gyermekelemeket – a legtöbb elem azonban mindkettő típusba tartozó elemeket tartalmazhat.

A dokumentum gyökérelemei

A gyökérelemek olyan átfogó elemek, amelyek az összes többi HTML-elemet tartalmazzák.

Ezek minden HTML oldalon megtalálhatóak.

Valójában elhagyhatóak, de ha ezt tesszük egyes alkalmazások nem fogják felismerni, vagy nem megfelelően fogják kezelni a dokumentumot.

A HTML dokumentum határait jelöli (pl. XML vagy más dokumentumtól való megkülönböztetés céljából). A HTML-elemnek két jellemzője lehet: a lang jellemző, ami a dokumentum fő nyelvét jelöli (pl angol nyelv esetén en, magyar nyelv esetén hu stb.) és a profile jellemző, amely a dokumentumhoz tartozó metaadatok URI-jét tartalmazza (ritkán használják). A HTML-elemben csak kétféle (beágyazott) tartalom megengedett: egy head elem és egy body elem. (Kivételt képez ez alól a "frame"-ek használata, mert ilyenkor a body-t nem használjuk)

Ezek a címkék a dokumentum fejrészének határait jelölik. A fejrész tartalmazza az oldallal kapcsolatos információkat. A head címkék közötti fejrész a dokumentummal kapcsolatos metaadatokat tartalmazza. Hét lehetséges gyermekelemet tartalmazhat, ezek közé tartozik a meta elem, amely a metaadatok bővíthető specifikációját tartalmazza.

A dokumentum törzsrészét határolja, az itt található tartalmat jeleníti meg a böngésző.

A gyökérelemek a következő példához hasonló elrendezést vesznek fel:

<html> <head> A HTML 4.01-ben definiált fejrész-elemek bármelyike, tetszőleges sorrendben és tetszőleges számú előfordulással, kivéve a base és a title elemeket, melyek csak egyszer fordulhatnak elő. A title az egyetlen olyan gyermekelem a head-elemben, amely szükségszerűen megjelenik. </head> <body> Legalább egy blokk-elemnek vagy egy script elemnek kell itt szerepelni, (de akármennyi lehet), olyan sorrendben, amely értelemszerűen a dokumentum felépítését és elrendezését követi. Az ins és a del elemek használata is megengedett a body elemben, abban az esetben, ha blokkszintű elemként használjuk őket. Megengedett blokkelemek még: bekezdés/paragraph (p), fejezetcím/heading (h1…h6), idézetblokk/block quotation (blockquote), számozott lista/ordered list (ol), számozatlan lista/unordered list (ul), definíciólista/definition list (dl), szakasz/division (div), script-tiltás/no script support (noscript), űrlap/form (form), táblázat/table (table), mezőhalmaz/fieldset (fieldset) és a cím/address (address). A többi HTML-elem használata a body elemen belül nem megengedett / helytelen / érvénytelen. </body> </html>

A fejrész <head> elemei

A dokumentum címét adja meg. Ez az elem minden HTML/XHTML dokumentumban kötelező. A különböző programok eltérően értelmezik az title elemet. A webböngészők általában az ablak tetején (címsorban) jelenítik meg az aktuális oldal címét; kis méret esetén a képernyő alján (MS Windows XP-ben a Tálcán). A weblap mentése esetén ez lesz a mentett fájl neve alapbeállításként. A keresőmotorok (pl Google) robotjai különös figyelmet fordítanak az oldal címében (title elem) használt szavakra. A title elem nem tartalmazhat beágyazott elemeket. Minden dokumentumban csak egy title elem megengedett.

Itt határozhatjuk meg a dokumentumban található relatív href és más hivatkozások alap URL-jét. Ennek minden olyan elem előtt meg kell jelennie, ami külső dokumentumra hivatkozik. Minden HTML dokumentumban csak egyetlen base elem megengedett. A base elemnek csak jellemzői vannak, tartalma nincsen.

Más dokumentumokra mutató hivatkozásokat határoz meg, mint például a 'előző' és a 'következő' linkek . Egy HTML head elem több link elemet is tartalmazhat. A link elemnek vannak jellemzői de nincs tartalma. Gyakran hivatkoznak itt egy vagy több külső CSS file-ra a következőképpen: <link rel="stylesheet" type="text/css" href="url" title="description of style" />

Ez adja meg a dokumentumban használt alap betűkészletet, betűméretet és színt. Ezt a font elemekkel együtt lehet használni. Ma már kiszorították a stíluslapok (CSS), ezért használatuk elavultnak tekinthető.

Itt lehet JavaScript kódot vagy más scriptet beilleszteni a dokumentumba. A script kódot be lehet gépelni ide ebbe az elembe tartalomként (a nyitó és záró script címkék közé), vagy lehet egy külön forrásállományban, amelynek az URL-jét a script címke src jellemzőjével adhatjuk meg.

A dokumentumhoz rendelhetünk egy CSS stíluslapot, általában ehhez hasonlóan:

… A CSS utasításokat lehet a HTML dokumentumba is gépelni a style címkék közé és/vagy elhelyezhetjük egy különálló állományban, melyre innen hivatkozhatunk az @import direktíván keresztül pl.: <style> @import "url"; </style>.

Itt lehet generikus objektumokat elhelyezni a head elemben. Bár ritkán használják head elemként, ezt az elemet arra lehet felhasználni, hogy a dokumentumhoz kapcsoljunk releváns külső adatokat.

Itt lehet megadni a szerző nevét, a kiadás dátumát, a lejárat idejét, a lap leírását és minden egyéb metaadatot, ami a többi head elemből és jellemzőikből nem derül ki. Generikus természetükből adódóan a meta elemek kulcs-érték párokat adnak meg.

Egyik formájában a meta elem meghatározhatja azt a HTTP fejlécet, amit az aktuális HTML tartalom előtt küldjön a kiszolgáló a klienshez.

Például:

<meta http-equiv="foo" content="bar" /> Ebben a példában azt határozzuk meg, hogy a lapot a 'foo' nevű HTTP fejléccel (header) kell kiszolgálni, amelynek az értéke 'bar'.

Általános formában a meta elem megadja a name és a kapcsolódó content jellemzőket, amelyek a HTML oldal tulajdonságait írják le. A teljes egyértelműség kedvéért van egy harmadik lehetséges scheme jellemző amellyel meg lehet adni azt a szemantikai keretrendszert amely a kulcs és az érték jelentését definiálja.

Például: <meta name="foo" content="bar" scheme="DC" /> Ebben a példában a meta elem amelynek 'foo' a neve, a 'bar' értéket tartalmazza a DC vagy Dublin Core erőforrásleíró keretrendszer (RDF) szerint.

Szövegszintű elemek

A szövegszintű/inline elemeket nem lehet közvetlenül a body elemben elhelyezni ha nyelvtanilag helyes HTML-t akarunk írni. Teljes mértékben a blokkszintű elemekbe kell beágyazni őket. (lásd a blokkelemeket alább)

Általános frázis/phrase elemek

Emphasis=hangsúlyozott (hagyomány szerint dőlt betűvel jelenik meg)

strong emphasis=erős hangsúly (hagyomány szerint félkövér betűvel jelenik meg). Az olyan html interfész eszközök, amelyek felolvassák a szöveget, ezeket más hangsúllyal ejtik ki.

Olyan idézet, amely csak szövegszintű elemeket tartalmaz (a blokkszintű elemeket tartalmazó idézetekhez lásd alább a blockquote elemet). A quote elemek lehetnek beágyazottak. Meghatározás/specifikáció szerint nem kell kitenni az idézőjelet. Ehelyett az idézőjelek (a beágyazottaké is) jellemzőit a stíluslapokon vagy a böngésző alapbeállításában kell beállítani. A cite jellemzővel lehet megadni a forrást, és ide egy érvényes URI-t szoktak írni.

Megjegyzés: a szemantikus HTML-ben a hosszabb szövegszintű (inline) idézetek megjelenítését sorbehúzásos blokként kell kezelni a stíluslapok segítségével. Erre egy módszer az XSLT használata bizonyos hosszúságot meghaladó idézetelemek kiválasztására a sorbehúzott blokként való megjelenítéshez. Egy másik módszer a CSS stíluslapok használata, ilyenkor a hosszú idézeteket egyenként meg kell jelölni egy osztállyal/class. Például: <q class='hosszu'>Ide kerül egy hosszabb (több mint mondjuk 25 szó) szövegszintű idézet…</q>.

citation/cikkhivatkozás. A szövegben található állítások vagy idézetek hivatkozásai.

Egy kifejezés első előfordulásakor lehet azt definiálni.

Rövidítést tartalmaz, mint például: HTML

Betűszó, hasonló az abbr (rövidítés) elemhez.

Számítógépes kód frázis /phrase/ elemek