HTMLi kursuse 5. osa konspekt - Sektsioonielemendid

Postituse enda võid leida siit.

Siinses konspektis soovitaksin elemente (näiteid) inspekteerida, et saada nendest paremini aru

Üldisemalt sektsioonielementidest

Sektsioonielementide ülesanne on lihtne - jagada veebileht/mingi veebilehe osa osadeks.
Sektsioonielemendid (ise olles plokkelemendid) võivad olla emaelementideks nii teistele plokkelementidele kui ka siselementidele.
Sektsioonielemente on kahte tüüpi - tähenduslikud ja mittetähenduslikud.

Sektsioonielemendid ümbritsevad teisi elemente (nagu ka ükskõik, mis emaelemendid) - olen üritanud selle värvidega välja tuua.

Tähenduslikud (kindla otstarbega) sektsioonielemendid

<section> element

<section> defineerib ükskõik, mis (veebilehe) alamosa.

Olen siin konspektis rohelisega ja paksuga ära märkinud praegu käsitleva elemendi. Näidetes olen teinud ka praeguse elemendi tagatausta roheliseks; mitte tähtsate/mitte käsitletavate elementide tagataust on teist värvi (tekst, käsitletav element, abi/muu element, abi/muu element 2).

Kasutus:
<section>
 <!-- Sisu tuleb siia -->
 <p>Minu emaelemendiks on <section> element</p>
</section>

Näide:

Minu emaelemendiks on <section>


<header> element

<header> defineerib ära mingi alam(osa) päise. Annab päise sellele elemendile, mis on tema emaelement.

Tavaliselt on <header> sisuks tutvustav/tähtis osa. Tihti kasutatakse <header> elemendis pealkirja ehk h elementi.

<header> element ei tohi olla elementide <footer>, <address> ja teise <header> elemendi sees.

Kasutus:
<section>
  header>
  <!-- Tähtis/tutvustav sisu tuleb siia -->
  <h1>Tähtis sisu</h1>
 </header>
 <!-- Tavaline sisu tuleb siia -->
 <p>Tavaline sisu</p>
<section>

Näide:

Tähtis sisu

Tavaline sisu


<main> element

<main> defineerib ära kogu veebilehe põhisisu. Tohib ainult kasutada korra veebilehes.

<main> elemendi emaelementideks ei tohi olla <article>, <aside>, <header> ja <nav> element

Kasutus:
<main>
 <!-- Veebilehe põhiosa koos alamsektsioonidega tuleb siia -->
 <section>
  <header>
   <!-- Tähtis/tutvustav sisu tuleb siia -->
   <h1>Tähtis sisu</h1>
  </header>
  <!-- Tavaline sisu tuleb siia -->
  <p>Tavaline sisu</p>
 </section>
<main>

Näide:

Tähtis sisu

Tavaline sisu


<footer> element

<footer> defineerib ära, kas veebilehe või mingi alamsektsiooni jaluse. Annab jaluse sellele elemendile, mis on tema emaelement.

Tavaliselt on <footer> sisuks erinevad täiendavad/legaalsed/navigatsiooni tekstid ja lingid.

Kasutus:
<section>
 <!-- Veebilehe põhiosa koos alamsektsioonidega tuleb siia -->
 <header>
  <!-- Tähtis/tutvustav sisu tuleb siia -->
  <h1>Tähtis sisu</h1>
 </header>
 <div>
  <!-- Tavaline sisu tuleb siia -->
  <p>Tavaline sisu</p>
 </div>
 <footer>
  <!-- Täiendav/legaalne/navigatsiooniline sisu tuleb siia -->
  <p>Täiendav/legaalne/navigatsiooniline sisu</p>
 </footer>
<section>

Näide:

Tähtis sisu

Tavaline sisu


<nav> element

<nav> defineerib ära hulk navigatsioonilinke (lingid, mis viitavad erinevatele lehtedele) või tähtsamad lingid. Tihti kasutatakse menüüde emaelementidena ja <nav> elemendis peaksid olema ainult need lingid, mida kasutaja kasutab pidevalt.

Kasutus:
<nav>
 <!-- Navigatsioonilingid tulevad siia -->
 <a href="http://oliverpaljak.com/">Minu blogi</a>
 <a href="http://ansiveeb.ee/">Parim animatsiooniline veebiarendus</a>
<nav>
<section>
 <!-- Veebilehe põhiosa koos alamsektsioonidega tuleb siia -->
 <header>
  <!-- Tähtis/tutvustav sisu tuleb siia -->
  <h1>Tähtis sisu</h1>
 </header>
 <div>
  <!-- Tavaline sisu tuleb siia -->
  <p>Tavaline sisu</p>
 </div>
 <footer>
  <!-- Täiendav/legaalne/navigatsiooniline sisu tuleb siia -->
  <p>Täiendav/legaalne/navigatsiooniline sisu</p>
 </footer>
<section>

Näide:

Tähtis sisu

Tavaline sisu


<aside> element

<aside> tähistab kõrvalist/täiendavat (mitte olulist) sisu, mis peaks olema seotud põhisisuga.

Kasutus:
<nav>
 <!-- Navigatsioonilingid tulevad siia -->
 <a href="http://oliverpaljak.com/">Minu blogi</a>
 <a href="http://ansiveeb.ee/">Parim animatsiooniline veebiarendus</a>
<nav>
<section>
 <!-- Veebilehe põhiosa koos alamsektsioonidega tuleb siia -->
 <header>
  <!-- Tähtis/tutvustav sisu tuleb siia -->
  <h1>Tähtis sisu</h1>
 </header>
 <div>
  <!-- Tavaline sisu tuleb siia -->
  <p>Tavaline sisu</p>
  <aside>
   <!-- Kõrvaline sisu tuleb siia -->
   <p>Kõrvaline sisu tavalisele sisule</p>
  </aside>
 </div>
 <footer>
  <!-- Täiendav/legaalne/navigatsiooniline sisu tuleb siia -->
  <p>Täiendav/legaalne/navigatsiooniline sisu</p>
 </footer>
<section>

Näide:

Tähtis sisu

Tavaline sisu

Mittetähenduslikud (varieeruva otstarbega) sektsioonielemendid

Mittetähenduslikke elementide otstarbe võib koodikirjutaja ise paika panna tehes seda läbi erinevate parameetrite (nagu näiteks role, class ja/või id).

Tegelikult on mittetähenduslikke sektsioonielemente ainult üks ja see on <div>


<div> element

<div> tähistab lihtsalt (ilma otstarbeta) veebilehe osa.

Kasutus:
<nav>
 <!-- Navigatsioonilingid tulevad siia -->
 <a href="http://oliverpaljak.com/">Minu blogi</a>
 <a href="http://ansiveeb.ee/">Parim animatsiooniline veebiarendus</a>
<nav>
<section>
 <!-- Veebilehe põhiosa koos alamsektsioonidega tuleb siia -->
 <header>
  <!-- Tähtis/tutvustav sisu tuleb siia -->
  <h1>Tähtis sisu</h1>
 </header>
 <div>
  <!-- Tavaline sisu tuleb siia -->
  <article>
   <!-- iseseisev sisu tuleb siia -->
   <p>Blogipostitus</p>
  </article>
  <aside>
   <!-- Kõrvaline sisu tuleb siia -->
   <p>Kõrvaline sisu blogipostitusele</p>
  </aside>
 </div>
 <footer>
  <!-- Täiendav/legaalne/navigatsiooniline sisu tuleb siia -->
  <p>Täiendav/legaalne/navigatsiooniline sisu</p>
 </footer>
<section>

Näide:

Tähtis sisu

Blogipostitus