Mire jók a <header>, <aside>, <footer> tag-ek HTML-ben?
Valamit biztos csinálnak, elvégre leírásban elmondtad. De egy valamire való CSS úgyis mindig css resettel kezdődik, ami ezeket nullázza.
A reset lényege, hogy az ilyen előformázásokat (mint amit írtál) kiszedje, és ne szenvedj vele, hogy miért nem sikerül valamit rendesen pozícionálni / méretezni.
Hát nem tudom, nekem hasznosnak tűnnek ezek a tag-ek. Mert hogy épített fel az ember egy honlapot a HTML5 előtt? Valahogy így:
…
<body>
<div id="page">
<div id="header">
<h1>…</h1>
<div id="logo">…</div>
<div id="nav"><ul><li>…</li>…</ul></div>
</div>
<div id="sidebar">
<div class="sidebarbox">
…
</div>
<div class="sidebarbox">
…
</div>
</div>
<div class="section">
<div class="article">
…
</div>
<div class="article">
…
</div>
</div>
</div>
<div id="footer">…</div>
</div>
</body>
Na most ember legyen a talpán, aki ránézésre eldönti, hogy a fenti kódban minden div tag le van-e zárva, hol ér véget a session, vagy ránézve egy kódrészletre – amiben mondjuk nem a legbeszédesebbek az id-k, osztálynevek – be tudja azonosítani, hogy az az <ul> az most felsorolás, menü, vagy mi. Meg egy csomó felesleges gépeléstől is megkímél a HTML5, hiszen sokkal rövidebb egy <nav></nav> leírása, mint egy <div class="nav"></div>. Reguláris kifejezést is nehezebb írni, ami mondjuk az első article-t szedi ki…
Szerintem HTML5-ben ez sokkal áttekinthetőbbé válik:
<body>
<main>
<header>
<h1>…</h1>
<div id="logo">…</div>
<nav><ul><li>…</li>…</ul></nav>
</header>
<aside>
<div>
…
</div>
<div>
…
</div>
</aside>
<section>
<article>
…
</article>
<article>
…
</article>
</section>
<footer>…</footer>
</main>
</body>
Mindjárt könnyebb átlátni, hogy mi micsoda, mettől meddig tart, esetleg hol hiányzik egy lezáró tag, és pontosan mit zár le, stb… Egy csomó felesleges attribútumtól – id-k, class-ek – is meg tud kímélni.
Végül is, ha nem számoljuk, hogy az IE8 nem ismeri ezeket a tageket, a main-t pedig se az IE, se a mobilos standard böngészők nem támogatják, akkor okés. Csak amikor az ügyfél a kész munka végén nyögi be, ahogy az irodában ők IE7-et használnak kötelezően, és az egész egy intranetes szolgáltatásnak indul, akkor van szívás.
Egyébként ebből a szempontból tényleg jók (2xSü), csak lennének fontosabb megoldandó dolgok is, mint a kényelem. Pl. egységes vektoros formátumok, stb...
Itt két kérdést külön kell választani.
1. Úgy alapból a szabványban jó-e, hogy definiáltak ilyen elemeket. Ezt szerintem fentebb megindokoltam. Sok esetben hasznos. Ha valakinek nem, annak ugyanúgy lehetősége van használni a régi megoldásokat. Ez a kérdés alapvetően független attól, hogy amúgy a szabványt – pontosabban ajánlást – elfogadják-e végül, támogatja-e, vagy támogatni fogja-e ez vagy az a böngésző. Mondjuk úgy a kérdés itt inkább az, hogy ha minden böngésző támogatná a világon, akkor érdemes lenne-e használni, lenne-e valamiféle pozitív hozadéka a használatának, lennének-e ellenérvek ellene.
2. A másik kérdés, hogy mára elterjedtek-e annyira a szemantikus elemeket támogató böngészők, hogy nyugodt szívvel lehessen őket használni. (Ez alapvetően ideiglenes probléma, tulajdonképpen a „mire jók a HTML5 szemantikus tag-ek” kérdését önmagában nem érinti.) Ez meg inkább szektor, funkció, megrendelő kérdése. Mondjuk úgy ez alapvetően nem programozástechnikai kérdés, inkább üzletpolitikai, stratégiai döntés. Lehet azt mondani, hogy hát a mi webalkalmazásunkhoz a legújabb böngészők kellenek – mert olyan extra funkciókat tartalmaznak, amit nem, vagy nagyon nagy anyagi, idő, energia befektetéssel lehetne csak megvalósítani –, meg lehet azt mondani, hogy nekünk fontos, hogy azt a kb. 5%-nyi IE8 usert is kiszolgáljuk. Ha a Google dobta már az IE9 támogatását is, ha a Microsoft is dobni fogja 2016 nyarán az IE8 támogatást, akkor egy nagyobb projektnél – aminek a kifutása mondjuk 1 év múlva várható – már nem biztos, hogy érdemes megoldani mindenkinek a problémáját, támogatni az akkorra már várhatóan 1-2%-ra apadó, rendszerint nem a célközönség által használt IE8-at. Persze oké, ha egy sima honlapról van szó, és a megrendelő kéri, hogy IE8 alatt is jól működjön, akkor már el kell gondolkodni azon, hogy használjuk-e a szemantikus tag-eket.
De pont a szemantikus elemek azok, amiket kis trükközéssel – HTML5Shiv, Modernizr – még IE6 alatt is lehet használni, megvannak erre a könnyen használható eszközök. Nem biztos, hogy 100%-osan úgy működnek, mint egy támogatott böngészőben, de a legtöbb esetben azért korrektül működnek. Itt azért nem egy canvas-t, WebGL-t, WebSocket-et, kliens oldali adatbázist, vagy egy video tag-et kell emuláltatni, csak egy sima „mezei” blokk elemet.
Valóban az áttekinthetőség a legfontosabb előnye az új doboz elemeknek, amúgy simán helyettesíthetőek a div tag-gel.
Nyilván 1-2 év múlva egységesebben kezelik majd a böngészők, emiatt ma még kevesebb kockázattal jár a milliónyi egymásba ágyazott div (kommentekkel) mint a header meg a footer és társai.
A különbözések egyik példája - épp a minap futottam bele - az input tag új type tulajdonságainak eltérő kezelése. Firefox-ban pl. a type="url" esetében a nem megfelelő adat begépelésekor blur eseménynél piros színű border-rel és box-shadow-val látja el a böngésző a kérdéses input mezőt, amit más böngésző nem tesz meg.
Amíg ilyen részletekben ekkora eltérés lesz a böngészők között, addig óvatosan szabad csak duhajkodni a html5 ficsöreivel. :)
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!