HTMLi kursus #10.1 – Elementide tähendus ja content model

HTMLi kursus #10.1 – Elementide tähendus ja content model

Nüüd oleme jõudnud HTMLi kursusega nii kaugele, et võtame ette natukene keerulisemad teemad kui lihtsalt elemendid.

Nimelt on mul plaanis täna sulle selgeks teha HTMLi content model (või ka content types) ehk sisutüübid.

Enne kui edasi lähed, soovitaksin sul unustada peaaegu kogu minu teooria plokk- ja siseelementidest, sest nüüd me räägime juba täpsemalt, kuidas HTMLis asjad käivad.

Mitte, et ma oleks sulle valetanud (HTMLis on olemas plokk- ja siselemendid; teen juttu nendest ka siinses postituses), kuid ma üritasin asju alguses natukene lihtsustada, et saaksime keskenduda elementide õppimisele.

Palun aga ära unusta sõnade loogikat – see on siiski väga tähtis ja kasulik.

Siin ja järgnevates postituses minu tehtud veebilehte pole, sest me räägime ainult HTMLi teooriast, kuid konspekti võid leida siit.

Elementide tähendusest natukene

Kõikidel elementidel ja ka atribuutidel on HTMLis olemas tähendus. See tähendab, et kõikidel elementidel on oma kindel ülesanne.

Seda on väga tähtis mõista, eriti alguses, kui veebiarendus on sulle uus, et iga element, mis veebilehel on, peab olema õiges kohas ja õiges kontekstis.

Tean omast käest, eriti siis kui alustasin veebiarendusega, et olen “loopinud” elemente lihtsalt suvaliselt veebilehte ja pole eriti mõelnud, kas see element on just kõige parem selleks otstarbeks.

See ei tundu võib olla eriti tähtis, kuid see on. Nimelt kasutavad just paljud ekraanilugejad ära elementide tähendusi.

Ja kui arendaja on elemente valesti kasutanud, siis ei mõista ekraanilugejaga kasutaja veebilehest eriti midagi.

Sama kehtib ka SEO’s (ehk veebilehe nähtavus otsingumootorites), kus elementide tähendused on väga tähtsad.

Veebibrauser võib halba veebilehte visuaalselt küll ilusalt näidata, kuid pask jääb pasaks! 😀


Veel mida ma soovitaksin meeles pidada on see, et HTMLis ei tohi ise elemente väljamõelda ja luua – olen seda ise teinud ja see on tagant järele vaadates lihtsalt jube!

HTML võib koodi küll korralikult väljastada, kuid tegelikkuses see ei tööta.

Tuleb kasutada juba olemas olevaid elemente!

Õigemini on custom elemendid võimalikud ja täiesti legaalsed, kui sa kasutad JavaScripti, et uusi elemente defineerida, kuid ilma JS’ita on see ülimalt halb.
Näiteks Google’i õpetuse custom elementide peale võid leida siit, kuid meeles tuleks pidada, et tegemist on üsna uue tehnoloogiaga ning see ei ole eriti brauserites toetatud.
Kui tahad näha, kus on custom elemente kasutatud ilma JS’ita, siis minu AnsiVeebi kodulehelt võid seda näha.


Räägin elementide tähendusest veel ka tulevastes postitustes.

Tegin lühitutvuse selleks, et meelde tuletada sõnade loogikat – ärge toppige igasse elementi lapselemente, mis siis, et HTML seda ka lubab.

Plokk- ja siseelemendid õigesti

Ma lühidalt tulen ka tagasi korra plokk- ja siseelementide juurde ning räägin nendest natukene täpsemalt.

HTMLis on olemas plokkelemendid (inglise keeles block-level elements) ja siseelemendid (inglise keeles inline elements).

Põhimõtteliselt, mis on plokkelementide ja siseelementide vahe on see, et plokkelemendid kasutavad ära täielikult terve laiuse, mis neile antakse (ehk nad on sama laiad kui emaelemendid) ning nende taga on realõpud (ehk järgmine element algab uuest reast).

Siseelemendid kasutavad ära ainult nendele vajamineva laiuse (ei loe kui suur on emaelement) ja nende taga pole realõppe. Seega järgmine element algab kohe samalt realt.

Plokkelementide sees võivad olla teised plokkelemendid (kui content model seda lubab – sellest allpool) kui ka siseelemendid.

Siseelementide sees aga võib olla ainult tekst; plokkelemente nende sisse ei ole lubatud panna.

Plokk- ja siseelemendid ei loe eriti

Jah, see on tõsi. HTML5’es plokk- ja siselemendid enam nii suurt rolli ei mängi, sest nüüd on nende asemele olemas Content model, mis ütleb täpsemalt, mis elemendid võivad käia teiste elementide sees.

Pea aga meeles ka plokk- ja siseelemente, sest see on üldine teooria HTMLi õigele kirjutamisele.

Content models

Content models (eesti keeles sisutüübid), nagu ka ennist ütlesin, määravad ära, mis elemendid võivad olla teise elemendi sees.

Sisutüübid on järgnevad:

  • Flow content
  • Section content
  • Heading content
  • Phrasing content
    • Embedded content
  • Metadata content
  • Interactive content
  • Palpable content
  • Form-associated content
  • Script-supporting content
  • Transparent content

Siit pildilt saad rohkem aimu põhilistest sisutüüpidest:

Allikas: W3 HTMLi Dokumentatsioon

Nagu näed, siis osad elemendid võivad kuuluda mitmesse sisutüüpi, aga olemas on ka elemente, mis ei kuulu ühtegi kategooriasse ja nendele kehtivad erandid.


Olen enamus järgnevatest elementidest sulle juba selgeks õpetanud oma eelnevates HTMLi kursuse postitustes. Kuna mõned on mul võib olla kahe silma vahele jäänud minevikus, siis ma kavatsen lisada uusi elemente vanadele postitustele. Ma kindlasti teen nendest asjadest update’id, et sulle teada anda, millised elemente ma juurde lisan.

Flow sisutüüp

Flow sisutüüpi kuuluvad peaaegu, et kõik elemendid, mis peaksid ühes tavalises dokumendis olema.

Siia aga ei kuulu osad meta-andmete sisutüübi elemendid – <base>, <link>, <meta> ja <title>.

Sectioning content ehk sektsiooni sisutüüp

Sektsiooni sisutüüpi kuuluvad elemendid, mis jaotavad veebilehe erinevateks sektsioonideks/osadeks – <article>, <aside>, <nav> ja <section>.

Heading content ehk pealkirja sisutüüp

Pealkirja sisutüüpi kuuluvad loomulikult pealkirja elemendid – <h1>, <h2>, <h3>, <h4>, <h5> ja <h6>.

Phrasing content ehk fraaside sisutüüp

Siia alla käivad erinevad elemendid, mis on seotud tihedalt tekstiga ja reaalse sisuga.

Phrasing sisutüübi elemendid on järgnevad: <a>, <abbr>, <area> (kui <map> on emaelemendiks), <audio>, <b>, <bdi>, <bdo>, <br />, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img />, <input />, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <template>, <textarea>, <time>, <u>, <var>, <video>, <wbr> ja tekst.

Ole mureta sa ei pea seda infot pähe õppima! 🙂


Nagu näed on mul selle pikka loetelu lõpus “tekst”. Põhimõtteliselt ei ole tekst HTMLis element. Tekst jääb Phrasing sisutüübi alla, kuid vahetevahel viidatakse ka sellele kui täiesti eraldi sisutüübile.

Teksti lisamine HTMLi ei ole kohustuslik (vaata ka Palpable sisutüüpi).

Embedded content ehk manuse sisutüüp

Siin on kõik elemendid, mis esindavad veebilehes manust. See tähendab seda, et element näitab sisu, mis on väljaspool seda veebilehte (nagu näiteks pilt).

Embedded sisutüübi elemendid on järgmised: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video

Manuse sisutüübi emaks on Phrasing sisutüüp.

Metadata content ehk meta-andmete sisutüüp

Meta-andmete sisutüübi alla käivad elemendid, mis on metaga seotud. Meta on põhimõtteliselt andmed andmete kohta. See tähendab, et meta-andmed seavad dokumendi valmis renderdamiseks ja muudeks toiminguteks.

Siia alla kuuluvad järgnevad elemendid: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> ja <title>.

Interactive content ehk interkatiivne sisutüüp

Siia alla kuuluvad elemendid, mis on interkatiivsed (ehk kasutaja saab näiteks nupule vajutada jne).

Interkatiivse sisutüübi elemendid on järgmised: <a>, <audio> (kui kontrollnupud on esindatud), <button>, <embed>, <iframe>, <img> (kui usemap atribuut on olemas), <input> (kui type attribute väärtuseks ei ole hidden), <keygen>, <label>, <object> (kui kui usemap atribuut on olemas), <select>, <textarea>, <video> (kui kontrollnupud on esindatud).

Palpable content ehk nähtav sisutüüp

Tegemist on väga laia sisutüübiga, sest siia alla kuuluvad kõik elemendid, mis on kasutajale nähtavad.

On olemas poolkohustuslik reegel, et kui element lubab enda lapselemendiks Flow või Phrasing sisutüübiga elementi, siis peaks vähemalt üks nendest lapselemenditest olema Palpable content ehk nähtav.

Form-associated content ehk formiga seotud sisutüüp

Form-associated sisutüübi alla kuuluvad elemendid, mis on seotud kuidagi moodi formiga – sidumiseks kasutatakse tihtipeale atribuute (nt. form="form_id") või antud elemendid kirjutatakse formi sisse.

Form-associated sisutüübi elemendid on järgnevad: <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>

Need jagunevad veel omakorda erinevateks alamkategooriateks, kuid see ei ole eriti tähtis – need kõik on formiga seotud. Kui kedagi need alamkategooriad huvitavad, siis siit leiab ametliku dokumentatsiooni.

Script-supporting content ehk skriptiliselt abistav sisutüüp

Skripitiliselt abistav sisutüüp on sisutüüp, mille elementidel ei ole endal ühtegi tähendust – nad lihtsalt aitavad veebilehel erinevaid toiminguid teha.

Script-supporting sisutüübi elemendid on <script> ja <template>

Sisutüüpide kasutamine

Nüüd oleme jõudnud võib olla kõige tähtsama osa juurde – kuidas sisutüüpe tegelikult kasutada.

Sinu õnneks ma võin öelda sulle, et sa ei pea pähe õppima sisutüüpe ja mis elemendid nende alla kuuluvad – selleks on meil internet ja ajapikku jäävad need sulle ise meelde.

Kui sul tekib kahtlus, kas mingi element võib käia teise elemendi sees, siis mine kas MDN web docs lehele või ametlikule HTMLi elementide dokumentatsiooni.

MDN web docs kasutamine

Võtame näiteks kõige klassikalisema näite – kas <p> element võib käia <h1> elemendi sees.

Ma lähen MDN web docs‘i ja sisestan otsingusse “h1” ja vajutan enter.

Valin (praegusel juhul) esimese tulemuse “<h1>-<h6> – The HTML h1 – h6 elements represent six levels of section headings.”

Klikkan sellel ja esimese asjana vaatab mulle otsa sinine kast, kus on kirjas kaks järgmist rida:

  • Content categories – sisutüüp, kuhu element ise kuulub
  • Permitted content – lubatud lapselemendi sisutüüp (praegusel juhul Phrasing sisutüüp)

Kolmanda asjana võib vaadata, millised on lubatud vanemad sellel elemendile (Permitted parents), kuid see pole praegu meile tähtis.

Nüüd lähen tagasi avalehele ja otsin järgmist <p> elementi märksõnaga “p”.

Toimin samamoodi kuni otsa vaatab sinine kast.

Seekord jälgin ühte rida, see kuhu element ise kuulub – Content categories.

<p> element kuulub Flow sisutüüpi (Palpable ei loe, sest see määrab ainult, ära kas element on nähtav või mitte).

Nüüd vaatan, kas elemendil <h1> on Flow sisutüüp lubatud. Märkasin, et ei ole.

Seega <p> element ei tohi käia <h1> elemendi sees.

HTMLi elementide dokumentatsiooni kasutamine

Siin me kahjuks otseselt otsida ei saa, kuid meil on ette antud terve suur tabel erinevatest elementidest.

Kasutades eelmist näidet, siis kõigepealt leiaksin ma üles <h1> elemendi sealt tabelist.

Kasutan selleks näiteks Ctrl+F, et veebilehelt sisu leida.

Kui olen tabelist <h1> elemendi leidnud, siis vaatan viiendat tulpa (seal on kirjas, mis sisutüüpi lapselemendid võivad <h1> elemendil olla).

Näen, et <h1> lapselemendil võib olla Phrasing sisutüüp.

Nüüd otsin üles <p> elemendi ja vaatan kolmandat tulpa (mis näitab, mis sisutüüpides on antud element).

Näen, et <p> element on “Flow” sisutüübis.

Kuna <h1> elemendi lapselemendil võib ainult olla Phrasing sisutüüp, siis ma ei saa panna <p> elementi lapselemendiks.

Ja nii lihtne ongi teada saada, kas element sobib mingi elemendi lapselemendiks või mitte.

Transparent content ehk sõltuv sisutüüp

Võib olla märkasid sa, et osadel elementidel on lubatud lapselemendi sisutüübiks transparent.

Tegemist ei otseselt ühegi sisutüübiga, sest see on sõltuv sisutüüp.

Nimelt oleneb see emaelemendist (või vanemast elemendist, millel on täpselt paigas lubatud sisutüüp) ehk see element, millel on lubatud lapselemendi sisutüübiks transparent, sõltub see vanemast, millel on kindlalt sisutüüp paigas.

Ei saa aru? Proovime näite abil.

Võtame näiteks ühed klassikalisemad elemendid – <a> (lingi element) ja <p> (tekstilõigu element) ning oletame, et <a> on <p> elemendi lapselement.

<a> elemendil on kirjas, et lapselemendi sisutüübiks on transparent ehk sõltuv sisutüüp vanemast.

Seega on praegusel juhul lubatud <a> elemendi lapselemendi sisutüübiks on Phrasing, sest <p> elemendil on lubatud Phrasing sisutüüp.

Sama kehtib ka siis kui on mitu transparent elementi üksteise sees – sisutüübi määrab vanem, kellel on see täpselt olemas ehk kindlalt määratud.

Erandid

Nagu ikka on olemas ka erandeid.

Esimene erand on see, et teatud elementidel on ainukesteks lubatud lapselementideks kindlad elemendid. Näiteks võib tuua <html> (lubatud lapselemendid <head> ja <body>) või <select> (lubatud lapselemendid <option> ja <optgroup>).

Õnneks neid ei ole palju ja neid on üsnagi lihtne õppida.

Osadel elementidel aga ei ole lubatud ühtegi lapselementi, sest nendel ei ole vaja lapselemente. Need on isesulguvad elemendid. Näiteks võib tuua <img />.

Veel on olemas erinevaid elemente, mille üles loetlemine ei oleks eriti mõtekas, sest sisu sõltub, kas elemendi asukohast või atribuutidest. Lisaks sellele on need elemendid tihedalt seotud teiste tehnoloogiatega, mida ma siin kursuses ei õpeta, aga tulevikus kindlasti.

Võib olla märkasid, et olemas on ka selline tore asi nagu sectioning root, kuid sellest räägin ma teistes postitustes.


Ongi HTMLi õige versioon elementide ja lapselementide suhetest läbi võetud.

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 *