HTML - Elementy

HTML jest językiem znacznikowym, co oznacza, że kod tworzony za jego pomocą składa się z elementów definiujących budowę dokumentu. Każdy element ma swoje znaczenie i precyzyjnie określa jak przeglądarka ma się zachować po jego napotkaniu. Elementy HTML dzieli się ze względu na pełnione funkcje, tak więc wyszczególnia się grupy elementów: główny, metadanych, sekcji, grupujące treść, tekstu, edycji, osadzające treść, hiperłącza, tabelaryczne, formularzy, interaktywne, skryptów.

Ponieważ większość elementów zawiera treść, posiadają one znacznik początkowy (otwierający) i znacznik końcowy (zamykający), ale HTML udostępnia również szereg elementów pustych, składających się z jednego znacznika.

Zobacz:


Elementy zawierające treść

Elementy zawierające treść rozpoczyna znacznik początkowy (otwierający), a kończy znacznik końcowy (zamykający). Wszystko co znajduje się pomiędzy znacznikami elementu jest jego treścią. Może to być na przykład sam tekst, ale mogą to być także inne elementy. W znaczniku początkowym elementu, w zależności od potrzeb, można dodać atrybuty określające dodatkowe informacje o elemencie. Aby element został poprawnie domknięty, w znaczniku końcowym nazwa elementu musi być bezwzględnie poprzedzona znakiem "/".

Składnia elementu:

<element atrybut> treść elementu </element>

W większości elementów używanie atrybutów nie jest wymagane, ponieważ stanowią one dodatkowe informacje, które nie są konieczne do prawidłowego działania elementu.

Przykład:

<p>To jest akapit</p>

Jednak część elementów do prawidłowego działania wymaga określenia od razu specyficznych atrybutów. Tak jest na przykład z hiperłączem, w którym konieczne jest określenie za pomocą atrybutu adresu sieciowego celu hiperłącza.

Przykład:

<a href="/www.e-zoner.pl">To jest link prowadzący do witryny www.e-zoner.pl</a>
Należy zawsze pamiętać o domykaniu elementów. Brak domknięcia elementu spowoduje, że przeglądarka nie będzie w stanie określić, gdzie kończy się treść objęta danym elementem, więc kolejne elementy, będą traktowane tak, jakby znajdowały się wewnątrz niedomkniętego elementu.

Elementy puste

Elementy nie zawierające treści rozpoczynają się i kończą w jednym znaczniku. W przypadku elementów pustych zawartość nie jest konieczna, gdyż informacje jaką niosą wpisane są w ich istotę, bądź umieszczane w atrybutach.

Składnia elementu:

<element atrybut>

Podobnie jak w przypadku elementów zawierajacych treść, również elementy puste mogą występować bez dodatkowych atrybutów. Doskonałym przykładem może być tutaj element przełamujący wiersz.

Przykład:

<br>

Inne elementy puste wymagają atrybutów w celu prawidłowego działania. Tak jest na przykład z elementem osadzającym grafikę, w którym konieczne jest określenie adresu sieciowego, oraz alternatywnego opisu dla grafiki, która ma być umieszczona na stronie w przewidzianym dla niej miejscu.

Przykład:

<img src="/www.e-zoner.pl/e-zoner.jpg" alt="logo e-zoner">

Grupy elementów

Podział na grupy elementów o oparciu o specyfikację HTML 5.1 Nightly.

Grupa elementów Elementy
główny (root) html
metadane head, title, base, link, meta, style
sekcje body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
grupujące treść p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div, main
tekstowe a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr
edycja ins, del
osadzające treść img, iframe, embed, object, param, video, audio, source, track
hiperłącza a, area
tabelaryczne table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
formularze form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
interaktywne details, summary, menu, menuitem, dialog
skrypty script, noscript, template, canvas