Ez a lap egy ellenőrzött változata
 | Ez a szócikk nem tünteti fel a független forrásokat, amelyeket felhasználtak a készítése során.Emiatt nem tudjuk közvetlenül ellenőrizni, hogy a szócikkben szereplő állítások helytállóak-e. Segítsmegbízható forrásokat találni az állításokhoz! Lásd még:A Wikipédia nem az első közlés helye. |
A web-programozásbanHTML-elemnek nevezik aHTML dokumentumok szerkezeti elemeit, amelyek lehetővé teszik a tartalom hierarchikus elrendezését.
Szorosabb értelemben a HTML-elem egy olyanSGML 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.
Nyelvtanilag (szintaktikusan) a HTML-elemek a következő részekből állnak:
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ő.
A HTML-elemeket két nagy csoportba oszthatjuk: vagy blokkszintű vagy szövegszintű (inline) elemekre.
Ablokkszintű 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.
Aszövegszintű (vagyinline) 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")
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).
<p>Mari megpuszilta <em>„fülig” Jimmy-t.</em></p><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 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.
<html>…</html>
en, magyar nyelv eseténhu stb.) és aprofile jellemző, amely a dokumentumhoz tartozó metaadatokURI-jét tartalmazza (ritkán használják). A HTML-elemben csak kétféle (beágyazott) tartalom megengedett:head elem ésbody elem.body-t nem használjuk)<head>…</head>
head címkék közötti fejrész a dokumentummal kapcsolatos metaadatokat tartalmazza. Hét lehetséges gyermekelemet tartalmazhat, ezek közé tartozik ameta elem, amely a metaadatok bővíthető specifikációját tartalmazza.<body>…</body>
A gyökérelemek a következő példához hasonló elrendezést vesznek fel:
<html><head>base és atitle elemeket, melyek csak egyszer fordulhatnak elő. Atitle az egyetlen olyan gyermekelem ahead-elemben, amely szükségszerűen megjelenik.</head><body>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. Azins és adel elemek használata is megengedett abody elemben, abban az esetben, ha blokkszintű elemként használjuk őket. Megengedett blokkelemek még:p),h1…h6),blockquote),ol),ul),dl),div),noscript),form),table),fieldset) és aaddress).body elemen belül nem megengedett / helytelen / érvénytelen.</body></html><title>…</title>
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 (MSWindows 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 (plGoogle) robotjai különös figyelmet fordítanak az oldal címében (title elem) használt szavakra. Atitle elem nem tartalmazhat beágyazott elemeket. Minden dokumentumban csak egytitle elem megengedett.<base/>
href és más hivatkozások alapURL-jét. Ennek minden olyan elem előtt meg kell jelennie, ami külső dokumentumra hivatkozik. Minden HTML dokumentumban csak egyetlenbase elem megengedett. Abase elemnek csak jellemzői vannak, tartalma nincsen.<link/>
head elem többlink elemet is tartalmazhat. Alink 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" />[2]<basefont/>(elavult)
font elemekkel együtt lehet használni. Ma már kiszorították a stíluslapok (CSS), ezért használatuk elavultnak tekinthető.<script>…</script>
script címkék közé), vagy lehet egy külön forrásállományban, amelynek az URL-jét ascript címkesrc jellemzőjével adhatjuk meg.[3]<style>…</style>
<style type="text/css">…</style>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>.[4]<object>…</object>
head elemben. Bár ritkán használjákhead elemként, ezt az elemet arra lehet felhasználni, hogy a dokumentumhoz kapcsoljunk releváns külső adatokat.<meta/>
head elemből és jellemzőikből nem derül ki. Generikus természetükből adódóan ameta elemekkulcs-érték párokat adnak meg.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" />meta elem megadja aname é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égesscheme jellemző amellyel meg lehet adni azt a szemantikai keretrendszert amely a kulcs és az érték jelentését definiálja.<meta name="foo" content="bar" scheme="DC" />meta elem amelynek 'foo' a neve, a 'bar' értéket tartalmazza a DC vagyDublin Core erőforrásleíró keretrendszer (RDF) szerint.A szövegszintű/inline elemeket nem lehet közvetlenül abody 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)
<em>…</em>
<strong>…</strong>
<q>…</q>
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.citejellemzővel lehet megadni a forrást, és ide egy érvényesURI-t szoktak írni.<q class='hosszu'>Ide kerül egy hosszabb (több mint mondjuk 25 szó) szövegszintű idézet…</q>.<cite>…</cite>
<dfn>…</dfn>
<abbr>…</abbr>Rövidítést tartalmaz, mint például:HTML
<acronym>…</acronym>
abbr (rövidítés) elemhez.Ezeket elsősorban a programok forráskódjának megjelenítésére használják.Megkülönböztethető a forráskód (<code>), a változók (<var>), a felhasználói bevitel/input (<kbd>) és a terminál eredmény/output (<samp>).
<code>…</code>
Code snippet.<samp>…</samp>
<kbd>…</kbd>
<var>…</var>
<sub>…</sub>
<sup>…</sup>
{vertical-align: sub} vagy{vertical-align: super}<del>…</del>
<ins>…</ins>
<del> elem helyett. Általában aláhúzva jelenik meg:Beillesztett szöveg.ins és adel elemeket használhatjuk blokk- és szövegszintű elemként is.Ezeknek az elemeknek egészében a szülőelemben kell lenniük ahhoz, hogy jólformált HTML dokumentumot kapjunk.
Például ahhoz hogy kitöröljük egy olyan szövegrészletet, amely egy bekezdés közepétől a kettővel utáni bekezdés végéig tart, háromkülönállódel elemet kell használni.
<isindex>…</isindex>(elavult)
isindex elem kiszolgáló-oldali támogatást igényel ahhoz, hogy a dokumentumot indexelni tudja.Ez egy egysoros szövegbeviteli mezőt jelenít meg.
Ha megadnak egy kereső-stringet (karakterlánc), akkor az hozzáadódik az aktuális URL-hez és a dokumentumban való előfordulásai kiemelve jelennek meg.
Általában, ha a kiszolgáló támogatja ezt az elemet, akkor automatikusan (beavatkozás nélkül) hozzárendeli aziisindex elemeket a dokumentumhoz.
<a>…</a>
href (hiperszöveges hivatkozás) jellemzőben megadottURL-re; Ezen kívül atitle jellemzőt is beállíthatjuk a hoverbox szövegbe, ahol valami információt közölhetünk a hivatkozott oldalról.<a href="URL" title="további információ">link text</a>name jellemzőket használjuk amit egy kettőskereszt előz meg és egyURL-t rendelünk hozzá amely a hivatkozás célja lesz (a dokumentumon belül). Ez a webböngészőt arra készteti, hogy a lapot a megfelelő részre görgesse. Bármely elemet horgonnyá tehetünk azid (azonosító) jellemző használatával,[1] tehát a<a name="foo"> használata nem szükséges.A<a name="horgonynév"/> horgonyok a Wikipédián is használt MediaWiki szoftverben egyáltalán nem használhatóak. Helyette alkalmazható például a következő:<span></span>, de bármely olyan elem is, amiben „id=” megadható. A szakasznevek maguk is horgonyok.[2]
<img/>
src jellemzőben megadott forrású képet a weboldalon; azalt jellemző használata szükséges: ez egy alternatív szöveg, ami abban az esetben jelenik meg, ha a kép nem jeleníthető meg valamilyen okból kifolyólag. Az alt eredetileg az alternatív szöveg megadására szolgál, de az MSInternet Explorer az itt megadott szöveget tooltip-ként jeleníti meg, ha nem adunk megtitle jellemzőt. Atitle jellemzővel adhatunk meg tooltip szöveget.<br>
<br/> (XML-kompatibilis)
<map>…</map><area>
<area/> (XML-kompatibilis)
<object>…</object>type jellemzővel adjuk meg.Az objektum lehet bármilyenMIME-típus, amit a webböngésző képes értelmezni, például beágyazott oldal,plugin által kezelt kód (plFlash animáció,Java applet, hanganyag stb.)
<param>…</param>vagy<param/>
object elemen belül jelenhet meg.Aname és avalue jellemzők használatával, minden egyes<param/> elemmel az objektum egyes paramétereit tudjuk megadni.
Példák: width, height, font, background colour, stb., attól függően, hogy a beágyazottobject elemben mit engedélyeztek a fejlesztők.
<embed>…</embed>(proprietary)type jellemzőben megadott típushoz. Ezt használhatjukFlash és hangfile-ok stb beágyazásánál. Ezt a HTML-elemet a Netscape vezette be és ezért az ő tulajdonát képezi; a W3C által javasolt standard módszer a<object> elem használata.<noembed>…</noembed>(proprietary)<applet>…</applet>(elavult)Inkább az<object>-et használjuk.
<span>…</span>id azonosítóval vagy egyclass (osztály) jellemzővel látjuk el, amelyre aCSS stíluslapról vagy aDOM-ból hivatkozhatunk. A legtöbb HTML-elemhez hasonlóan aspan elem támogatja az inline CSS-t astyle jellemzőknél.
Informatikai portál • összefoglaló, színes tartalomajánló lap