HTMLi kursuse 10.1 osa konspekt - content models

Postituse enda võid leida siit

Plokk- ja siseelemendid lõpuks õigeks

Olen varem öelnud, et plokkelemendid ei tohi käia plokkelementide sees (välja arvatud juhul, kui element ei ole sektsioonielement), kuid HTMLis ei ole tegelikult sellist reeglit.

Plokkelemendid võivad käia teiste sees.

Ainukene elemendi liik, mille lapselemendiks ei tohi olla plokkelement on siseelement.

Veel, mida ma alguses sulle lihtsamaks tegin olid sektsioonielemendid - HTMLis otseselt sellist elemendi kategooriat ei ole nagu seda on plokkelemendid ja siseelemendid.

Nagu võid aru saada, siis HTML5'es enam plokk- ja siseelemendid enam nii väga ei loe.

Mis aga määrab HTML5'es ära, et millised elemendid võivad käia teiste sees on Content Model.

Content Models ehk sisutüübid

Sisutüübid jagunevad järgnevalt:

Flow sisutüüp

Flow sisutüübi alla käivad elemendid, mida eeldatakse, mis on tavalises dokumendis olemas (selletõttu on neid ka palju).

Heading sisutüüp

Heading sisutüüp on pealkirjade sisutüüp - siia alla käivad ainult h elemendid.

Phrasing sisutüüp

Phrasing sisutüübi alla käivad elemendid, mis on tihedalt seotud teksti või sisuga.

Embedded sisutüüp

Embedded sisutüüp on manuse sisutüüp ehk siia kuuluvad kõik elemendid, mis saavad sisu välisallikatest.

Metadata sisutüüp

Metadata sisutüübi alla käivad elemendid, mis on seotud meta-andmetega (andmed andmete kohta).

Interactive sisutüüp

Interactive sisutüüp on sisutüüp, mille elemendid on interaktiivsed (ehk kasutaja saab näiteks nupule vajutad).

Palpable sisutüüp

Palpable sisutüübi alla kuuluvad kõik elemendid, mida on näha.

Form-associated sisutüüp

Form-associated sisutüübi juurde käivad elemendid, mis on tihedalt seotud formidega.

Script-supporting sisutüüp

Script-supporting on skriptiliselt abistav sisutüüp ehk siia alla kuuluvad elemendid on skriptidega seotud.

Sisutüüpide kasutamine

Et teada saada, kas mingi element sobib teise elemendi sisse, siis tuleks minna, kas MDN web docsi või HTMLi ametlikku dokumentatsiooni.

Ükskõik kummalt saidilt tuleks üles leida vastav emaelement ja vaadata, mis on lubatud lapselementide sisutüüp (MDN -> Permitted content; HTML dokum. -> Children).

Kui see on teada, siis tuleks leida vastav lapselement ja vaadata, mis sisutüüpi see element kuulub (MDN -> Content categories; HTML dokum. -> Categories).

Kui emaelemendi lubatud sisutüüp ja lapselemendi sisutüüp klapivad, siis võib lapselemendi emaelemendi sisse lisada.

Transparent sisutüüp

Vahetevahel võib leida, et lubatud lapselemendi sisutüübiks on "Transparen".

Lühidalt öeldes on transparent sisutüüp sõltuv sisutüüp ehk elemendi lubatud sisutüüp on emaelemendist sõltuv (lapselement pärib emaelemendi sisutüübi).