LOGO.css HyperText Markup Language

Komponenty języka HTML


Język HTML składa się z kilku kluczowych komponentów:
znaczników (i ich atrybutów),
typów danych,
referencji znakowych,
odwołań w postaci encji,
deklaracji typu dokumentu.

Znaczniki

Znaczniki stanowią podstawowy komponent języka HTML. Charakteryzują je dwie cechy: atrybuty i zawartość. Każdy atrybut i zawartość musi spełniać określone wymagania, aby dokument został poprawnie zwalidowany pod kątem zgodności ze standardem. Znacznik zwykle rozpoczyna się znacznikiem otwierającym (np. <nazwa-znacznika>), a kończy znacznikiem zamykającym (np. </nazwa-znacznika>). Atrybuty elementu są zawarte w znaczniku otwierającym (po nazwie znacznika), natomiast zawartość umieszczana jest pomiędzy znacznikiem otwierającym i zamykającym. (np. <nazwa-znacznika atrybut="wartość">zawartość</nazwa-znacznika>). Niektóre elementy, np. <br>, <hr> nie posiadają zawartości, a także znacznika zamykającego.

W nomenklaturze polskiej, dotyczącej języka HTML, słowa element używa się do określenia grupy:

Słowami znacznik określa się znacznik otwierający (wraz z zamykającym) w znaczeniu elementu składni języka HTML, np. "Do wyszczególnienia paragrafów wykorzystuje się znacznik <p>". Niektórzy słowa element używają zamiennie ze słowami znacznik lub tag.

Niektóre elementy nie wymagają znaczników końcowych (np. <p> odpowiadający za nowy akapit) lub ich nie mają (<img> wstawiający obrazek lub <br> łamiący linię).

Poniżej przedstawione są różne typy znaczników języka HTML.

Strukturalne – opisują logiczną strukturę tekstu, np. <h2>Golf</h2> nadaje znaczenie wyrazowi "Golf" i traktuje go jako nagłówek drugiego stopnia. Podczas renderowania (wyświetlania) zostanie on zaprezentowany w sposób wyróżniony (np. większą i pogrubioną czcionką). Znaczniki strukturalne nie definiują sposobu wyświetlania elementu, jednak większość przeglądarek posiada wbudowane style, których używa, gdy do dokumentu nie jest dołączony żaden

Prezentacyjne – opisują wygląd poszczególnych elementów, np. <b>lama</b> powoduje, że "lama" zostanie wyświetlona pogrubioną czcionką. Nie daje jednak żadnych wskazówek urządzeniom nie potrafiącym wyświetlić pogrubionego tekstu (takim jak syntezatory mowy, czytający daną stronę na głos). W przypadku <b>pogrubienia</b> oraz <i>pochylenia</i> istnieją równoważne znaczniki, mające podobną lub taką samą formę wizualną, ale posiadające naturę semantyczną. Są to odpowiednio <strong>silne wzmocnienie znaczenia</strong> oraz <em>wzmocnienie znaczenia</em>. W tym przypadku łatwiej określić zachowanie syntezatora mowy podczas interpretacji takich znaczników np. poprzez mocniejsze zaakcentowanie danego wyrażenia. Znaczniki semantyczne nie są jednak stuprocentowymi odpowiednikami znaczników prezentacyjnych. Istnieją sytuacje, gdy tylko wizualnie chcemy wyróżnić daną część tekstu. Nie jest pożądane, aby syntezator mowy wzmacniał znaczenie np. tytułu książki w trakcie czytania strony, podczas gdy wizualnie warto byłoby taki tytuł wyróżnić czcionką pochyłą dla poprawienia czytelności tekstu. Większość znaczników prezentacyjnych w specyfikacji HTML 4.0 oznaczono jako przestarzałe na rzecz kaskadowych arkuszy stylów CSS.

Hipertekstowe – zawierają linki do innych dokumentów lub innych części tego samego dokumentu. HTML aż do wersji XHTML 1.1 wymaga do utworzenia hiperłącza elementu o nazwie anchor (pol. kotwica), zapisywanego w postaci: <a>Wikipedia</a>. Oprócz tego atrybut href musi zwierać poprawny adres URL. Następujący kod HTML <a href="http://pl.wikipedia.org/">Wikipedia</a> wyświetli ciąg znaków " jako hiperłącze.

Atrybuty

Większość atrybutów elementów składa się z par nazwa-wartość, rozdzielonych znakiem "=", zawartych w znaczniku otwierającym elementu, po jego nazwie. Wartość może być zawarta w pojedynczych lub podwójnych cudzysłowach. Przy niektórych wartościach cudzysłowy mogą być pominięte (tylko w specyfikacji HTML, nie XHTML), jednak nie jest to zalecane, a wręcz praktyka taka uznana jest na niebezpieczną. W przeciwieństwie do atrybutów w postaci par nazwa-wartość istnieją atrybuty mające wpływ na element poprzez samo ich zawarcie w znaczniku otwierającym[27] (np. ismap atrybut dla znacznika img[28]).

Znaczna część elementów może posiadać standardowe dla znaczników atrybuty: id, class, style, title, a także atrybuty związane z językiem lang i dir.

Atrybut id nadaje elementowi unikatowy identyfikator. Może on zostać użyty przez arkusze stylów do sprecyzowania wyglądu tego elementu lub przez skrypty np. do zmiany jego zawartości. Atrybut class służy do sklasyfikowania elementów dla celów prezentacyjnych. Dokument HTML lub zbiór takich dokumentów może używać klasy class="stopka", sugerując, że powinny być one wyświetlone na dole strony w postaci stopki. Elementy posiadające taką klasę mogą otrzymać styl, dzięki któremu zamiast wyświetlać się w miejscu występowania w kodzie HTML, będą zaprezentowane na dole strony w postaci stopki.

Autor może użyć znacznika style, aby nadać styl konkretnemu elementowi w kodzie HTML. Dobrą praktyką jest jednak nadanie elementowi unikatowego identyfikatora id, odnosząc się prezentacji tego znacznika w arkuszu stylów. Czasem jest to jednak nieporęczne podczas szybkiego testowania wyglądu elementów. Atrybutu title używa się w celu dodania do elementu informacji tekstowej. W wielu przypadkach zawartość atrybutu title wyświetlana jest w postaci podpowiedzi (tooltip), pojawiającej się na ekranie po najechaniu myszą na dany element. Wykorzystanie tych atrybutów może ułatwić znacznik span, należący do grupy znaczników typu inline.

<span id="ZadaneId" class="DanaKlasa" style="color:blue;" title="Hypertext Markup Language">HTML</span>

Powyższy kod wyświetli niebieski napis HTML (najechanie wskaźnikiem myszy na skrót HTML powinno w większości przeglądarek wyświetlić podpowiedź z rozwinięciem skrótu).

Encje i referencje znakowe

Począwszy od wersji 4.0, HTML definiuje listę 252 encji oraz 1114050 symboli znakowych, pozwalających na zapisanie określonych znaków za pomocą specjalnych stałych. Niektóre znaki można również zapisać dosłownie. Znak wprowadzony dosłownie i jego odpowiednik w postaci określonej stałej uznawane są za równoważne i są identycznie renderowane.

Zdolność alternatywnego zapisu znaków specjalnych "<" i "&" (zapisywanych odpowiednio jako &lt; i &amp;), umożliwia ich interpretację jako zwykłych znaków, zamiast traktowania ich jako istotnych elementów składni języka. Przykładowo, dosłownie zapisany znak "<" wskazuje na początek znacznika otwierającego, a "&" wskazuje na rozpoczęcie ciągu znaków, mającego być zinterpretowanym jako encja lub symbol (referencja znakowa). Zapisanie tego znaku jako "&amp;" lub "&#x26;" lub "&#38;" pozwala na użycie "&" w wartości elementu lub wartości atrybutu. Znak podwójnego cudzysłowu, ", użyty w wartości atrybutu, także musi zostać zapisany jako "&quot;" lub "&#x22;" lub "&#34;", gdyż wartość atrybutu sama jest opatrzona z obu stron właśnie takimi cudzysłowami (wprowadzonymi do kodu dosłownie). Ponieważ autorzy stron często zapominają o używaniu stałych, przeglądarki stały się pod tym względem bardzo tolerancyjne, traktując znaki wprowadzone dosłownie jako kod, tylko w przypadkach, gdy dalszy ciąg kodu wskazuje na użycie tych znaków jako elementów składni języka.

Alternatywnego zapisu znaków (zwanego także ucieczką, ang. escaping) używa się do wprowadzania symboli, których nie da się łatwo wpisać dosłownie z klawiatury. Np. symbol "é", wykorzystywany standardowo tylko w klawiaturach zachodnioeuropejskich, może być zapisany jako encja &eacute; lub jako referencja znakowa &#233; lub &#xE9;. Znaki zawarte w referencjach (czyli "&", ";", litery w słowie "eacute" itd.) są dostępne na wszystkich klawiaturach i we wszystkich kodowaniach znaków, podczas, gdy znak "é" – nie.

Typy danych

HTML definiuje kilka typów danych, wprowadzanych jako wartości elementów lub atrybutów. Są to m.in. skrypty (script data), dane arkuszy stylów (stylesheet data), identyfikatory, nazwy, adresy URI, liczby, jednostki miary długości, języki, deskryptory mediów, kolory, kodowania znaków, data i czas, itp.

Deklaracja typu dokumentu

Aby uaktywnić definicję typu dokumentu (DTD) do celów poprawnej walidacji utworzonej strony, a także w celu uniknięcia działania przeglądarek w trybie quirks, dokument powinien rozpoczynać się deklaracją typu dokumentu (nieformalnie DOCTYPE). DTD, do którego odwołuje się sekcja DOCTYPE, zawiera gramatykę i zasady wykorzystywania znaczników w dokumencie podporządkowanemu określonemu DTD. Większość graficznych przeglądarek korzysta z sekcji DOCTYPE, a także innych dodatkowych informacji, warunkując tryb renderowania danej strony.

Przykład:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Powyższa deklaracja odwołuje się do wersji Strict DTD specyfikacji HTML 4.01, która nie posiada znaczników prezentacyjnych, takich jak <font>, wykorzystując w tym celu kaskadowe arkusze stylów oraz znaczniki <span> i <div>. Walidatory kodu odczytują DTD w celu poprawnego sparsowania dokumentu i przeprowadzenia jego walidacji.

Dodatkowo HTML 4.01 obsługuje jeszcze wersje Transitional i Frameset. Wersja Transitional została stworzona w celu płynnego przejścia do wersji Strict, natomiast wersja Frameset obsługuje dokumenty wykorzystujące mechanizm ramek.



Projekt oraz wykonanie - Szymon Jasiński
html_logo html_logo html_logo