HTMLi kursus #5 – Sektsioonielemendid

HTMLi kursus #5 – Sektsioonielemendid

Eelmine osa: HTMLi kursus #4.2 – tabelid

Tänaseks teemaks on HTMLi sektsioonielemendid. Tegemist on elementidega, mille ülesanne on jaotada veebileht erinevateks (alam)osadeks, mis aitavad veebilehte paremini mõista ja ka kujundada.

Sellelgil osal on näidisleht (interaktiivne näide siin) ja konspekt (interaktiivne näide siin).

Näidisleht

Tänases osas on inspekteerimine isegi kohustsulik, sest sektsioonielemendid ei anna juurde mingit visuaalset väärtust, vaid muudavad koodi rohkem arusaadavamaks.

 

HTMLi sektsioonielementide üldreeglid ja natukene rohkem sõnade loogikast.

Sektsioonielemendid jaotavad veebilehe osadeks ja ka veebilehe alamosad omakorda osadeks. Seda tehes sektsioonilemendid ümbritsevad teisi elemente (nii käitub ka ükskõik, mis elemendi emaelement – ümbritseb lapselementi).

Kõik sektsioonielemendid on plokkelemendid, aga nende sees võib olla nii siseelemendid kui ka plokkelemendid.

Paneme selle jälle sõnade loogikasse. Kas üks suur sektsioon võib jaguneda näiteks mitmeks alamsektsiooniks (ehk plokkelemendi sees on plokkelemendid)? Mina vastaks, et jah.

Aga kas nendes alamsektsioonides võib olla pealkirju ja tekstilõike (ehk h elemendid ja <p> ja mõned teised tekstielemendid)? Mina jällegi vastaks, et jah.

 

Ma võin sulle öelda, et veebileht koosneb tegelikult kastidest. Jep, lugesid õigesti, kastidest (CSSi õppimisel saad sellest mõttest rohkem aru). Õigemini kolmest liigist kastidest.

On olemas kastid, mis ei võta täielikku (ekraani) laiust ehk siseelemendid ja muudavad laiust nende sees olevast sisust. Nende sisse võib mahutada ükskõik mida, kuigi kui liiga palju nende sisse panna, siis see muutub juba imelikuks (kast venib liiga välja).

On kastid, mis võtavad enda alla terve (ekraani) laiuse ehk plokkelemendid ja nende sisse mahub ainult tekst ja siseelemendid.

Ja on kastid, mis on veel tegelikult suuremad ja võimsamad. Neid nimetatakse sektsioonielementideks. Nende sisse mahub nii siseelemente kui ka plokkelemente. Neid võib venitada ükskõik kui palju ja see on lubatud.

HTMLi erinevad “kastid”

Oleks väga hea meelde jätta need kolm tüüpi, sest nendest põhiliselt veebileht koosnebki.

Sektsioonielementide ükteise sisse panekul oleks ka hea kasutada sõnade loogikat.

HTMLis ametlikult ei ole olemas eraldi sektsioonelemente. Olemas on vaid plokkelemendid (siia alla kuuluvad ka minu defineeritud sektsioonielemendid) ja siseelemendid (block-level ja inline elemendid), kuid et asju sulle praegu lihtsamaks teha võiksid siiski meelde jätta, et olemas on kolme tüüpi elemente – siselemendid, plokkelemendid ja sektsioonielemendid.

Sektsioonielemendid seletatult

Sektsioonielemendid jagunevad kaheks:

  • tähenduslikud sektsioonielemendid
  • mitte tähenduslikud sektsioonielemendid

Tähenduslikud sektsioonielemendid

Tähenduslikud sektsioonielemendid on sektsioonielemendid, millel on kindel tähendus ja otstarbe. Neid ei saa arendaja ise defineerida.

<section></section> – defineerib veebilehes ära ükskõik, mis osa. Siia sisse käivad näiteks teised alamsektsioonid, pealkirjad ja tekstid. Lisaks sellele võib <section> olla ka ise alamsektsioon. Väljend section tuleb ingliskeelest ja tähendab eesti keeles sektsiooni/osa.

<section> elementi kasutasin suuremate sektsioonielementide joatamiseks väiksemateks alamosadeks.

 

<header></header> – tähistab emaelemendi päist ehk kui näiteks <section> elemendi sees on <header> element, siis see <header> on päis <section> elemendile. Päise sisse võivad käia näiteks erinevad h elemendid, logod, ikoonid või mõni muu tähtis/tutvustav osa veebilehele või sektsioonile. <header> ei tohi olla elementide <footer>, <address> ja teise <header> elemendi sees. Sõna header on ingliskeelne sõna ja tähendab päist.

<header> elementi kasutasin näitamaks, mis on mingi veebilehe osa päised (tutvustavad ja annavad üldist infot antud osa kohta). Olen pannud näiteks <header> elemendi <main> elemendi sisse ehk antud juhul on <main> elemendi päiseks tema sees olev <header> element.

 

<main></main> – defineerib ainult sellele dokumendi (ehk veebilehe) peamise osa. Siia sisse käib veebilehe põhisisu (näiteks artikkel jne). See peaks olema unikaalne ehk samas lehes ja teistes (alam)lehtedes selle sarnast sisu ei tohiks olla. Ühes dokumendis tohib ainult olla üks <main> element ning tema emaelementideks ei tohi olla <article>, <aside>, <footer> , <header> või <nav> element. Sõna main tuleb ingliskeelest ja tähendab peamist (osa).

Enda veebilehes kasutasingi <main> elementi näitamaks, mis on selle veebilehe põhisisu. Sinna sisse käisid nii <section> elemendid kui ka <article> elemendid.

 

<footer></footer>– defineerib jaluse tavaliselt kas veebilehele või mõnele sektsioonile. Nagu  <header> annab <footer> jaluse emaelemendile. Lapselementideks ja -osadeks on tavaliselt täiendav informatsioon, legaalsed tekstid, kontaktiandmed, kokkuvõttev (korduv) osa, saidiplaan jms. Sõna footer on ingliskeelne sõna ja eesti keeles tähendab jalust.

<footer> element tähistab minu veebilehes lihtsalt veebilehe alumist/kõrvalist osa, kus on minu kontaktandmed.

 

<nav></nav> – defineerib ära mingi hulga navigatsioonilinke (lingid, mis viitavad veebisaidi erinevatele alamlehtedele) või tähtsamad lingid veebilehes. Tihti võib seda näha erinevate menüüde emaelementidena. <nav> elemendis ei tohiks olla kõik veebilehe lingid, vaid lingid, mida kasutaja kasutab pidevalt (nagu näiteks link avalehele jne) Lühend nav tuleb ingliskeelsest sõnast navigation, mis eesti keeles tähendab navigatsiooni.

<nav> elementi kasutasin enda veebilehes näitamaks enda arust mõnele tähtsale lingile 😉 . Seda võib pidada selle näidisveebilehe menüüks, kuigi see pole just kõige paremini teostatud.

 

<aside></aside> – tähistab kõrvalist/täiendavat (mitte olulist) sisu, kuigi see peaks olema seotud põhisisuga. Sõna aside tuleb ingliskeelest ja tähendab eesti keeles kõrvalist/mitte olulist.

<aside> elementi kasutasingi (esimese <section> sees) enda veebilehes näitamaks sisu, mis ei ole tegelikult oluline.

 

<article></article> – tähistab veebilehe osa, mis peaks olema iseseisev. Siia sisse võivad käia näiteks blogipostitused, uudised, kommentaarid jne. Sõna article tuleb ingliskeelest ja tähistab eesti keeles artiklit.

<article> elementi kasutasin <main> lõpus nagu mingi väikese eraldi seisva huvitava jutuna.

 

On olemas veel ühte tüüpi tähenduslikke sektsioonielemente ja need on tabeli sektsioonielemendid, aga kuna ma katsin need juba HTMLi kursuses #4.2 , siis praegu ma nendest juttu ei tee.

 

Mittetähenduslikud sektsioonielemendid

Mittetähenduslikud sektsioonielemendid on sektsioonielemendid, millel ei ole kindlat otstarbet ja tähendust.

Mittesektsioonielmente on tegelikult ainult üks ja see on <div>.

 

<div></div> – kõige kasutatum ja tavalisem sektsioonielement üldse. Defineerib ühe veebilehe (mittetähenduslikku) osa. Tihtipeale kasutatakse seda selleks, et joatada näiteks mõni tähtsam ja suurem sektsioonielement väiksemateks alamosadeks või luuakse veebilehele mingi teistsugune osa, millel eeldefineeritud tähendust ei ole. Lühend div tuleb ingliskeelsest sõnast division, mis eesti keeles tähendab jaotust.

<div> elementi kasutasin <section> elementide joatamiseks. <div> elemendid on <section> elementide alamosad. Näiteks eraldasin <table> elemendi nimekirja elemendist teises <section> elemendis.

 

<div> ja ka tegelikult teistel (sektsiooni)elementidel on üks omane atribuut ja see on role="otstarbe", mis paneb paika selle elemendi otstarbe. Nüüd tähenduslikkel elementidel on juba role olemas ning seda uuesti defineerima ei pea.

Aga et <div> element saaks mingigi aimatava tähenduse (seda võib ka teha näiteks läbi atribuutide class ja id), siis oleks mõistlik kasutada role atribuuti. See ei ole kohustlik ning vahetevahel ei ole sellel isegi mõtet. Aga ma siiski toon välja, mis võivad olla role atribuudi väärtused.

  • role="banner" – tähistab (annab otstarbe elemendile) reklaambännerit
  • role="main" – tähistab põhisisu (kasuta selle asemel <main> elementi)
  • role="search" – tähistab otsinguosa veebilehes

Praegu rohkem väärtusi juurde ei lisanud, sest üsnagi palju väärtusi kattub tähenduslikke sektsioonielementidega. Kui kedagi huvitab rohkem, siis siit võib leida kõik väärtused. role atribuut on rohkem kasulikum CSSis.

 

 

Koduülesanne: luua täiesti uus veebileht (ükskõik millest) kasutades eelnevalt õpitud elemente (nagu näiteks <p>, <table>, nimekirja ja mõningaid tekstikujundamis elemente) ja kõiki täna õpitud elemente.

Kui sa oled siiamaani kõik HTMLi õpetused läbi käinud ja tänase koduülesande ära teinud, siis sa oled väga tubli, sest nüüd on sul selge põhiline HTML ehk sa suudad luua lihtsa veebilehe ükskõik millest.

Loomulikult HTMLi kursus siin ei lõppe, on veel üsnagi palju õppida, aga põhilised asjad on nüüd selged.

 

Järgmine osa: HTMLi kursus #6.1 – Lihtsad meediaelemendid

 

Kui sul tekkis küsimusi/probleeme, siis anna kommentaarides teada 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *