Kezdőoldal » Számítástechnika » Weblapkészítés » Mire jók a <header>, <aside>,...

Mire jók a <header>, <aside>, <footer> tag-ek HTML-ben?

Figyelt kérdés
Néztem mintákat rájuk, de nagy hasznukat nem láttam. Annyit csinálnak, hogy a <p> fölé (a <header>), illetve alá (a <aside>) rakja sortöréssel? A <footer> meg lábjegyzet akar lenni (,mert ez a weblapon semmiben se különbözik nálam attól, mintha egy sima paragrafust raktam volna be)
2015. ápr. 15. 18:35
 1/9 anonim ***** válasza:
Normál esetben a html tagek csak jelölik (pl keresők, felolvasók számára), hogy milyen típusú tartalom jön. CSS-el úgyis felül írod a kinézetet.
2015. ápr. 15. 19:13
Hasznos számodra ez a válasz?
 2/9 A kérdező kommentje:
Szóval ezek arra jók, hogy css-ben tudok hivatkozni rájuk, de önmagukban semmit nem változtatnak a szövegen?
2015. ápr. 15. 19:19
 3/9 anonim ***** válasza:

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.

2015. ápr. 15. 19:38
Hasznos számodra ez a válasz?
 4/9 A kérdező kommentje:
Amit írtam az csak az interneten találd példákban látszódtak (de ott se használtak semmi mást csak a tageket meg pár minta szöveget), mikor én próbáltam semmi nem változott, de érthető, köszönöm!
2015. ápr. 15. 19:48
 5/9 Drone007 ***** válasza:
Véleményem szerint a a html5 újításai közül a leghaszontalanabb tagek. Bár ez szubjektív vélemény :)
2015. ápr. 15. 20:48
Hasznos számodra ez a válasz?
 6/9 2xSü ***** válasza:
1%

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.

2015. ápr. 16. 02:22
Hasznos számodra ez a válasz?
 7/9 Drone007 ***** válasza:

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...

2015. ápr. 16. 10:52
Hasznos számodra ez a válasz?
 8/9 2xSü ***** válasza:

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.

2015. ápr. 16. 11:52
Hasznos számodra ez a válasz?
 9/9 anonim ***** válasza:

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. :)

2015. ápr. 17. 14:28
Hasznos számodra ez a válasz?

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!