HTML & CSS for begyndere (Del 19): Semantik for web (2)

I øjeblikket struktureres HTML-dokumenter primært ved hjælp af div-elementer. Formateringen og positioneringen af disse containere sker som regel med CSS. For software som skærmlæsere er denne tilgang naturligvis ubrugelig, da de ikke kan genkende, hvilken betydning visse indhold har. Dette skal ændres med de nye strukturelementer.

To af de vigtigste nye elementer er afsnit og artikel, som er i fokus i denne vejledning.

Mærkning af artikler

Ved hjælp af article-elementet kan tekster (forumindlæg, avisartikler osv.) mærkes som artikler. Det følgende eksempel viser definitionen af en typisk artikel.

<article>
   <h1>Opret web-apps (Del 09): jQuery mobile (1)</h1>
   <p>jQuery er utvivlsomt et af de mest kendte JavaScript-rammearbejder. På "klassiske" websider bliver jQuery derfor allerede brugt tusindvis af gange...</p>
   ...
</article>

Takket være article-elementet kan I altså strukturere jeres indhold semantisk.

Hvordan det kan se ud, kan man meget godt vise ved hjælp af en blog.

<article>
  <header>
    <h1>Opret web-apps (Del 09): jQuery mobile (1)</h1>
    <p>Offentliggjort den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery er utvivlsomt et af de mest kendte JavaScript-rammearbejder. På "klassiske" websider bliver jQuery derfor allerede brugt tusindvis af gange...</p>
  ...
  <footer>
    <p><small>Ophavsret ved PSD-Tutorials.de</small></p>
  </footer>
</article>

I dette eksempel foretages en meget typisk opdeling i hoved-, hoved- og fodsektion inden for article-elementet. En sådan opdeling findes meget ofte på blogs.

Oprettelse af sektioner

Næste element er section-elementet. Section-elementet opdeler siden i forskellige sektioner. Det kan f.eks. være sektioner, kapitler, faner osv. Ved hjælp af sektionen kan områder som introduktion og aktuelle nyheder logisk adskilles.

section bruges til at opdele indholdet efter reelt indholdsmæssige hensyn. Jeg vil for øvrigt komme ind på forskellen mellem section og div igen i slutningen af denne vejledning.

Det følgende eksempel viser en typisk blogstruktur. Denne struktur inkluderer dog noget, som faktisk er nødvendigt i mange blogs, nemlig et kommentarområde. Dette kommentarområde er defineret inden for et section-element. De enkelte kommentarer inden for section-området er igen indrammet af hvert sit article-element.

<article>
  <header>
    <h1>Opret web-apps (Del 09): jQuery mobile (1)</h1>
    <p>Offentliggjort den: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery er utvivlsomt et af de mest kendte JavaScript-rammearbejder. På "klassiske" websider bliver jQuery derfor allerede brugt tusindvis af gange...</p>
  ...

  <section>
    <h2>Kommentarer</h2>
    <article>
      <header>
      <h3>Kommenteret af: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">For en time siden</time></p>
    </header>
    <p>Tak for vejledningen!</p>
    </article>
    <article>
      <header>
      <h3>Kommenteret af: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">For to timer siden</time></p>
    </header>
    <p>Fantastisk! Det hjælper mig videre.</p>
    </article>
  </section>
</article>

Her er det værd at bemærke, at jeg naturligvis vil komme ind på elementer som header, footer osv., som også bruges her. På dette tidspunkt vil jeg blot sige: Disse elementer gør det muligt at opdele indholdet i hoved- og fodblokke, hvilket giver en yderligere logisk strukturering af dokumenter.

Endnu et eksempel skal illustrere kombinationen af article- og section-elementer. Det er faktisk også muligt at definere article-elementer inden for et section-element. Et typisk eksempel er et kommentarområde, som allerede blev vist. Det er også muligt at opdele sektionen i de emner, der behandles i bloggen.

Også her er et passende eksempel:

<section>
  <h1>App-udvikling</h1>
  <article>
     <h2>Oprettelse af webapps (del 09): jQuery mobil (1)</h2>
     <p>jQuery er utvivlsomt et af de mest kendte JavaScript-frameworks.</p>
   </article>
  <article>
     <h2>Oprettelse af webapps (del 08): Hurtig start til jQuery</h2>
     <p>JavaScript er en fin ting for hjemmesider, da der kan gøres mange spændende ting med det.</p>
   </article>
</section>

Derudover kan der være andre section-elementer inde i et section-element. Indlejring er tilladt. Her er et eksempel:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>
      <h2>Velkommen</h2>
      <p>Vi er glade...</p>
    </section>
    <section>
      <h2>Tutorials</h2>
      <p>Her er vores nyeste tutorials...</p>
    </section>
    <aside>
      <p>Kontakt</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Denne section-indlejring resulterer i følgende struktur:

1. PSD-Tutorials.de

1.1 Velkommen

1.2 Tutorials

1.3 Kontakt

2. (c) 2014 PSD-Tutorials.de
   
   Sådanne struktureringer er også mulige.
   
   

Forskellen mellem div, article og section

Det er indrømmet ikke helt let at forstå forskellen mellem div, article og section. Faktisk blev article-elementet primært defineret til strukturering af blogindlæg. Section-elementet er faktisk en niveau under article. Inde i section-elementet bør der altid defineres en overskrift. Selvom der faktisk ikke defineres en overskrift, bør det teoretisk set være muligt at angive en overskrift inden for det pågældende element.

Selvfølgelig er div-elementer heller ikke uønskede i HTML5 og bør stadig bruges. Disse er fx interessante, når det drejer sig om at gruppere elementer.

Endelig et tip om de visuelle virkninger af de hidtil introducerede elementer. Faktisk kræver du CSS til formatering. Den normale brug af de viste elementer har ingen effekt i browseren. Du strukturerer kun indholdet semantisk her. Alt, hvad der vedrører udseendet, styres via stylesheets.