HTML és CSS kezdőknek (Rész 19): Szemantika a weben (2)

Jelenleg az HTML dokumentumokat általában div elemekkel strukturálják. Ezeknek a konténereknek a formázása és elhelyezése általában CSS segítségével történik. Az ilyen megközelítés természetesen haszontalan az olyan szoftverek számára, mint a képernyőolvasók, mivel nem ismerik fel, hogy az egyes tartalmaknak milyen jelentősége van. Ezt a helyzetet az új strukturálási elemek változtatják meg.

Két fontos új elem közé tartozik a section és az article, amelyek erre a tutoriálisra összpontosítanak.

Cikkek megjelölése

A article elem segítségével szövegeket (fórumbejegyzések, újságcikkek stb.) cikkeként lehet megjelölni. Az alábbi példa bemutatja egy tipikus cikk definícióját.

<article>
   <h1>Web-alkalmazások létrehozása (9. rész): jQuery mobile (1)</h1>
   <p&gt>A jQuery kétségtelenül az egyik legismertebb JavaScript keretrendszer. Az „általános” weboldalakon ezért a jQuery már ezerszer használatban van...</p>
   ...
</article>

A article elemnek köszönhetően a tartalmakat szemantikusan strukturálhatjátok.

Egy ilyen megoldás kinézete nagyon szépen megtekinthető egy blog példáján keresztül.

<article>
  <header>
    <h1>Web-alkalmazások létrehozása (9. rész): jQuery mobile (1)</h1>
    <p&gt>Közzétéve: <time pubdate="pubdate">2014.05.24</time></p>
  </header>
  <p&gt>A jQuery kétségtelenül az egyik legismertebb JavaScript keretrendszer. Az „általános” weboldalakon ezért a jQuery már ezerszer használatban van...</p>
  ...
  <footer>
    <p><small>Szerzői jog PSD-Tutorials.de által</small></p>
  </footer>
</article>

Ebben a példában az article elemen belül a fejléc-, fő- és lábléc részek tipikus felosztása történik. És ez a felosztás nagyon gyakori a blogokban.

Szekciók létrehozása

Folytatom a section elemmel. A section elem feloszlatja az oldalt különböző szekciókra. Ezek például szekciók, fejezetek, lapok stb. lehetnek. A section segítségével például logikailag elválaszthatók az olyan területek, mint az előszó és az aktuális hírek.

Az section az tartalmak tényleges tartalmi szempontok szerinti felosztását szolgálja. A section és a div közötti különbségről később ebben a tutoriálisban fogok még beszélni.

A lentebb olvasható példa bemutat egy tipikus blogstruktúrát. Azonban ez a struktúra tartalmaz még valamit, amire sok blogban valóban szükség van, ez pedig egy hozzászólási szekció. Ez a hozzászólási szekció egy section elemen belül van meghatározva. A section területen belüli egyes hozzászólások pedig külön article elembe kerülnek beágyazva.

<article>
  <header>
    <h1>Web-alkalmazások létrehozása (9. rész): jQuery mobile (1)</h1>
    <p&gt>Közzétéve: <time pubdate="pubdate">2014.05.24</time></p>
  </header>
    <p&gt>A jQuery kétségtelenül az egyik legismertebb JavaScript keretrendszer. Az „általános” weboldalakon ezért a jQuery már ezerszer használatban van...</p>
  ...

  <section>
    <h2>Hozzászólások</h2>
    <article>
      <header>
      <h3>Hozzászólt: Hírekbarát</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Egy órája</time></p>
    </header>
    <p&gt>Köszönöm a tutoriált!</p>
    </article>
    <article>
      <header>
      <h3>Hozzászólt: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Két órája</time></p>
    </header>
    <p&gt>Nagyszerű! Ez segít nekem tovább.</p>
    </article>
  </section>
</article>

Itt ismét hangsúlyoznám, hogy az itt szereplő elemeket, mint a header, footer stb. természetesen később részletesen meg fogom beszélni. Ebben a pontban csak annyit: Ezekkel az elemekkel lehet a tartalmakat a fejléc és lábléc részekre osztani, így továbbá lehetővé teszik a dokumentumok további logikus strukturálását.

Egy másik példa szemlélteti az article és section elemek kombinációját. Valójában a section elemet arra lehet használni, hogy egy cikket logikai tartalomterületekre osszon, amelyek saját fejlécekkel rendelkeznek.

<article> 
  <h1>Web-alkalmazások fejlesztése</h1> 
  <p>Itt megtudhatjátok, hogyan lehet web-alkalmazásokat készíteni.</p>
  <section> 
     <h2>Web-alkalmazások létrehozása (9. rész): jQuery mobile (1)</h2> 
     <p&gt>A jQuery kétségtelenül az egyik legismertebb JavaScript keretrendszer.</p> 
   </section> 
  <section> 
     <h2>Web-alkalmazások létrehozása (8. rész): Gyors bevezető a jQuery-be</h2> 
     <p&gt>A JavaScript egy remek dolog weboldalak számára, hiszen számtalan érdekes dologra lehet használni.</p> 
   </section> 
 </article>

Egy section elemen belül article elemeket meghatározni szintén lehetséges. Egy tipikus példa erre lehet egy hozzászólási terület, ahogy azt már korábban bemutattuk. Az is elképzelhető, hogy a szekciót az általad megosztott blogtéma területeire bontod.

Itt ismét egy ehhez megfelelő példa:

<section> 
  <h1>App-fejlesztés</h1>
  <article> 
     <h2>Web-Apps készítése (Rész 09): jQuery mobile (1)</h2> 
     <p>A jQuery kétségtelenül az egyik legismertebb JavaScript-keretrendszere.</p> 
   </article> 
  <article> 
     <h2>Web-Apps készítése (Rész 08): A gyors bevezetés a jQuery-be</h2> 
     <p>A JavaScript nagyszerű dolog a weboldalak számára, hiszen számos érdekes dolog megvalósítására lehetőséget biztosít.</p> 
   </article>    
 </section>

Ezenkívül egy section elemen belül más section elemek is lehetnek. A fésülések tehát engedélyezettek. Erre is egy példa:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Üdvözöljük</h2>     
      <p>Örömmel fogadunk...</p>
    </section>   
    <section>     
      <h2>Oktatóanyagok</h2>
      <P>Itt találhatóak legújabb oktatóanyagaink...</p> 
    </section>
    <aside>
      <p>Kapcsolat</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Ez a section fésülés a következő struktúrát eredményezi:

1. PSD-Tutorials.de

1.1 Üdvözöljük

1.2 Oktatóanyagok

1.3 Kapcsolat

2. (c) 2014 PSD-Tutorials.de
   
   Ilyen Fésülések tehát szintén lehetségesek.
   
   

A különbség a div, article és a section között

Be kell vallanom, hogy nem egyszerű megérteni a div, article és a section elkülönítését. Valójában az article elemet elsősorban a blogbejegyzések strukturálására határozták meg. A section elemet tulajdonképpen egy szinttel lejjebb helyezkedik el az article alatt. A section elemen belül mindig definiálni kell egy fejlécet. Még ha valójában nincs meghatározva fejléc, akkor is legalább elméletileg lehetséges kell, hogy legyen egy fejléc megadása az érintett elemen belül.

Nyilvánvalóan a div elemek sem tabuak az HTML5-ben, és továbbra is használni kell őket. Érdekesek például mindig akkor, amikor elemeket össze kell fogni.

Végül még egy megjegyzés a megjelenésbeli hatásokkal kapcsolatban, amelyeket eddig bemutattunk. Valójában a megfelelő formázáshoz szükséges a CSS. A bemutatott elemek normál használata ugyanis nem eredményez hatást a böngészőben. Tehát csak tartalmakat strukturálunk szemantikusan. Az összes megjelenéssel kapcsolatos dolgot stíluslapokkal állítjuk be.