HTML & CSS för nybörjare (Del 19): Semantik för webben (2)

För närvarande är HTML-dokument vanligtvis strukturerade med hjälp av div-element. Formateringen och positioneringen av dessa behållare utförs vanligtvis genom CSS. För programvara som skärmläsare är detta tillvägagångssätt naturligtvis meningslöst eftersom de inte kan känna av vilken betydelse vissa innehåll har. Detta ska ändras genom de nya strukturelementen.

Två av de viktigaste nya elementen är sektion och artikel, som står i fokus för denna handledning.

Markera artiklar

Genom article-elementet kan texter (foruminlägg, tidningsartiklar etc.) markeras som artiklar. Följande exempel visar definitionen av en typisk artikel.

<article>
   <h1>Skapa webbappar (Del 09): jQuery mobile (1)</h1>
   <p>jQuery är otvivelaktigt ett av de mest kända JavaScript-ramverken. På "klassiska" webbplatser används jQuery därför redan tusentals gånger ...</p>
   ...
</article>

Tack vare article-elementet kan ni alltså strukturera era innehåll semantiskt.

Hur något sådant kan se ut kan visas mycket tydligt med hjälp av en blogg.

<article>
  <header>
    <h1>Skapa webbappar (Del 09): jQuery mobile (1)</h1>
    <p>Publicerad den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery är otvivelaktigt ett av de mest kända JavaScript-ramverken. På "klassiska" webbplatser används jQuery därför redan tusentals gånger ...</p>
  ...
  <footer>
    <p><small>Upphovsrätt av PSD-Tutorials.de</small></p>
  </footer>
</article>

I det här exemplet görs den mycket typiska uppdelningen i huvud-, huvud- och sidfot inom article-elementet. En sådan uppdelning finns väldigt ofta i bloggar.

Skapa sektioner

Nästa steg är med section-elementet. Elementet section delar upp sidan i olika avsnitt. Det kan till exempel vara avsnitt, kapitel, flikar osv. Genom section kan områden som inledning och aktuella meddelanden logiskt separeras från varandra.

section används för att dela upp innehållet efter faktiskt innehållsmässiga aspekter. Jag kommer förresten att prata mer om skillnaden mellan section och div mot slutet av den här handledningen.

Följande exempel visar en typisk bloggstruktur. Denna struktur innehåller dock något mer som faktiskt behövs i många bloggar, nämligen ett kommentarområde. Detta kommentarområde är definierat inom ett section-element. De enskilda kommentarerna inom section-området kapslas sedan in i var sitt article-element.

<article>
  <header>
    <h1>Skapa webbappar (Del 09): jQuery mobile (1)</h1>
    <p>Publicerad den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery är otvivelaktigt ett av de mest kända JavaScript-ramverken. På "klassiska" webbplatser används jQuery därför redan tusentals gånger...</p>
  ...

  <section>
    <h2>Kommentarer</h2>
    <article>
      <header>
      <h3>Kommenterad av: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">För en timme sedan</time></p>
    </header>
    <p>Tack för handledningen!</p>
    </article>
    <article>
      <header>
      <h3>Kommenterad av: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">För två timmar sedan</time></p>
    </header>
    <p>Toppen! Det hjälper mig framåt.</p>
    </article>
  </section>
</article>

Här är en påminnelse om att jag kommer att prata mer utförligt om de element som också används här, såsom header, footer osv. På den här punkten så mycket: Genom dessa element kan innehållet delas in i huvud- och sidofotdelar och möjliggör således en ytterligare logisk strukturering av dokumenten.

Ett annat exempel som tydliggör kombinationen av article- och section-element är inte heller nödvändigt. I själva verket kan du använda section-elementet för att dela upp en artikel i logiska innehållsområden som var och en har sina egna rubriker.

<article> 
  <h1>App-utveckling</h1> 
  <p>Här kan du läsa om hur man skapar webbappar.</p>
  <section> 
     <h2>Skapa webbappar (Del 09): jQuery mobile (1)</h2> 
     <p>jQuery är otvivelaktigt ett av de mest kända JavaScript-ramverken.</p> 
   </section> 
  <section> 
     <h2>Skapa webbappar (Del 08): Snabbstart i jQuery</h2> 
     <p>JavaScript är bra för webbplatser, då det är möjligt att göra en rad intressanta saker med det.</p> 
   </section> 
 </article>

Dessutom är det möjligt att inom ett section-element definiera article-element. Ett typiskt exempel kan vara ett kommentarområde, som redan har visats. Det är dock också möjligt att dela in sektionen i de ämnesområden som behandlas på bloggen.

Också här är ett motsvarande exempel:

<section> 
  <h1>Apputveckling</h1>
  <article> 
     <h2>Skapande av webbappar (Del 09): jQuery mobile (1)</h2> 
     <p>jQuery är utan tvekan en av de mest kända JavaScript-ramverken.</p> 
   </article> 
  <article> 
     <h2>Skapande av webbappar (Del 08): Snabbstart i jQuery</h2> 
     <p>JavaScript är bra för webbsidor, slutligen kan man göra en mängd intressanta saker med det.</p> 
   </article>    
 </section>

Även andra <section>-element kan finnas i ett section-element. Inbäddning är alltså tillåten. Här är ett exempel:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Välkommen</h2>     
      <p>Vi ser fram emot...</p>
    </section>   
    <section>     
      <h2>Handledning</h2>
      <p>Här finns våra senaste handledningar...</p> 
    </section>
    <aside>
      <p>Kontakt</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Denna inbäddning av section ger följande struktur:

1. PSD-Tutorials.de

1.1 Välkommen

1.2 Handledning

1.3 Kontakt

2. (c) 2014 PSD-Tutorials.de
   
   Denna typ av struktureringar är också möjliga.
   
   

Skillnaden mellan div, article och section

Det är medgivetvis inte helt enkelt att förstå avgränsningen mellan div, article och section. Faktum är att article-elementet primärt definierades för strukturering av blogginlägg. Section-elementet är egentligen beläget en nivå under article. Inom section-elementet bör det också alltid finnas en rubrik definierad. Även om en rubrik faktiskt inte definieras, borde det åtminstone teoretiskt sett vara möjligt att ange en rubrik inom det aktuella elementet.

Naturligtvis är inte div-elementen förkastliga i HTML5, utan ska fortfarande användas. De är intressanta till exempel när det handlar om att samla element.

Slutligen, en påminnelse om de visuella effekterna av de hittills presenterade elementen. Faktum är att för att formatera dem behöver du CSS. Elementens vanliga användning har ingen effekt i webbläsaren. Du strukturerar här endast innehåll på ett semantiskt sätt. Allt som har med optiken att göra styrs via stilmallar.