Modele treści HTML5

> Dodaj do ulubionych

Każdy element HTML5 może zaliczać się do zera lub większej liczby kategorii. Kategorie to grupy elementów o podobnych właściwościach i zastosowaniu. Wyróżnia się 7 głównych kategorii elementów, które mogą zawierać dodatkowe podkategorie. Główne kategorie to:

Wzajemne relacje między tymi kategoriami przedstawia poniższy schemat.

Schemat przedstawiający modele treści HTML5

Elementy treści sekcyjnej, nagłówkowej, syntagmatyczne, treści osadzonej oraz treści interaktywnej są rodzajami treści układowej. Metadane czasami należą do treści ogólnej dokumentu. Czasami metadane i treść interaktywna należą do elementów syntagmatycznych. Treść osadzona to również typ elementów syntagmatycznych, a czasami treści interaktywnej.

Istnieją też elementy o specyficznych wymogach, które nie należą do żadnej kategorii.

Metadane

Metadane to rodzaj treści, który wpływa w jakiś sposób na prezentację lub zachowanie pozostałej treści, określa relacje bieżącego dokumentu z innymi dokumentami lub dostarcza jakichś innych dodatkowych informacji.

Do grupy tej zaliczają się następujące elementy:

base, command, link, meta, noscript, script, style, title

Elementy ogólnej treści dokumentu

Do tej grupy zalicza się większość elementów używanych w elemencie body dokumentu. Do grupy tej zaliczają się następujące elementy:

a, abbr, address, area (pod warunkiem, że jest potomkiem elementu map), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progres, q, ruby, s, samp, script, section, select, small, span, strong, style (jeśli ma zdefiniowany atrybut scoped), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr, zwykły tekst

Elementy podziału na sekcje

Elementy podziału na sekcje definiują zasięg nagłówków i stopek. Do grupy tej zaliczają się następujące elementy:

article, aside, nav, section

Elementy nagłówkowe

Elementy nagłówkowe oznaczają nagłówki sekcji. Do grupy tej zaliczają się następujące elementy:

h1, h2, h3, h4, h5, h6, hgroup

Elementy syntagmatyczne

Treść tekstowa to tekst dokumentu i elementy używane do jego znakowania wewnątrz akapitów. Treść tekstowa tworzy akapity. Do grupy tej zaliczają się następujące elementy:

a (jeśli zawiera tylko treść tekstową), abbr, area (jeśli jest potomkiem elementu map), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (jeśli zawiera tylko treść tekstową), dfn, em, embed, i, iframe, img, input, ins (jeśli zawiera tylko treść tekstową), kbd, keygen, label, map (jeśli zawiera tylko treść tekstową), mark, math, meter, noscript, object, output, progres, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, zwykły tekst

Elementy treści osadzonej

Treść osadzona to treść importująca do dokumentu zewnętrzne zasoby albo treść należąca do innego słownika, która została wstawiona do dokumentu. Do grupy tej zaliczają się następujące elementy:

audio, canvas, embed, iframe, img, math, object, svg, video

Elementy treści interaktywnej

Treść interaktywna to treść z przeznaczona do interakcji z użytkownikiem.

a, audio (jeśli ma zdefiniowany atrybut controls), button, details, embed, iframe, img (jeśli ma zdefiniowany atrybut usemap), input (jeśli atrybut type nie jest ustawiony na hidden), keygen, label, menu (jeśli atrybut type jest ustawiony na toolbar), object (jeśli ma zdefiniowany atrybut usemap), select, textarea, video (jeśli ma zdefiniowany atrybut controls)

Elementy formularzy

Elementy formularzy to dodatkowa kategoria elementów, które mogą znajdować się w elemencie form i mają atrybut form pozwalający powiązać je z wybranym formularzem. Do grupy tej należą następujące elementy:

button, fieldset, input, keygen, label, meter, object, output, progres, select, textarea

Elementy formularza dzielą się dodatkowo na kilka podkategorii.

Elementy z listy (ang. listed elements)

Elementy, które są wymienione w API form.elements i fieldset.elements.

button, fieldset, input, keygen, object, output, select, textarea

Elementy etykietowalne (ang. labelable elements)

Elementy, które można wiązać z elementem label.

button, input (jeśli atrybut type nie jest ustawiony na hidden), keygen, meter, output, progres, select, textarea

Elementy do zatwierdzania (ang. submittable elements)

Elementy, które mogą służyć do tworzenia zbioru danych formularza po jego zatwierdzeniu przez użytkownika.

button, input, keygen, object, select, textarea

Elementy resetowalne (ang. resettable elements)

Elementy, na których zawartość ma wpływ resetowanie formularza.

input, keygen, output, select, textarea

Elementy przezroczyste

Element o przezroczystym modelu treści musi mieć taką strukturę, aby usunięcie go i zastąpienie jego elementami potomnymi nie powodowało błędów strukturalnych dokumentu.

Przezroczystymi elementami są np. del i ins:

<p>Dodaj 3 szklanki <del><em>octu</em></del> <ins>wody</ins>.</p>

Usunięcie tych elementów nie spowoduje, że ta część dokumentu HTML będzie niepoprawna (chociaż będzie miało wpływ na jakość treści).

<p>Dodaj trzy szklanki <em>octu</em> wody.</p>

Elementy treści wyczuwalnej

Do grupy tej zaliczają się następujące elementy:

a, abbr, address, article, aside, audio (jeśli jest zdefiniowany atrybut controls), b, bdi, bdo, blockquote, button, canvas, cite, code, details, dfn, div, dl (jeśli dzieci elementu zawierają przynajmniej jedną grupę nazwa-wartość), em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input (jeśli atrybut type nie jest ustawiony na hidden), ins, kbd, keygen, label, map, mark, math, menu (jeśli atrybut type jest ustawiony na toolbar lub list), meter, nav, object, ol (jeśli wśród dzieci tego elementu znajduje się przynajmniej jeden element li), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul (jeśli wśród dzieci tego elementu znajduje się przynajmniej jeden element li), var, video, tekst nie będący białym znakiem wewnątrz elementu