Pierwszym elementem każdej strony WWW jest deklaracja języka programowania użytego do jej tworzenia. Dla HTML5 jest to znacznik ˂!doctype html˃. Co widać w ramce obok. Należy dodać, że w poprzednich specyfikacjach języka zapis ten był znacznie bardziej rozbudowany i niejednoznaczny. (Istniały bowiem inne zapisy np. dla stron zawierających strukturę opartą na ramkach)

Kolejnym elementem jest para znaczników - ˂html˃ ˂/html˃ - które określają ramy tworzonego dokumentu. Wszystko co się między nimi zawiera to właściwa zawartość strony WWW. Znacznik ˂html˃ jest zawsze drugim (po ˂!doctype˃) znacznikiem na stronie, a ˂/html˃, ostatnim.

Następna para znaczników - ˂head˃ ˂/head˃ - to nagłówek strony, bezpośrednio nie widoczny, ale zawierający określenia podstawowych właściwości strony.

Para znaczników - ˂body˃ ˂/body˃ - zawiera właściwe ciało strony, a mówiąc prosto to i tylko to co zawiera się pomiędzy tymi znacznikami jest wyświetlane przez przeglądarkę.

Jak widać po zestawieniu przykładów z ramki 1.1 oraz 1.2 podstawowy format strony się nie zmienia. Znaczniki ˂!doctype html˃, ˂html˃ ˂/html˃ ,˂head˃ ˂/head˃ , ˂body˃ ˂/body˃ pozostają na swoim miejscu, a wszystkie zmiany dotyczą jedynie zawartości znacznika ˂body˃ ˂/body˃. Należy więc postawić pytanie czemu ma służyć ta rozbudowa struktury strony WWW. Zwłaszcza, że same użycie w/w znaczników w żaden sposób nie zmienia wyglądu strony, ani rozmieszczenia na niej jej elementów składowych. Odpowiedź na to pytanie jest stosunkowo prosta. Otóż znaczniki te tworzą blokowe ramy dokumentu i umożliwiają im przypisanie określonych styli przy użyciu kaskadowych arkuszy stylów - CSS. O czym będzie mowa w dalszej części niniejszego kursu. Przejdźmy więc do krótkiego omówienia nowych znaczników wprowadzonych przez specyfikacje HTML 5.

Pierwszym z wprowadzonych znaczników jest znacznik - ˂header˃ ˂/header˃. Ma on za zadanie wyodrębnić obszar nagłówka dokumentu HTML.

Proszę zwrócić uwagę na różnicę pomiędzy parą znaczników ˂header˃ ˂/header˃, a parą znaczników ˂head˃ ˂/head˃! Znacznik ˂head˃ dotyczy całej strony WWW, podczas gdy znacznik ˂header˃ dotyczy jedynie pojedynczego dokumentu w obrębie ciała strony.

Kolejna dodana para znaczników - ˂nav˃ ˂/nav˃ - służy do wyodrębnienia części odpowiedzialnej za nawigację na stronie. Należy jednak zwrócić uwagę na fakt, że nawigacja może być prowadzona w oddzielnej ramce (tak jak na przykład na tej stronie)i wtedy ta para znaczników albo nie będzie w ogóle używana, albo będzie jedyną (w obrębie danej podstrony wyświetlanej w danej ramce).

Para znaczników - ˂section˃ ˂/section˃ - to główna część strony zawierająca właściwy tekst i/lub obrazy i/lub multimedia. Może być podzielona znacznikami - ˂article˃ ˂/article˃ - na mniejsze części. Ilość fragmentów zawartych pomiędzy znacznikami - ˂article˃ ˂/article˃ - nie jest w żaden sposób ograniczona.

Następna para znaczników - ˂article˃ ˂/article˃ - Powinna zawierać w sobie spójny co do formy zapis części dokumentu.

Kolejna para znaczników to - ˂aside˃ ˂/aside˃ - Pomiędzy nimi należy umieszczać część stanowiącą uzupełnienie dokumentu.

Wreszcie para znaczników - ˂footer˃ ˂/footer˃ - Ta para znaczników pełni rolę stopki dokumentu i zamyka stronę.

Wydawać by się mogło, że tak rozbudowana struktura strony niczemu nie służy i jest tak naprawdę sztuką dla sztuki. Wprowadzenie jednak podziału ciała strony na sekcje może nam znacznie ułatwić tworzenie strony WWW. Wyobraźmy sobie sytuację w której chcemy stworzyć stronę pomagającą w samodzielnej budowie PC-ta. I tak w części nagłówkowej (pomiędzy znacznikami - ˂header˃ ˂/header˃ -)umieścimy tytuł strony oraz podstawową informację o czym ona jest i w jaki sposób możemy ją wykorzystać. Sekcję section podzielimy znacznikami - ˂article˃ ˂/article˃ - na trzy podsekcje z których pierwszą poświęcimy właściwemu doborowi parametrów PC-ta do potrzeb jego przyszłego użytkownika. Drugą podsekcję sposobowi doboru poszczególnych elementów w taki sposób aby jednocześnie spełniały wymagania określone w pierwszej podsekcji jak i były również kompatybilne między sobą. Wreszcie trzecią podsekcję poświęcimy właściwemu montażowi naszego PC-ta oraz jego uruchomieniu. Pomiędzy znacznikami - ˂nav˃ ˂/nav˃ - umieścimy elementy naszego menu umożliwiającego nawigację pomiędzy artykułami. Pomiędzy znacznikami - ˂ aside˃ ˂/aside˃ - umieścimy zestawienia wykorzystanych podzespołów i ich ewentualnych zamienników, a w stopce (pomiędzy znacznikami - ˂footer˃ ˂/footer˃ -) informacje o nas, oraz o stronach WWW z których korzystaliśmy itp.