Front-end fejlesztés

h1 és az article elem

A HTML5 első blikkre bonyolultnak tűnhet a jól megszokott, <h1>-től <h6>-ig megoldáshoz képest, azonban ezen kis leírásból mindenki számára egyértelmű lesz az, hogy milyen kapcsolatban áll az <article> és a <h1> bekezdésünk. Ahhoz, hogy magyarázatom 100%-ig érhető legyen úgy érzem, úgy a legegyszerűbb, ha kiindulunk egy HTML4 kódból. Egy teljesen általános cikk HTML4-ben az alábbiak szerint néz ki, és ez is használatos leginkább manapság még:

<div class="entry">
<p class="post-date">2012. Május 31.</p>
<h2><a href="#" rel="bookmark" title="Bejegyzés címe">Bejegyzés címe</a></h2>
...
</div>

Itt látható a már megszokott struktúra, vagyis, hogy a bejegyzésünk címe <h2> bekezdésbe kerül, mivel <h1>-be HTML4 esetében minden bizonnyal tegyük fel a kategória került. Ez ebben a formában teljesen helyesnek mondható és egyébként ez egy érvényes HTML5 kód. HTML5-ben azonban már az <article> elemet használjuk a cikkek jelölésére. Ezzel az elemmel és még pár társával, így néz ki a cikkünk:

<article>
<header>
<time datetime="2012-05-31" pubdate>2012. Május 31.</time>
<h1><a href="#" rel="bookmark" title="Bejegyzés címe">Bejegyzés címe</a></h1>
</header>
...
</article>

Jól látható, hogy több jelentéstükröző elem is került a kódunkba. A time-ról későbbiekben még biztosan lesz szó, most szorítkozzunk a lényegre, vagyis a bekezdésünkre. A <h2>-ből <h1> lett és ezt egy <header> elembe tettük bele. Az egészet pedig ugyebár a már említett <article> azaz cikk elembe. A <header> elemet, nem csak arra használjuk, hogy megadjuk vele a weboldalunk fejlécét, hanem arra is, hogy meghatározzuk, beburkoljuk vele a cikk fejlécét. Tehát teljesen a logikán alapul a felépítése, mint egyébként, aki beleássa magát a HTML5-be meglátja, az egész ezen alapszik. SEO szakik, akik nem ismerik a HTML5-öt, már sikítanak is biztosan, hogy: “De hát csak egy h1 lehet az oldalon!” Igen, HTML4-ben ezt szoktuk meg. h1-től h6-ig elosztottuk a dolgokat, fontos és kevésbé fontos elv alapján.

De akkor mi történik? A válasz a HTML5 algoritmusában keresendő. HTML5-ben az algoritmus az <article> elemmel, egy új szakaszt, csomópontot hoz létre a dokumentumvázlatunkban és a HTML5-ben minden ilyen szakasznak lehet <h1> eleme.

Ez azért előnyös, mert hasonló felépítésben, ilyen cikket bárhová elhelyezhetünk úgy, hogy <h1> van benne és nem rúgunk fel vele semmilyen szabályt, ellentétben a HTML4-el, mert az <article> egy szakaszoló elem. Ha még inkább élesben szeretnétek látni ezt, akkor egyszerűen nézzétek meg a blog forráskódját az efrud.hu-n.