26 HTML alajaotused

Veebilehe struktuuri loomisel saame kasutada HTML keeles eksisteerivaid semantilisi elemente, millega jaotada veebileht erinevateks tähenduslikeks osadeks. Näiteks saame veebilehe osi, mis jaotavad veebilehe osadeks nagu navigatsioon, päis, jalus, artikkel jm.

Mõned kasutusel olevad semantilised elemendid:

<main> – veebilehe põhisisu
<header> – veebilehe sisuosa päises olev info (mitte segi ajada <head> elemendiga)
<footer> – veebilehe jaluses olev info
<nav> – veebilehe navigatsioon/menüü
<section> – sektsioon, peatükk
<article> – artikkel
<aside> – ääremärkus
<address> – kontaktinformatsioon

Lehe sisu põhiosa

Veebilehe sisu põhiosa defineerimiseks võib kasutada elementi <main>, mille sisuks võivad olla artiklid, ääremärkused jne. Põhiosa peab sisaldama lehe unikaalset sisu, mis ei kordu lehestiku servadel ja mujal.

Element <main> ei tohi olla <article>, <aside>, <footer>, <header> ja <nav> elementide tütarelemendiks.

Näiteks:

<main>
  <header> … </header>
    <article>
      <section> … </section>
      <section> … </section>
      …
    </article>
    <article> … </article>
  <footer> … </footer>
</main>

Artikkel

Artikkel ehk element <article> sisaldab iseseisvat sisu (mida saab ka ülejäänud lehest eraldi levitada). Tüüpiliselt on <article> elemendi sisuks foorumi või blogi postitused, uudislood või kommentaarid.

<article>
  <h1>Kaspersky Lab piilus 2030. aastasse: inimene ei kao</h1>
  <p>Tehnoloogia arengu praeguse tempo püsimine viib inimkonna väga kiiresti uude, täiendatud tegelikkuse, kvantarvutite, pilvehoidlate ning mitte inimeste, vaid masinate vahel peetavate infosõdade ajastusse.</p>
</article>

Sektsioon

Sektsioon jagab dokumendi sisu osadeks, näiteks peatükkideks. Sektsioon võib olla näiteks osa artiklist või ka vastupidi, artikkel võib olla osa sektsioonist.

<section>
  <h2>Pealkiri</h2>
  <p>See siin ongi sisu, mis antud sektsiooni lisatud</p>
</section>

Ääremärkus/täiendav info

Ääremärkuste laadse täiendava info lisamiseks mingi sisuga elemendile kasutatakse elementi <aside>. Selle elemendi sisu võiks olla seotud ümbritseva sisuga.

<p>Tallinn oli keskajal tuntud kaubanduskeskus ning kuulus Hansa Liitu</p>
<aside>
  <h5>Hansa Liit</h5>
  <p>Hansa Liit oli 13.–17. sajandil tegutsenud Põhja-Saksamaa, Skandinaaviamaade, Madalmaade ja Liivimaa linnade kaubanduslik ja poliitiline liit.</p>
</aside>

<aside> elemendi sisu võib paigutada näiteks artikli (element <article>) kõrvale.

Päis ja jalus

Terve dokumendi või selle sektsiooni sissejuhatava informatsiooni või navigatsiooni jaoks kasutatakse päist ehk elementi <header>. Näiteks:

<section>
  <header>
    <h1>Esimene peatükk</h1>
    <p>See siin on pikem jutt päises</p>
  </header>
</section>

Terve dokumendi või sektsiooni jalus defineeritakse elemendiga <footer>. Jalusesse lisatakse info teda sisaldava elemendi kohta (info autori kohta, dokumendi loomise kuupäev jms peenes kirjas info). Näiteks:

<section>
  <footer>
    <p>Selles peatükis oli hulk tarka juttu!</p>
  </footer>
</section>

Navigatsiooniblokk

Hüperlinkide kogumi ehk navigatsiooniploki defineerimiseks kasutatakse elementi <nav>. Element on kasulik näiteks vaegnägijatele mõeldud ekraanilugejate puhul, mis võivad selliselt grupeeritud linkide ettelugemise vahele jätta. Näiteks:

<nav>
  <a href="teine.html">Teine</a>
  <a href="kolmas.html">Kolmas</a>
  <a href="neljas.html">Neljas</a>
</nav>

Litsents

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Veebidisain by Koostaja: Mikk Oad; Tekst: Andrus Rinde, Mikk Oad is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Jaga seda raamatut