2. modul · HTML alapok · 11. lecke
Ez a HTML-modul záró leckéje — és egyben a híd a CSS felé. Megtanulod a két „üres dobozt", amivel bármit körbekeríthetsz, és azt a két attribútumot, amivel nevet adsz az elemeidnek. Enélkül a CSS-ben nem tudnád megmondani, mit akarsz megváltoztatni.
div és mikor span.class vagy id kell-e.Eddig sok elemet láttál, és talán feltűnt, hogy kétféleképpen viselkednek. Ez nem véletlen: minden elem vagy blokkszintű, vagy soron belüli.
| Blokkszintű (block) | Soron belüli (inline) | |
|---|---|---|
| Hol kezdődik? | Új sorban, és alatta is új sor kezdődik | A szövegfolyamban, ott, ahol éppen tart |
| Mekkora? | A teljes rendelkezésre álló szélességet elfoglalja | Csak annyit, amennyi a tartalma |
| Példák | h1–h6, p, ul, ol, li, table, form, div |
a, strong, em, img, code, input, span |
| Mire való? | Az oldal szerkezeti darabjai | Szövegen belüli részletek kiemelése |
<p>Blokkszintű elemek:</p> <div class="kiemelt">alma</div> <div class="kiemelt">körte</div> <div class="kiemelt">szilva</div> <p>Soron belüli elemek:</p> <span class="kiemelt">alma</span> <span class="kiemelt">körte</span> <span class="kiemelt">szilva</span>
.kiemelt {
background-color: #fbcfe8;
border: 1px solid #be123c;
}
div-ek egymás alatt, teljes szélességben állnak; a
span-ek egy sorban, szorosan a szöveg köré simulva.
Pedig a tartalmuk betűre azonos.
A dobozmodellnél (17. lecke) kiderül, hogy a soron belüli elemeken a felső és alsó méretek nem is működnek rendesen. Az elrendezésnél (19–21. lecke) pedig folyton azzal fogsz dolgozni, hogy egy elem blokk-e vagy sem. Érdemes most megjegyezni.
A „blokk" és a „soron belüli" csak a böngésző alapértelmezése. CSS-sel bármelyik
elem viselkedése átállítható a display tulajdonsággal (18. lecke).
Egy span-ből lehet blokk, egy div-ből
soron belüli elem.
A <div> (division, vagyis szakasz) egy
általános blokkszintű doboz. Ez a legérdekesebb tulajdonsága:
semmit nem jelent.
A <h1> azt jelenti: „ez a főcím". A
<ul>: „ez egy lista". A <div>
viszont csak annyit: „ez itt egy csoport". Semmi többet.
Pont ezért hasznos: te adod meg a jelentését egy osztálynévvel. Egy
<div class="termekkartya"> már beszédes — de a jelentés
az osztálynévből jön, nem a div-ből.
A div két dologra való:
<div class="kartya"> <h3>Rakott krumpli</h3> <p>Klasszikus magyar étel.</p> <p><strong>Idő:</strong> 60 perc</p> </div> <div class="kartya"> <h3>Lecsó</h3> <p>Nyári kedvenc.</p> <p><strong>Idő:</strong> 35 perc</p> </div>
.kartya {
border: 2px solid #be123c;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 12px;
background-color: #fff5f7;
}
div nélkül a hat elem egyetlen folyamatos sorozat
lenne — nem derülne ki, hogy hármasával összetartoznak. A keretet, a hátteret és a térközt már a
CSS adja, de csak azért tudja, mert van mire ráaggatni.
A <span> ugyanaz, mint a div, csak
soron belüli: egy szövegrészletet kerít körbe anélkül, hogy új sort kezdene.
<p> A rendelésed állapota: <span class="allapot">úton van</span>. </p> <p> Az ár: <span class="ar">3 490 Ft</span> (a szállítás ingyenes). </p>
.allapot {
background-color: #dcfce7;
color: #166534;
padding: 2px 8px;
border-radius: 20px;
}
.ar {
color: #be123c;
font-weight: bold;
}
span nem töri meg a mondatot — a szöveg
természetesen folyik tovább körülötte. Egy div itt szétszakítaná
a mondatot három sorba.
A span a végső megoldás, nem az első. Ha a szövegrész
fontos, az <strong>; ha hangsúlyos, az
<em>; ha kód, a <code>;
ha rövidítés, az <abbr>. A span-t
akkor vedd elő, ha egyik jelentéses elem sem illik, és tényleg csak a
megjelenésen akarsz változtatni.
| div | span | |
|---|---|---|
| Típus | blokkszintű | soron belüli |
| Új sort kezd? | igen | nem |
| Mit fog körbe? | Elemek csoportját, egész szakaszokat | Szövegrészletet egy mondaton belül |
| Jelentése | Egyiknek sincs — az osztálynévtől kapja | |
A class nevet ad egy elemnek. A név nem kell, hogy
egyedi legyen — sőt, általában pont az a lényeg, hogy több elem is viselje ugyanazt.
Amikor a 13. leckében megtanulod a kijelölőket, a legfontosabb ez lesz:
.osztalynev { ... }. Ez a szabály minden olyan elemre
vonatkozik, amin rajta van az adott osztály — akár tíz, akár száz.
Egy helyen írod meg, mindenhol hat.
<p class="figyelem">A jelentkezés lezárult.</p> <p>Ez egy sima bekezdés.</p> <p class="figyelem">A terem megváltozott!</p> <h3 class="figyelem">Címsor is lehet</h3>
.figyelem {
background-color: #fef3c7;
border-left: 5px solid #d97706;
padding: 8px 12px;
}
A class értékében szóközzel elválasztva több nevet is
felsorolhatsz. Ilyenkor az elemre mindegyik szabály érvényes.
<p class="doboz">Alap doboz</p> <p class="doboz kiemelt">Doboz + kiemelt</p> <p class="doboz nagy">Doboz + nagy</p> <p class="doboz kiemelt nagy">Mindhárom</p>
.doboz {
border: 1px solid #9ca3af;
padding: 8px 12px;
margin-bottom: 8px;
}
.kiemelt {
background-color: #fce7f3;
border-color: #be123c;
}
.nagy {
font-size: 20px;
}
A class="doboz kiemelt" két osztályt jelent
(doboz és kiemelt), nem egy „doboz kiemelt" nevűt. Ezért nem lehet szóköz egy
osztálynéven belül — ha két szóból áll, kösd össze kötőjellel:
class="nagy-doboz".
Az id szintén nevet ad, de egy fontos megkötéssel:
egy oldalon egyszer szerepelhet. Ez az elem egyedi azonosítója.
Ezt már kétszer használtad:
| Hol? | Mire? |
|---|---|
| 6. lecke | Horgonyok: <h2 id="arak"> → <a href="#arak"> |
| 9. lecke | Űrlapmezők: <input id="nev"> → <label for="nev"> |
id attribútuma lehet (osztályból több is).arak és az Arak két különböző azonosító.<p><a href="#cel">Ugrás a célhoz</a></p> <p id="cel" class="jelolt">ELSŐ elem, id="cel"</p> <p>Köztes szöveg.</p> <p id="cel" class="jelolt">MÁSODIK elem, ugyanaz az id</p>
.jelolt {
background-color: #fce7f3;
padding: 6px 10px;
}
#cel {
border-left: 5px solid #be123c;
}
| class | id | |
|---|---|---|
| Hányszor fordulhat elő? | Akárhányszor | Oldalanként egyszer |
| Egy elemen hány lehet? | Több is, szóközzel elválasztva | Csak egy |
| CSS-ben így hivatkozol rá | .osztalynev (pont) | #azonosito (kettőskereszt) |
| Mire használjuk? | Stílusozásra — ez a fő eszköz | Horgonyhoz, a label for attribútumához, JavaScripthez |
Stílusozáshoz mindig class attribútumot használj, még akkor is,
ha az adott elemből csak egy van az oldalon. Két okból:
id a CSS-ben „erősebb", mint az osztály — és ez később megnehezíti a felülírását. (Erről a 15. leckében, a specificitásnál lesz szó.)<div class="fejlec">...</div> <div class="lablec">...</div>
<h2 id="kapcsolat" class="cim"> Kapcsolat </h2>
A jobb oldali példa mutatja, hogy a kettő békésen megfér egymás mellett: az
id a horgonynak szól, a class a stílusnak.
Az osztálynév az egyetlen hely, ahol te adsz jelentést a kódnak. Ezért érdemes odafigyelni rá — és van egy szabály, ami mindennél fontosabb.
Ne azt nevezd meg, hogyan néz ki, hanem azt, mi az. A megjelenés meg fog változni; a szerep nem.
| ✘ Kinézet alapján | ✔ Szerep alapján | Mi a baj a bal oldalival? |
|---|---|---|
.piros-szoveg |
.hibauzenet |
Ha holnap narancssárga lesz, az osztály neve hazudni fog. |
.bal-oszlop |
.oldalsav |
Telefonon nem lesz bal oldalon — alulra kerül. |
.nagy-betu |
.kiemelt-ar |
Nem derül ki, miért nagy. Hat hónap múlva nem mered átírni. |
.doboz2 |
.termekkartya |
Semmit nem mond. Mi volt a doboz1? Hol a doboz3? |
arlista, ne Árlista.termek-kartya.2-doboz érvénytelen.
Szakmai környezetben az angol a szokás (.product-card). Tanuláshoz
viszont a magyar név sokkal érthetőbb, ezért ebben a tananyagban végig magyarul
nevezünk el mindent. A lényeg a következetesség — a kettőt egy projekten belül
ne keverd.
Ha egy weboldalt nézel, próbálj dobozokat látni benne: a fejléc egy doboz, benne a logó és a menü; a tartalom egy doboz, benne kártyák; minden kártya megint doboz. Ez a szemlélet fogja megkönnyíteni az egész CSS-t.
<div class="oldal">
<div class="fejlec">
<h1>Anna konyhája</h1>
<ul>
<li><a href="index.html">Kezdőlap</a></li>
<li><a href="receptek.html">Receptek</a></li>
</ul>
</div>
<div class="tartalom">
<div class="kartya">
<h3>Rakott krumpli</h3>
<p>60 perc</p>
</div>
<div class="kartya">
<h3>Lecsó</h3>
<p>35 perc</p>
</div>
</div>
<div class="lablec">
<p>© 2026 Anna konyhája</p>
</div>
</div>
.fejlec, .tartalom, .lablec {
border: 2px dashed #be123c;
padding: 8px 12px;
margin-bottom: 10px;
}
.kartya {
border: 1px solid #9ca3af;
padding: 6px 10px;
margin-bottom: 8px;
}
Egymásba ágyazott div-eknél nagyon könnyű elveszni a záró tagek között.
Két segítség: Shift+Alt+F a formázáshoz, és egy komment a hosszabb
blokkok végére: </div><!-- /fejlec -->.
Amint megtanulod a div-et, jön a kísértés, hogy mindent abba tegyél.
Ennek külön neve is van a szakmában: „divitis".
<div class="cim">
<h1>Anna konyhája</h1>
</div>
<div class="szoveg">
<p>Üdv az oldalamon!</p>
</div>
<div class="lista">
<ul>
<li>Receptek</li>
</ul>
</div>
<h1>Anna konyhája</h1> <p>Üdv az oldalamon!</p> <ul> <li>Receptek</li> </ul>
A bal oldali példa minden dobozába egyetlen elem került. Ezeknek semmi hasznuk:
a h1-nek, a p-nek és az
ul-nek közvetlenül is adhatsz osztályt, ha kell.
Kérdezd meg magadtól: „Ha kitörölném ezt a div-et, elromlana
valami?" Ha a válasz nem — akkor nincs is rá szükség.
Feltűnhetett, hogy a fenti oldalvázban minden doboz div volt:
div.fejlec, div.tartalom,
div.lablec. Ez működik, és ebben a tananyagban végig így fogunk
dolgozni.
A modern HTML-ben viszont vannak beszélő nevű dobozok is —
<header>, <nav>,
<main>, <section>,
<article>, <footer> —, amelyek
pontosan úgy viselkednek, mint a div, csak van saját
jelentésük. Ezeket hívjuk szemantikus elemeknek.
Most azért maradunk a div-nél, mert így egy dolgot kell
megtanulni, és a figyelem a szerkezetre meg a CSS-re irányulhat. Ha a
div-es gondolkodás a helyére került, a szemantikus elemekre való
áttérés mindössze névcsere lesz — és pontosan ez lesz a következő tananyag első témája.
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Egy mondat közepén ki szeretnél emelni két szót, de nem akarod, hogy új sorba kerüljenek. div vagy span?
span — soron belüli elem, nem töri meg a szövegfolyamot. (De előbb gondold végig: nem illik-e oda inkább egy strong vagy em, aminek jelentése is van.)
2. Mit jelent ez: class="gomb elsodleges nagy"?
Az elemen három osztály van: gomb, elsodleges és nagy. Mindhárom szabálya érvényes rá. A szóköz elválaszt, nem összeköt.
3. Az oldaladon egy darab fejléc van. Adj neki id="fejlec"-et vagy class="fejlec"-et?
Stílusozáshoz class attribútumot — még akkor is, ha csak egy van belőle. Az id a CSS-ben „erősebb", ami később megnehezíti a felülírását, és ami ma egy darab, holnap kettő lehet. id akkor kell, ha horgonnyal vagy a label for attribútumával hivatkozol rá.
4. Miért rossz osztálynév a .piros-szoveg?
Mert a kinézetet írja le, nem a szerepet. Ha holnap úgy döntesz, hogy a hibaüzenet narancssárga legyen, két rossz választásod marad: vagy hazudik a név (piros osztály, narancssárga szöveg), vagy át kell írnod minden helyen. A .hibauzenet név a szerepet nevezi meg, és az nem változik.
5. Két elem kapta ugyanazt az id értéket. Mi történik?
A CSS-stílus mindkettőre hatni fog (a böngésző megbocsátó), de a #-os horgony csak az elsőre ugrik, és a JavaScript is csak az elsőt találja meg. Nem látványos hiba — épp ezért nehéz megtalálni.
6. Melyik a blokkszintű és melyik a soron belüli: p, a, ul, strong, div, img?
Blokkszintű: p, ul, div — új sorban kezdődnek és kitöltik a szélességet. Soron belüli: a, strong, img — a szövegfolyamban maradnak, és csak annyi helyet foglalnak, amennyi a tartalmuk.
7. Egyetlen <h2>-t becsomagolsz egy <div class="cim">-be. Jó ötlet?
Általában nem: ez „divitis". Az osztályt közvetlenül a h2-re is ráteheted: <h2 class="cim">. A teszt: „ha kitörölném ezt a div-et, elromlana valami?" Ha nem, akkor felesleges.
8. Miért nem lehet szóköz egy osztálynéven belül?
Mert a szóköz a class értékében elválasztó: több osztálynevet választ el egymástól. A class="nagy doboz" két osztályt jelent. Ha egy név két szóból áll, kösd össze kötőjellel: nagy-doboz.
p, div, ul). Soron belüli: a szövegfolyamban marad (a, strong, span).display tulajdonsággal átállítható (18. lecke).div és a span üres doboz: nincs saját jelentésük. Az osztálynévtől kapják.div = blokkszintű csoportosítás · span = soron belüli részlet.span a végső megoldás — előbb keresd a jelentéses elemet (strong, em, code, abbr).class akárhányszor előfordulhat, és egy elemen több is lehet, szóközzel elválasztva.id oldalanként egyedi, egy elemen csak egy lehet.class; az id horgonyhoz, a label for attribútumához és JavaScripthez való..hibauzenet, nem .piros-szoveg.div-et, ahol tényleg csoportosítasz valamit.header, nav, main…) ugyanígy működnek, csak van jelentésük — azok a következő tananyag témái.Ezzel megvan minden alapvető HTML-elem: szöveg, listák, linkek, képek, táblázatok, űrlapok és dobozok. Innentől a megjelenés következik. A 12. leckétől kezdve ugyanezeket az oldalakat fogod széppé tenni — és mostantól minden példában látni fogod, mire jó az, hogy rendes szerkezetet építettél.