Dzisiaj bierzemy na warsztat nowe znaczniki w języku HTML5 i zmiany, które ze sobą niosą. Chodzi przede wszystkim o ułatwienie pracy nad kodem i jego lepszą semantykę.

Ten artykuł jest częścią serii kurs HTML dla zielonych.
Przeczytaj też: jakie są podstawowe znaczniki w HTML.

Mamy XXI wiek, komputery rozwijają się w niesamowitym tempie i to, co dzisiaj kupiliśmy jako nowe i najwydajniejsze, już jutro może być uznane za niemodne i dużo słabsze niż było wczoraj.

W przypadku tworzenia stron internetowych i powiązanych z nimi technologii, w dużej większości są one dostępne bezpłatnie i jedyne co musisz zrobić, by z nich korzystać, to nauczyć się je obsługiwać.

Często każda kolejna wersja potrafi przynieść ogromne zmiany w stosunku do poprzednika, czy to w wydajności, czy też w wyglądzie i zachowaniu.

Przejdźmy więc do najnowszego standardu HTML5 i zobaczmy dlaczego warto mu się przyjrzeć.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

HTML 5 to przede wszystkim krótszy DOCTYPE (element mówiący przeglądarce z jakiego typu stroną ma do czynienia), który sprowadza się do jednej linijki. Dzięki temu nareszcie staje się łatwy do zapamiętania:

Charset (zestaw znaków) UTF-8:

A przykładowy kod zgodny z HTML 5 wygląda następująco:

 

Nowe znaczniki w HTML5

Wielką nowością są znaczniki, dzięki którym nie musisz non stop stosować divów i nadawać im id lub klas. Stosowanie tych znaczników zwiększa czytelność i semantykę (znaczenie) kodu.

Zobacz o czym mówię.

 

<header>

Nagłówek dla naszej strony lub sekcji. Zazwyczaj zawiera w sobie znaczniki h1-h6, formularz wyszukiwania, nawigację czy logo. Nie ma ograniczeń co do ilości takich nagłówków.

Przykład użycia:

 

<section>

Tworzy sekcję dokumentu, czyli grupę z treścią, która różni się od innych treści zawartych na stronie. Taka sekcja powinna zawierać nagłówek.

Dobrym przykładem jest książka. Mamy tam rozdziały, które w HTMLu wyglądałyby właśnie jak sekcje.

Warto wiedzieć, że section nie używa się po to, żeby stworzyć coś na wzór diva, który po ostylowaniu będzie tylko pojemnikiem na inne elementy.

W takich sytuacjach użyj po prostu znacznika <div>. W section musi istnieć zawartość, która w jakiś sposób wyróżnia się na tle strony – porusza inny temat, przedstawia coś innego (przykład z książką).

Pewnie już domyślasz się jak mógłby wyglądać taki kod z sekcją:

 

<article>

W tagu <article> umieszczamy treść, która ma jakieś znaczenie i mogłaby zostać umieszczona na stronie bez względu na jej pozostałą treść.

Oznacza to, że <article> jest dobrym miejscem na komentarz, treść posta na forum czy blogu lub treść newsa. Często zawiera nagłówek, który może znajdować się w elemencie <header>.

 

<nav>

W tym znaczniku powinna znajdować się główna nawigacja naszej strony, czyli odnośniki pozwalające poruszać się po witrynie. Nie chodzi tutaj jednak o wszystkie linki na stronie, a o te główne, najważniejsze jeśli chodzi o nawigację.

Przykładowe użycie: menu na stronie, spis treści, formularz wyszukiwania, paginacja strony,  tak zwane breadcrumbs (linki pokazujące gdzie aktualnie jesteś na stronie).

 

<aside>

W aside umieszczamy treść, która nie jest bezpośrednio związana z główną treścią strony, a jest dodatkiem – takie lekkie odbiegnięcie od tematu. Jeżeli tego dodatku by nie było, cała treść nadal miałaby swój sens i zachowała wartość.

Przykład: sidebar na stronie. Mimo, że cała strona dotyczy jakiegoś tematu i każdy artykuł który się na niej znajduje traktuje o czymś innym, to sidebar zazwyczaj pozostaje taki sam na wszystkich podstronach.

Czyli w jakiś sposób „odchodzi w bok”, jak mówi sama nazwa znacznika. Jednak ten sidebar ciągle jest powiązany ze stroną, bo przecież na stronie poświęconej językowi HTML5 czy PHP nie umieścisz ogłoszenia o sprzedaży samochodów. 

Ważna uwaga: <aside> powinien zawierać treść odbiegającą nieco od tematu, ale weź pod uwagę znacznik, w którym <aside> się znajduje. Jeżeli wrzucimy <aside> do <article>, to w <aside> powinny być informacje „dodatkowe” dla głównej treści zawartej w <article>.

Jeżeli natomiast <aside> jest w postaci sidebara czy innego elementu, to pewnie ten sidebar jest otoczony główną treścią strony i nie jest nigdzie zagnieżdżony (nie znajduje się w innym znaczniku). Wtedy w takim sidebarze powinna znajdować się treść odnosząca się do całej strony internetowej.

 

<footer>

<footer> czyli stopka elementu, w którym się znajduje. Takich <footer>ów możemy umieścić wiele.

Zazwyczaj zawiera informacje o elemencie, w którym się znajduje, np. o autorze, odnośniki z menu, dane kontaktowe, dodatkowe informacje czy linki społecznościowe.

 

<main>

Stworzony po to, by wskazywał główną treść na stronie. Główną to znaczy taką, której poszukuje użytkownik, czyli bez menu strony, logo, stopki i innych niepotrzebnych do przeczytania artykułu elementów.

Używając tego znacznika urządzenia takie jak czytniki ekranów będą wiedziały gdzie znajduje się najważniejsza treść strony.

Przykład:

 

Z tymi właśnie znacznikami będziesz miał najczęstszy kontakt przy tworzeniu swoich stron.

Sposób ich używania zależy tylko od Ciebie – projektanta strony, który wie najlepiej kiedy zastosować dany tag, a kiedy użyć innego.

Jak sam widzisz czytelność kodu pisanego z wykorzystaniem znaczników HTML5 ulega znacznej poprawie w porównaniu do HTML4.

Nie mamy już całej masy <div>ów, które dało się rozszyfrować tylko patrząc na ich klasy lub ID. Teraz strony nabierają przejrzystości i czytelności.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Co jeszcze przynosi język HTML5?

Oprócz wyżej podanych znaczników, HTML5 wprowadza jeszcze kilka nowości, o których warto wspomnieć.

Element <canvas> umożliwia rysowanie prosto w dokumencie HTML, wykorzystując skrypty JavaScript.

Formularze otrzymały nowe artybuty: required, autocomplete, multiple, min, max czy autofocus. Pojawiły się nowe typy pól input.
Zamiast najczęściej wpisywanego „text”, teraz mamy do wyboru: time, date, email, url, search, color, range, tel i więcej.

Pojawiła się geolokalizacja, która umożliwia określenie położenia osoby korzystającej ze strony.

Zmianą, która nieco rewolucjonizuje odtwarzanie wideo i muzyki na stronach internetowych jest wprowadzenie znaczników <audio> i <video>.
Dają one możliwość odtwarzania mediów na stronie bez potrzeby instalacji dodatkowych wtyczek czy używania oprogramowania Flash.

 

Nic dziwnego, że coraz więcej potężnych firm i koncernów używa technologii zawartych w HTML5 do tworzenia własnych stron.

Stawiając na najnowsze technologie zapewniają sobie jednocześnie wyższe dochody, bo ich strony wyglądają i funkcjonują dużo lepiej, a programiści potrzebują dużo mniej czasu, by taką stronę stworzyć.

Jeżeli chcesz nauczyć się tworzyć strony internetowe, a jeszcze nigdy na poważnie tego nie robiłeś, możesz zacząć od mojego kursu HTML.

Dzięki niemu zrozumiesz podstawy działania tych wszystkich technologii w prosty sposób – czarno na białym.

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • Mam problem. Na mojej strone zdjecia nie wyświetlaja sie przegladarce Internet Exproler. Tego problemu nie ma w innych przegladarkach.

  • >