HTMLi kursus #10.2 – DOM, BOM ja tähenduslik HTML

HTMLi kursus #10.2 – DOM, BOM ja tähenduslik HTML

Eelmine osa: HTMLi kursus #10.1 – Content model

Tänases HTMLi kursuse osas võtame ette DOMi, BOMi ja semantic ehk tähendusliku HTMLi.

Kui DOM ja BOM on sulle võib olla tundmatud lühendid ja mõisted, siis tähenduslik HTML, mis moodustab tegelikult suurema osa postitusest, on tegelikult suures pildis elementide kordamine, aga allpool veel täpsustan, mida ma selle all mõtlen.

Alustame aga DOMist ja BOMist.

DOM ja BOM

Alustuseks koheselt ütlen, et DOMi ja BOMiga ma süviti siin postituses ega ka HTMLi kursuses ei tegele ning annan sulle rohkem teoreetilise tausta.

Seda sellepärast, et tegelikult on need väga palju seotud JavaScriptiga. Minu eesmärgiks on neid sulle lihtsalt tutvustada, et sul oleks juba mingigi aimdus antud asjadest, kui neid lähemalt uurima hakkad.

DOM ehk Document Object Model

Otse vikipeediast võttes on DOM ehk Document Object Model (dokumendi objektimudel) platvormist ja keelest sõltumatu XML, XHTML ja HTML dokumentidega suhtlemise liides.

Sisuliselt on DOM aga objekt (ja ka mudel) tervest veebilehest, mis võimaldab meil seda teiste arvutikeeltega (nt JavaScriptiga) muuta ja ka interaktiivseks teha ehk DOM nii-öelda suhtleb teiste keeltega.

Kui sa küsid, mis asi see objekt on, siis on mul seda väga raske sulle seletada, kuna tegemist on algmõistega, kuid praegusel juhul on väga paslik mõelda objektist kui asjast, mida saab programmeerimiskeeltega (nt JavaScriptiga) mõjutada.

Kui sulle on ikka asi ebaselge, siis see on vägagi normaalne – põhimõtteliselt liigume me praegu juba JavaScripti maailmas ning kui sul ei ole olnud eelnevat (veebi) programmeerimiskogemust, siis see asi ongi segane.

Loodetavasti aga annab alumine pilt ja selgitus sulle võib olla natukene rohkem aimu.

DOM

Allikas: W3CShcools

See on DOM nii-öelda lahti harutatuna või ka mudelina. Kindlasti tunned ära meile tuttavad elemendid nagu <html>, <head>, <title>, <body> jne. DOM nendest koosnebki ja neid saabki tänu DOMile mõjutada. DOM viib lihtsalt elemendid objekti kujule ning objekte saame teiste keeltega mõjutada.

Võib olla ka märkad, et see on sarnane HTMLi ülesehitusega: <html> on kõigi elementide emaelemendiks; <body> on eraldi <head> elemendist jne.

Antud DOM näeks päris HTMLina välja midagi sellist:

<!DOCTYPE html>
<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <h1>My header</h1>
        <a href="https://oliverpaljak.com">My link</a>
    </body>
</html>

Kui ma lisaksin elemente juurde, siis DOM muutuks järjest suuremaks ja suuremaks.

See ongi tegelikult DOM, ei muud midagi – lihtsalt objekt tervest veebilehest, mis sisaldab endas veebilehel olevaid elemente ka objetki kujul, et nendega saaks teiste tehiskeeltega suhelda.

Ole mureta, kui asi jäi sulle ikka veel segaseks. Kui kunagi JavaScripti õpid, siis saad sellest kõigest aru. Praegu lihtsalt jäta meelde definitsioon and you are good to go.

BOM ehk Browser Object Model

Nüüd BOM’il ehk Browser Object Model‘il ei ole olemas kindlalt definitsiooni nagu seda DOM’il oli. Lisaks sellele on BOM palju abstraksem kui DOM.

Browser Object Model‘i (eesti keeles brauseri objektimudeli) all mõeldakse objekti, mis ühendab endas kõike veebilehega seoses.

 

JavaScriptis kasutatakse sellist asja nagu window objekt, mis kujutab endast brauseri akent.

window objekt on brauseris nii-öelda see, kes käseb, poob ja laseb – õigemine on window see, mis ühendab endas kõike brauseriga.

Tänu window objektile saame kasutada erinevaid brauseri funktsioone ja API’isid, mis muudavad veebiarenduse lihtsamaks.

BOM on osa window objektist ning see koosneb erinevatest brauseri funktsioonidest, mis teevad veebiarendamise lihtsamaks.

Jällegi, kui BOMist sa ei saa mitte mõhkugi aru, siis see on täiesti arusaadav – lihtsalt jäta meelde, et BOM on objektimudel, mis võimaldab brauseris ligipääsu erinevatele veebiarendust abistavatele funktsioonidele.

Lisan siia ka väikese pildi, mis võib olla aitab sul BOM’i paremini mõista:

BOM

Allikas: JavaScript.ru

window ühendab kõike ja läbi window saab ka siis BOMi nt JavaScriptist ära kasutada.

Liigume aga nüüd antud postituse põhiosa juurde.

Tähenduslikud elemendid

Ennist mainisin, et tegemist on suures pildis kordamisega, kuna olen tegelikult teinud sellest juttu peaaegu, et iga postitus, kuid see ei ole päris nii.

Nimelt kui me elemente õppisime, siis kirjutasin iga elemendi juurde, mida see tähendas ja kuidas seda kasutati ehk iseenesest peaksid tähenduslikud elemendid olema sulle juba selged, kuid tean ise omast käest, et ma võisin elemente õppida ja nendest ka aru saada, aga siiski neid valesti kasutada.

Ma ei ütle seda seetõttu, et ma prooviksin sind süüdistada halvas õppimises või ennast halvas selgitamises, vaid see on asi, millega algajad veebiarendajad tihti (kaasaarvatud ka mina kunagi) mööda panevad.

Miks selline asi juhtub? Põhjus on väga lihtne – paljud uued (ja isegi natuekene kogenumad) veebiarendajad keskenduvad ainult sellele, kuidas mingi element välja näeb.

Nüüd ma ei taha öelda, et välimus ei oleks oluline – on küll ja lausa väga oluline frontend maailmas, kuid me tohi ära unustada, et veebilehte kujundatakse CSSiga, mitte elementidega ja interneti ei kasuta ainult “visuaalsed olendid”.

“Visuaalsete olendite” all pean ma silmas neid, kes reaalselt näevad arvutiekraani, kuid ülejäänud on nii (nägemis)puudega inimesed kui ka erinevad web crawl‘erid nagu näiteks Google Bot.

Web crawler’id on arvutiprogramm või inglise keeles bot, mille ülesanne on indekseerida ehk järjestada veebi sisu. Näiteks Google Bot on web crawler, mida Google kasutab, et tuua sinuni parimad võimalikud vastused sinu otsinguterminile.

Puudega inimesi ja web crawl‘erid ühendab üks sarnane asi ning see on fakt, et nad mõlemad kasutavad väga palju veebilehe lähtekoodi veebilehest arusaamiseks.

Puudega inimesed kasutavad tihti ekraanilugejaid (screen reader), mis loevad antud inimesele sisu ette.

Võib olla ei tundu, et ettelugemine sõltuks lähtekoodist, kuid tegelikult sõltub. Nimelt ekraanilugeja nimetab erinevaid elemente erinevalt ja kasutab veebilehel liikumiseks just erinevaid elemente.

Ühesõnaga, <h1> element pole see sama, mis <p> element ja <span> ei ole see sama, mis <em> jne.

Ja täpselt sama teevad ka web crawl‘erid. Mõistmaks, mis on veebilehes tähtsaim kasutavad nad selleks erinevaid elemente.

See kogu pikk jutt viibki mind järgmise punktini – veebimaailmas on väga oluline elementide tähendus ja kõige tähtsam on kasutada õigeid elemente õiges kohas.

Näited

Toon paar näitet, et illustreerida oma eelnevat juttu.

Esimene näide

Kumb nendest tundub sulle pealkiri?

Kui lihtsalt otsa vaadata ja kui isegi vaadata mõlema elemendi stiile, siis on need täpselt identsed, kuid neid eristab üks ja ainus tõsiasi – need elemendid on täiesti erinevad.

Esimene nendest on <h1>, mis tähistab HTMLis kõige suuremat ja tähtsamat peakirja, teine näitest on aga <span>, mis tähistab põhimõtteliselt siseelementide (ja ka teksti) grupeeringut.

HTMLi kursuse üheksandas osas olen kirjutanud <span> elemendi kohta järgmiselt:

<span></span> – siseelement; tähistab siseelementide grupeeringut ehk kahe sõnaga öeldes on <span> siseelementide sektsioonielement. <span> elementi ei kasutata ainult siseelementide grupeerimiseks, vaid seda kasutatakse väga tihti teksti ja muu sellise stiilimiseks. <span> on väga levinud ja seda võib leida põhimõtteliselt kõikjalt. Teda võib võrrelda elemendiga <div>, sest ühtegi kindlalt otstarbet ega stiili <span> (nagu <div> elementki) ei oma. Sõna span on ingliskeelne sõna ja tähendab eesti keeles vahet/sillet.

Mis aga selle jutu juures kõige tähtsam oli see, et “ühtegi kindlalt otstarbet <span> ei oma” ehk siis <span> element on ilma tähenduseta element.

Üheltpoolt ei tundu asi nii hull, kuna ma kujundasin <span> elemendi täpselt nõnda, nagu seda on <h1> element, kuid tegelikult on asi palju tõsisem.

Seda selletõttu, et <h1> ja <span> on täiesti erinevad elemendid. Nagu enne seletasin, siis <h1> tähistab kõige tähtsamat pealkirja, kuid <span> ei tähista mitte midagi.

Seega kui teeme <span> elemendi kujunduselt täpselt samasuguseks, nagu seda on pealkirja element, siis me ei saa pealkirja – siis me saame <span> elemendi, mis näeb välja nagu pealkiri.

See on väga oluline eristus, kuna ekraanilugejatele ja web crawler‘itele on väga tähtis, mis elemendiga on tegemist.

Ekraanilugejad kasutavad just veebilehel ringi liikumiseks pealkirja elemente, et kasutajad viia erinevate tähtsate sektsioonideni.

Sama teevad ka web crawler‘id, aga mitte navigeerimiseks, vaid selleks, et kindlaks teha veebilehe sisu kasutades just pealkirja elemente, kuna need võtavad sisu väga hästi kokku.

Ja kui veebilehel ei ole pealkirja elementi, aga on mingi <span> element disainitud nagu pealkiri, siis me kahjustame päris tõsiselt veebilehe SEO’d ja ka puuetega inimeste kasutajakogemust.

SEO ehk Search Engine Optimization ehk otsingumootori optimeerimine on põhimõtteliselt veebilehe üles ehitamine sellisel viisil, et see tuleks otsingutes esimeste seas välja. SEO on rohkem sõnademäng või inglise keeles copywriting, kuid frontend veebiarendus mängib ka siin üsna mõjukat rolli ja õigete tähendustega elementide kasutamine õiges kohas on osa sellest.

Teine näide

Teiseks näiteks valisin sellise asja, mille vastu ma igas postituses eksin. Räägin allpool ka, miks ma seda teen.

Tihtipeale näed sa mu postitustes (nagu ka siin on olnud) kõrvalist teksti, mis on tähistatud kaldkirjas.

Kui sa aga näiteks inspekteeriksid ühte sellist kaldkirja sektsiooni (tee seda kasvõi praegu), siis näed, et olen kasutanud 95% sellistel juhtudel elementi <em>, mis tegelikult tähistab rõhutatud teksti.

Näites on jällegi elementide stiilid samad, kuid kasutus on ühel vale.

Nagu võib olla oled aru saanud, siis elementi <em> ei tohiks kasutada kõrvalise tekstina – selleks võiks näiteks kasutada <aside> elementi koos kujundusega või ka äärmistel juhtudel <i> elementi.

Miks ma aga kasutan elemente valesti?

Sellel on tegelikult väga praktiline põhjus. Nimelt kasutan ma blogipostituste kirjutamiseks sellist asja nagu Markdown, mis lubab mul kiiremini kirjutada. Lisaks sellele on Markdown väga mugav.

Ametlikult on Markdown märgistuskeel (nagu ka HTML), ainult et palju inimsõbralikum, lihtsam ja ka mugavam. Väga paljud tech savvy’id blogijad ja ka kirjanikud kasutavad seda oma lihtsuse poolest.

Iseenesest on Markdown’is lubatud ka HTML elemendid ehk ma teoreetiliselt võiksin kasutada nt <aside> elementi, kuid ma ei ole siiamaani veel leidnud sellist tööriista, mis muudaks automaatselt Markdown’i ilusti HTMLiks kirjutamise ajal.

Praegusel ajahetkel kasutan ma live-server’it koos Chrome’i laienduse Markdown Preview Plus’iga, mis põhimõtteliselt lubab mul näha automaatselt brauseris (koos ilusate stiilidega ja puha) muudatusi, mida ma jooksvalt oma Markdown faili ehk postitusse teen (live-server uuendab automaatselt veebilehte, kui vajutan “Save” nuppu).

Jama on aga selles, et Markdown Preview Plus ei kuva/tõlgenda tavalisi HTMLi elemente, vaid ainult Markdown’ile omaseid.

Seega muudab <aside> elemendi kasutamine mul preview täiesti sassi ja see mulle eriti ei meeldi ning selletõttu kasutan ma tärne * *, mis Markdown’is tähendab põhimõtteliselt rõhutatud teksti ehk <em> elementi HTMLis, mis on peaaegu, et kõigis brauserites kursiivi stiiliga.

Loomulikult olen ma uute konvertimistööriistade otsingul ja osi on mulle ka juba silma jäänud – võib olla varsti kasutan ma juba õige tähendusega elementi õiges kohas.

Sina aga ole minust targem ja kasuta <em> elementi ainult selleks, et näidata rõhutatud teksti ja <aside> elementi selleks, et näidata kõrvalist teksti (või ka siis veebilehe osa).

Tähtsamad tähenduslikud elemendid

Ma ei tahaks tegelikult hakata siin eriti elementidest rääkima, kuna me oleme need juba läbi võtnud, aga ma siiski tooksin osad välja, kuna meil läheb neid edaspidise osa mõistmiseks vaja.

Suur jama aga on see, et peaaegu, et igal elemendil on oma kindel tähendus ehk ma peaksin välja tooma kõik elemendid.

Õnneks on HTMLis palju selliseid elemente, millel on olemas kindel otstarve ja kasutus nagu näiteks <ol> elemendil, mis defineerib ära järjestatud nimekirja.

Parim asi selle juures on aga see, et selliste kindlate elementidega ei saa ükski mõtlev veebiarendaja mööda panna, kuna see oleks lihtsalt lauslollus.

Aga kui me näiteks võrdleme <i> ja <em> elementi, siis on asi natukene kahtlasem.

Veelgi keerukamaks läheks otsus, siis kui peaksime otsustama, kas <section> või <div> elemendi vahel – mõlemad on universaalsed emaelemendid ja tähendavad peaaegu, et sama asja (loe: aga siiski on erinevad).

Seega ma seletan lahti sellise klassikalise veebilehe ülesehituse kasutades tähtsamaid tähenduslikke elemente.

Kasutan ära siinkohal MDNi artiklit antud teemal – teen veebilehe seletuse selle artikli lähtekoodi põhjal.

Näidis veebileht

Pildi allikas: MDN

Nagu me näeme, siis veebileht on jagatud viieks osas: kõige ülemine on päis (Header); järgneb ülemine navigatsiooniriba koos otsingukastiga; järgmisena tuleb artikkel; tema kõrval on related sidebar ja viimaseks on siis jalus.

Võime öelda, et tegemist on üsna lihtsa, aga struktuuriliselt hästi paika pandud veebilehega.

Lahkame selle siis lahti ja hakkame kordama.

 

Kõige ülemine osa on päis. Selleks sobib väga hästi ei miski muu, kui <header> element, mis tähistabki päist. Tegemist on sektsiooni elemendiga ehk selle sees võiks olla pealkirja element <h1>, mis siis on pealkiri kogu veebilehele.

Järgneb navigatsiooniriba, mis ei võiks olla miski muu kui <nav> element, mis defineerib ära hulga tihti kasutatavaid navigatsioonilinke.

Siin võib olla tekib uus koht sinu jaoks. Nimelt tihtipeale kasutatakse <nav> elemendis järjekorrata nimekirja ehk <ul> elementi, et sinna mugavalt sisestada navigatsioonilinke.

Kui see tundub sulle imelik, siis tegelikult see nii ei ole. <ul> elemendi otstarveks ongi paika panna erinevad elemendid suvalises järjekorras ja selletõttu see sinna väga hästi sobibki. Ei oluline nende linkide järjekord, tähtis on, et nad oleksid seal.

Lisaks <ul> elemendi kasutamine muudab ka kujundamise CSSis lihtsamaks.

Navigatsioonilinkide kõrval on otsingukast. Sinna sobiks näiteks <form> element, millel on erinevad <input> elemendid.

Nüüd oleme veebilehe ülemise osaga lõpuni jõudnud.

 

Järgneb põhiosa – selle võiks kogus ulatuses kirjutada elemendi <main> sisse, mis tähistabki veebilehe unikaalset põhisisu.

Järgmisena tuleb artikkel, milleks sobib väga hästi <article> element, mille otstarve on eraldada veebilehest iseseisev osa (näiteks blogipostitus).

Kuna meie artikkel on põhjalik, siis on see väga mõtekas jagada erinevateks sektsioonideks. Seda võiks teha, kas läbi <section> elemendi, mille ülesanne ongi jagada veebileht/veebilehe osa sektsioonideks või kasutada h pealkirja elemente.

Räägin h elemendidest ja nende mõjust dokumendi outline‘ile veel allpool.

Lisaks võiks artiklis ehk <article> elemendi sees olla ka kõrvalisi tekste – selleks sobib väga hästi <aside> element, mis tähistabki kõrvalist teksti/osa.

Nüüd oleme jõudnud artikli lõppu.

Meie artikli kõrval asub sidebar. Ka siin sobib <aside> element väga hästi, kuna tegemist on mitte põhilise osaga.

Meie näites on sidebar‘is ka lingid – jällegi võib linkide jaoks kasutada <ul> elementi, et need nii-öelda (suvalises järjekorras) ühte liita.

Sellega ka põhiosa lõpeb.

 

Järgmisena tuleb jalus ehk inglise keeles footer.

Nagu arvata võid sobib selleks <footer> element, mis tähistabki jalust.

Footer‘i sisse võib lisada mõningaid teisi linke, autoriõiguse informatsiooni, täiendavat infot jne.

Antud juhul on jaluses autoriõiguse tekst.

<header>, <nav>, <main>, <article>, <section>, <aside> ja <footer> on kõik sektsioonielemendid. Nende kohta võid täpsemini juba lugeda siit.

Dokumendi struktuur ja outline

Kuigi ma päris alguses ütlesin, et nüüd algab postituse põhiosa, siis tegelikult kõik eelnenud mõtted olid ehituskivid just selleks teemaks siin.

Olgu, mis on, aga HTML on mõeldud just sisu edasi andmiseks ja seda mitte ainult inimestele, vaid ka robotitele, nagu juba varem sai räägitud.

Veel, mida mainisin, on see, et robotite juures on kõige tähtsam tähendus, kuid tähendusest on veel üks asi tähtsam ja see on kontekst ehk, kus mingi element asub, ja see viibki mind dokumendi struktuuri ja outline‘ni.

Struktuur vs outline

Struktuur ja outline on omavahel tihedalt seotud, kuid kehtib reegel, et struktuur mõjutab outline‘i, kuid outline ei mõjuta struktuuri.

Mida ma selle all mõtlen on see, et läbi struktuuri loome ka outline‘i.

 

Struktuur on see, mille me ise teeme – ülemises näidisveebilehes lõime üsna lihtsa struktuuri, mis on väga sarnane alloleva pildiga.

Lihtne struktuur

Pildi tegin Interneting Is Hard artikli järgi samal teemal – selletõttu on ka disain sarnane. Kindlasti soovitan sul ka sellele artiklile pilk peale visata.

Teisiti pannes on struktuur veebilehe ülesehitus.

Outline aga on nii-öelda kaart või lihtsustatud pilt meie loodud struktuurist.

Lihtne outline

Räägin kahe outline’i erinevusest veel allpool, praegu aga võid täheldada, et need mõlemad outline’id on üsnagi sarnased.

Outline‘st lähemalt

Uskuge mind või mitte, aga see outline ongi kõige olulisem HTMLi juures, sest seda kasutavad kõik, kes visuaalselt asju ei näe.

Outline (koos mõne tähtsama <meta> elemendiga ja atribuudiga) ongi see, mis mõjutab sinu veebilehe SEO’d ja ligipääsetavust frontend arenduse (või õigemini HTMLi) poole pealt.

Kui saad oma outline‘i korda, siis võime öelda, et oled teinud suure sammu väga hea veebilehe suunas.

Ära saa minust valesti aru, ma ei taha väita, et “kui outline on hea, siis on kõik veebilehe juures hea.” Päris nii see ka ei ole. Veebileht sõltub väga paljudest asjadest – laadimisajast, skaleeruvusest erinevate seadmete vahel, jõudlusest, sisust, disainist jne, kuid outline on nii-öelda vundamendi vundament, mis võib panna aluse heale veebilehele.

Võib olla mõned küsivad, et kui see nii tähtis asi on, siis miks ma sellest ei alustanud?

Sellepärast, et outline sõltub struktuurist, kuid struktuur omakorda tähenduslikest elementidest ehk meil ei saa olla struktuuri ilma elementideta ja outline‘i ilma struktuurita.

Õigemini saab, kuid väga halb outline. 😀

Kuidas outline‘i luua?

Lühidalt öeldes läbi struktuuri.

Ma loomulikult saan aru, et see just ei ole kõige parem vastus ja tegelikult on sellele lausa kaks vastust.

Esimene viis, kuidas outline‘i luua ja mõjutada on just läbi sektsioonielementide.

Järelikult, kui soovid luua korraliku outline‘i, siis kasuta õigeid (sektsiooni)elemente, aga siin on üks suur AGA.

Selleks AGAks on fakt, et ükski brauser, ükski ekraanilugeja ja ükski web crawler ei kasuta sektsioonielementide poolt loodud outline‘i.

Võib olla mõni kasutab, kuid sorides natukene netis ringi ei ole ma ühtegi kindlalt vastust saanud ning lisaks sellele on W3C HTMLi specification’is välja toodud hoiatus antud teema kohta.

Outline‘i mitte-kasutamine ei tähenda aga seda, et brauserid ignoreeriksid sektsioonielemente – lihtsalt outline’i ei looda nendega. <main> elemendis olev tekst on ikka tähtsam kui <aside> elemendis olev tekst.

Mida teha? Siin tuleb appi ei miski muu kui meie vana hea sõber ja kõikide (võib olla just mitte kõikide) lemmik – HTML4 või õigemini need nipid, mida tehti HTML4 ajal.

HTML on tehiskeel ja nagu iga keel areneb, siis areneb ka HTML, aga HTMLi arengut/õigemini uute võtete kasutamist pärsib tõsiasi, et HTMLi uut versiooni peab iga brauser eraldi hakkama sisse viima ja see viib omakorda selleni, et osad uuendused ei jõua lihtsalt brauseritesse, kuid siinkohal ei ole isegi küsimus jõudmises, vaid tegelikult tahtmises.

Nimelt kõik brauserid ei taha uuendada outline alogritmi mitmetel põhjustel, kuid üheks peamiseks on fakt, et see muudaks praegused veebilehed HTMLi struktuuri mõistes vigaseks või võrreldes teistega halvemaks. Praegusel hetkel sellesse teemasse eriti ka ei süvene, kuna see ei ole meie mätta otsast eriti oluline, kuid väikene side-fact sulle.

HTML4 ajal (või õigemini juba sellest ajast kui veeb loodi) määrasid HTMLis outline‘i pealkirjad ehk <h> elemendid ning nii huvitav kui see ka poleks, teevad need seda siiamaani.

Ühesõnaga, kui soovid luua uut sektsiooni outline‘is, siis pead kasutama <h> elemente.

Loogika on tegelikult üsna lihte.

Mäletad, et pealkirja elemente oli kuus – <h1> kuni <h6>, kus <h1> on kõige tähtsam ja <h6> kõige vähem tähtsam.

Ning kui soovid outline‘s uut sektsiooni luua (see tähendab, et eralduks praegusest sektsioonist), siis peab looma uue pealkirja.

Näiteks, kui meil on selline blogipostitus, milles on erinevad pealkirjad (ja oletame, et iga pealkirja all oleks ka sisu):

<h1>Tähenduslikud elemendid</h1>
<h2>Kuidas tähenduslikke elemente kasutada?</h2>
<h2>Tähenduslikke elementide kasulikkus</h2>
<h3>SEO</h3>
<h3>Ekraanilugejad</h3>
<h2>Tähenduslikke elementide nimistu</h2>
<h1>Mitte-tähenduslikud elemendid</h1>
<h2>Kuidas mittetähenduslikke elemente kasutada?</h2>
<h2>Tähenduslikke elementide kasulikkus</h2>
<h3>Universaalsus</h3>

siis antud postituse outline oleks järgnev:

Näide outlinest

Structural outline on nii-öelda uus, HTML5 outline, kuid heading-level outline on vana, HTML4 outline.

Võib olla ka järgnev jaotus aitab sul outline‘st paremini aru saada.

<h1>Tähenduslikud elemendid</h1>
    <!--Sisu siia-->
    <h2>Kuidas tähenduslikke elemente kasutada?</h2>
        <!--Sisu siia-->
    <h2>Tähenduslikke elementide kasulikkus</h2>
        <!--Sisu siia-->
        <h3>SEO</h3>
            <!--Sisu siia-->
        <h3>Ekraanilugejad</h3>
            <!--Sisu siia-->
    <h2>Tähenduslikke elementide nimistu</h2>
        <!--Sisu siia-->
<h1>Mitte-tähenduslikud elemendid</h1>
    <!--Sisu siia-->
    <h2>Kuidas mittetähenduslikke elemente kasutada?</h2>
        <!--Sisu siia-->
    <h2>Tähenduslikke elementide kasulikkus</h2>
        <!--Sisu siia-->
        <h3>Universaalsus</h3>
            <!--Sisu siia-->

Päriselt koodis pealkirju nõnda tühimikudega ei eristata, ongi lihtsalt üksteise all. Praegu võib olla muudab jälgmise keerulisemaks ka see fakt, et sisu reaalselt ei ole.

Võib olla märkasid, et iga <h> elemendi number tähendab nagu levelit, kus pealkiri asub ja kui soovid luua uut alamlevelit siis peab kasutama vähem tähtsamat pealkirja.

Kui aga soovid “ülespoole” liikuda, siis pead kasutama tähtsamat pealkirja. Samas levelis püsides pead uut sektsiooni alustades kasutama sama tähtsusega pealkirja, mis sellele eelnes.

 

Kui HTMLis on tihti kombeks, et mingi element lõpetakse temale vastavad lõpumärgendiga (</element>), siis outline‘s nii ei ole.

Outline‘s lõpetab eelneva sektsiooni just uus samas või kõrgemas levelis asuv <h> element (nt kui <h2> järgneb uus <h2> või lausa <h1>).

Madalama leveliga element aga alustaks alamsektsiooni – see on nagu emaelement ja lapselement.

Alamsektsioon kuulub temale eelnenud kõrgema sektsiooni (nt kui <h3> järgneb <h2>, siis see alustab <h2> leveli uut alamsektsiooni, kuid ei lõpeta <h2>).

Sisu käitub sarnaselt. Kõik, mis <h> elemendile järgneb kuulub nii-öelda tema alla. Näiteks, kui kirjutad <h1> elemendile järgi “Tere!”, siis see “Tere!” on <h1> elemendi poolt loodud (kujutatava) sektsiooni sisuks.

Kui meil on selline kood:

<h1>Tähenduslikud elemendid</h1>
<p>Tähenduslikud elemendid on need elemendid, millel on HTML5'es kindel tähendus ja otstarve.</p>
<p>Tähenduslikud elemendid on veebiarenduses väga tähtsad.</p>
<h2>Kuidas tähenduslikke elemente kasutada?</h2>
<p>Tähenduslikke elemente tuleb kasutada nagu teisigi elemente, aga tuleb meeles pidada seda, et kõige tähtsam on kasutada õiget elementi õiges kohas.</p>
<p>Kui sa ei ole mingi elemendi tähenduses kindel, siis otsi lisamaterjali ja tee see endale selgeks.</p>
<h2>Tähenduslikke elementide kasulikkus</h2>
<p>Tähenduslikud elemendid on väga tähtsad just kasutajakogemuse poolest. Lisaks annavad need veebilehele ka rohkem selgust arendamise poole pealt.</p>
<h3>SEO</h3>
<p>Tähenduslikud elemendid mängivad SEO's rolli.</p>
<h1>Mitte-tähenduslikud elemendid</h1>
<h2>Kuidas mittetähenduslikke elemente kasutada?</h2>
<p>Tähenduslikke elemente tuleks kasutada ainult siis, kui ei ole sobivaid tähenduslikke elemente.</p>

siis outline koos sisuga näeks välja midagi sellist (kuigi tegelikuses outline‘s sisu ei ole):

  • 1 Tähenduslikud elemendid
    • Tähenduslikud elemendid on need elemendid, millel on HTML5’es kindel tähendus ja otstarve.
    • Tähenduslikud elemendid on veebiarenduses väga tähtsad.
    • 1.1 Kuidas tähenduslikke elemente kasutada?
      • Tähenduslikke elemente tuleb kasutada nagu teisigi elemente, aga tuleb meeles pidada seda, et kõige tähtsam on kasutada õiget elementi õiges kohas.
      • Kui sa ei ole mingi elemendi tähenduses kindel, siis otsi lisamaterjali ja tee see endale selgeks.
    • 1.2 Tähenduslikke elementide kasulikkus
      • Tähenduslikud elemendid on väga tähtsad just kasutajakogemuse poolest. Lisaks annavad need veebilehele ka rohkem selgust arendamise poole pealt.
      • 1.2.1 SEO
        • Tähenduslikud elemendid mängivad SEO’s rolli.
  • 2 Mitte-tähenduslikud elemendid
    • 2.1 Kuidas mittetähenduslikke elemente kasutada?
      • Tähenduslikke elemente tuleks kasutada ainult siis, kui ei ole sobivaid tähenduslikke elemente.

Tuues värvid ja natukene HTMLi mängu saaksime ülemist näidet ka illusteerida nõnda:

 

Nõnda see outline kujunebki.

Nagu ka just mainisin, et outline‘s tegelikult sisu ei ole.

Seda sellepärast, et outline ongi nii-öelda ülevaade või kaart veebilehest.

See aga ei tähendaks, et sisu ei kuulu kuskile outline sektsiooni – kuulub küll. Näiteks <h3> järgnev sisu ongi <h3> elemendi all ja seda koheldaksegi nii.

Kui sektsioonielemendid ei loe, kas neid on vaja siis kasutada?

Jah, ikka on!

Esiteks sellepärast, et kunagi ei või teada, millal otsustavad brauserid structural outline algoritmi kasutama hakata.

Kui oled oma veebilehe struktuuri teinud nõnda, et see töötaks mõlemas süsteemis, siis võid kindel olla, et ükskõik, mis uuendus ka ei tuleks, sinu veebileht on ikka heas vormis.

Näiteks ülemine näide näeks koos sektsioonielementide välja järgmiselt:

<article>
    <section>
        <h1>Tähenduslikud elemendid</h1>
        <!--Sisu siia-->
        <section>
            <h2>Kuidas tähenduslikke elemente kasutada?</h2>
            <!--Sisu siia-->
        </section>
        <section>
            <h2>Tähenduslikke elementide kasulikkus</h2>
            <!--Sisu siia-->
            <section>
                <h3>SEO</h3>
                <!--Sisu siia-->
            </section>
            <section>
                <h3>Ekraanilugejad</h3>
                <!--Sisu siia-->
            </section>
        </section>
        <section>
            <h2>Tähenduslikke elementide nimistu</h2>
            <!--Sisu siia-->
        </section>
    </section>
    <section>
        <h1>Mitte-tähenduslikud elemendid</h1>
        <section>
            <h2>Kuidas mittetähenduslikke elemente kasutada?</h2>
            <!--Sisu siia-->
        </section>
        <section>
            <h2>Tähenduslikke elementide kasulikkus</h2>
            <!--Sisu siia-->
            <section>
                <h3>Universaalsus</h3>
                <!--Sisu siia-->
            </section>
        </section>
    </section>
</article>

Structural outline

Näga näha võid, siis see ei erine väga palju eelmisest näitest – ainukene, mida validator ise juurde lisab on <body> element.

Need mõlemad outline‘id on peaaegu, et identsed selletõttu, et ma olen kasutanud mõlemat süsteemi nõnda, et lõpptulemus oleks sama.

Sama proovi ka sina teha, kui oma veebilehti arendad.

Teiseks, sektsioonielemendid muudavad sinu veebilehe rohkem arusaadavamaks nii SEO mõttes kui ka arenduses.

Ma küll ütlesin, et outline on SEO’s üks tähtsamaid asju ja ongi, kuid SEO on tänapäeval nii arenenud, et võtab arvesse väga paljusid aspekte ja vanade elementide kasutamine eriti nüüd kasuks küll ei tule – web crawler‘id on üsna targad ja isegi kui nad ei kasuta structural outline‘i, mõistavad nad, kus mingid elemendid asuvad.

Ühesõnaga, kasuta sektsioonielemente ja proovi veebileht teha arusaadavamks nii heading-level outline‘s kui ka structural outline‘s.

Mitu “levelit” peaks veebilehel olema?

Otsest reeglit sellise asja jaoks ei ole, kuid HTMLi specification‘is on soovitud hoida kinni reeglist, et veebileht ei ulatuks sügavamale kui 3 levelit (see on siis <h3> element).

Loomulikult vahel võib see minna ka sügavamaks, kuid siiski on see üsnagi hea rusikareegel.

Teiseks asjaks, mida võiks silmas pidada on see, et veebilehel võiks olla (heading-level outline‘s) ainult üks <h1> element, mis võtaks veebilehe sisu kokku (nt mingi firma kodulehel võiks see olla firma nimi).

Nüüd see <h1> elemendi reegel ei ole just eriti oluline (nt single-page web app‘ides kasutatakse üsna tihti mitut <h1> elementi), kuna tänapäevased web crawler‘id ja ekraanilugejad on üsnagi targad, kuid siiski ei maksa <h1> igale poole pilduda, kuna see on üks tähtsamaid elemente outline‘s.

Ma ei tea, mida mingi element tähendab. Mida teha?

Kõige paremaks viisiks arvatavasti on otsida lihtsalt elementi, kas läbi

  • Mozilla Developer Network – tuleks lihtsalt soovitud elementi otsida;
  • minu blogi HTMLi kursused – olen igas postituses üritanud välja tuua, mida mingi element tähendab ja kuidas seda kasutatakse;
  • W3CSchools – on veebileht, mis seletab ja õpetab erinevaid tehnoloogiaid natukene sõbralikumalt kui seda näiteks teeksid spec‘id. Sobib väga hästi kiireks meeldetuletamiseks, kui midagi on ununenud. Ise olen enda postituses kasutanud valdavalt just W3CSchools’i seletusi;
  • HTMLi ametlikest specification‘id – selleks sobivad mõlemad WHATWG ja W3C spec.

Mozilla on arvatavasti nendest kõige parem, kuna nendel on taga suur kogukond, kes pidevalt artikleid uuendab. Lisaks sellele on Mozilla Eesti mõistes MTÜ, seega kõik, mis Mozillas on kirjas “on arendajate poolt arendajatele”, mis viib selleni, et Mozillas on enamus asju väga inimsõbralikult ära seletatud. Ainukeseks miinuseks võib lugeda seda, et osad artiklid võivad olla liiga detailsed ja lihtsaks meeletuletamiseks peab läbi lugema pika rodu informatsiooni, mida tegelikult otseselt vaja ei ole.

Ei taha ka enda postitusi siin maha teha, kuid võib olla ei anna eesti keelne seletus sulle just kõige paremat pilti, kuna enamus veebis olevatest asjadest on inglise keeles ning mõnikord võib tahtmatult midagi tõlkes kaduma minna.

Lisaks sellele ei pruugi ma kõikide uuendustega kursis olla ja/või jõuda postitusi uuendada, kuna erinevalt Mozillast ei ole minul suurt kogukonda, kes uuendustega kursis oleks ja artikleid uuendaks. Olen ainult mina koos sinuga! 😀

Samas olen endas üsnagi kindel, et see on Eesti mõistes üks parimaid allikaid HTMLile.

Viimaseks soovitaksin ma kasutada specification‘e, kuna nad ei pruugi olla just kõige inimsõbralikumad ja võivad endas sisaldada liigset formaalsust, kuigi arvatavasti on kõigest kõige täpsemad. Lisaks sellele on kahe specification‘i vahel ka pidev dilemma.

Kui keegi küsib, miks ma (valdavalt) olen kasutanud W3CSchools’i allikaid, mitte just Mozilla Developer Network’i, kui isegi arvan, et see on kõige parem allikas, siis seda sellepärast, et HTMLi elemendid on kõikjal põhimõtteliselt samad ja ka samasuguselt kirjeldatud, ehk päeva lõpuks erilist vahet ei ole, mis allikat siinkohal kasutad.

Julge katsetada

Peaaegu, et iga HTMLi postituse lõpus olen ma öelnud, et ära õpi elemente pähe, ürita need meelde jätta läbi proovimise/praktika. Loomulikult kehtib täpselt sama ka siin.

Kuigi pean ka ise tõdema, et antud postitus on rohkem üldine ja võib öelda, et isegi filosoofiline, nii et erilist õppimist siin ei ole. Kõige tähtsam on, et sa oskaksid ise oultine‘i luua.

Selleks aga, et sa saaksid enda outline skill‘e korralikult katsetada ja kontrollida soovitaksin ma sul kasutada sellist tööriista nagu W3C Markup Validation Service‘it, mis tegelikult on HTMLi validaator, aga sealt saab ka lisaks valida väljundiks “Show outline“.

See outliner näitab nii structural outline‘i kui ka heading-level outline‘i.

 

Sellega paneksin ka punkti antud postitusele.

Nagu ikka, kui midagi segaseks jäi, siis anna sellest julgelt teada kommenteerides! 🙂


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.
Ma ei pea ennast praegu animatsioonilise veebiarenduse eksperdiks, kuid olen sellele spetsialiseerunud ja saan Sind väga palju aidata animatsioonilise veebilehe loomisel!

Leave a Reply

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