Pojawienie się HTML5 było prawdziwą rewolucją w budowie stron internetowych. Umożliwiło bowiem twórcą witryn tworzenie zupełnie nowych typów stron. Takich, które od dawna były potrzebne, ale nie były do tej pory możliwe do stworzenia.
Wprowadzenie nowej technologii jak zawsze wywołało spore zamieszanie. Pojawiło się wiele nowych znaczników i zmiennych, równolegle powstały nowe style CSS (CSS3). Powstały nowe standardy, które miały odmienić Internet na zawsze. Oczywiście jak zawsze nie wszystkie były z początku obsługiwane przez przeglądarki.
Przykładowe różnice miedzy HTML4 i HTML5 przedstawia poniższa grafika.
Jak widać na powyższej grafice wprowadzenie HTML5 wiązało się nie tylko z wprowadzeniem przełomowych rozwiązań jak RWD, ale również z uproszeniem niektórych elementów. Takich jak deklaracja języka, w którym tworzymy stronę czy kodowanie znaków.
Poniżej pokażę wam jak one w praktyce wyglądają.
Zawartość witryny podobnie jak w innych wersjach umieszczamy pomiędzy znacznikami <html></html>. Do rozpoczynającego znacznika warto jest również dodać znacznik lang (ułatwi to wyszukiwarce i przeglądarce określenie języka mówionego w którym zostanie umieszczona treść na stronie).
<html lang=”pl-PL”>W środku znajdują się elementy taki jak <head> i <body>. Ten drugi to ciało naszej strony, umieszczamy w nim więc praktycznie wszystko to co chcemy na niej wyświetlić. W <head> z kolei deklarujemy informacje jakie powinna wiedzieć o naszej witrynie przeglądarka jak np. jaki jest <title> strony, jakiego kodowania użyliśmy.
Dla języka Polskiego najlepszym wyborem będzie:
<meta charset="UTF-8">Oprócz tego warto dodać inne meta znaczniki takie jak np.:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="Opis strony">
<meta name="Keywords" content="Słowa kluczowe">W <head> dodajemy także link łączący naszą witrynę ze stylami CSS i niekiedy JS. Jest to niezbędne by nasza witryna mogła prawidłowo działać i w miarę dobrze wyglądać np:
<link rel='stylesheet' id='dashicons-css' href='style.css' type='text/css' media='all' />Ogólnie struktura strony w HTML5 jest dość prosta – chociaż przyznam, że kiedy pierwszy raz się z nią spotkałam chwyciłam się za głowę. Byłam bowiem przyzwyczajona do trochę innych struktur głównie opartych o same <div>. A tu mała rewolucja. Na szczęście nie byłam w tedy jedyną osobą z tym problem – było to bowiem kilka tygodni może miesięcy po wprowadzeniu HTML5 do użytku.
Do najczęściej używanych elementów blokowych jakie pojawiły się w HTML5 należą:
Wiem, że to dla początkujących brzmi jak czarna magia, ale tak naprawdę to bardzo proste. Wystarczy jedynie podejść do tego na spokojnie. W pierwszym odruchu bowiem nie do końca wiadomo co do czego służy.
Przejdźmy zatem do zadania bardziej praktycznego. Dzięki temu wszystko zacznie być bardziej jasne. Poniżej na obrazku znajduje się schemat prostej witryny, jak widać jest on bardzo podobny do pudełka, aczkolwiek elementy takie jak header czy footer ograniczone są jedynie w tym wypadku o szerokość „ekranu” – czyli obrazka.
Przykładową strukturę strony w HTML5 możecie zobaczyć poniżej:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Przykładowy tytuł</title>
</head>
<body>
<header id="NAGLOWEK">Nagłówek szablonu
<nav id="MENU">Menu nawigacyjne</nav>
</header>
<section id="sekcja">
<article id="TRESC">Treść strony / article</article>
<article id="TRESC">Treść strony / article</article>
</section>
<aside id="INFORMACJE">Dodatkowe informacje np. w panelu bocznym</aside>
<footer id="STOPKA">Stopka serwisu</footer>
</body>
</html>Podstawowym zadaniem sekcji jest grupowanie elementów – najłatwiej porównać to wszystko do budowy budynku z kloców gdzie każdy element ma swoje miejsca. W zależności od sekcji ma ona inne przeznaczenie.
<header>Jak sama nazwa mówi jest to nagłówek. W tej sekcji umieszczamy elementy takie jak:
Menu strony należy umieść miedzy znacznikami <nav> np:
<nav id="MENU">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</nav><aside> reprezentuje tak jak widać na załączonym powyżej obrazku boczny panel strony internetowej. W większości przypadków spotkać go można w różnych szablonach np. dla bloga. Znacznik ten może występować kilkukrotnie.
<section> pełni formę kontenera z pomocą, którego możemy dzielić stronę na części – sekcje. Wiele osób wykorzystuje do tego celu również znacznik <div>. Jest to użyteczny element szczególnie w przypadku jedno stronicowych witryn landing page. Gdzie na jednej stronie mamy wiele rożnych treści, które powinny być podzielone właśnie na sekcje. Każda z tych sekcji powinna mieć własne id.
Z jego pomocą segmentujemy witrynę internetową.
Jest to przestrzeń przeznaczona na tekst i zdjęcia.
Z tego co udało mi się ustalić nie ma ustalonej reguły dotyczącej tego czy nadrzędnym elementem jest <section> czy <article> ich implementacja jest dość elastyczna – można się więc spotkać z sytuacją gdzie <article> zawiera w sobie kilka sekcji jak i odwrotną. Oba znaczniki mogą być używane zamiennie. Trzeba jednak pamiętać by trzymać się raz wybranej hierarchii.
<footer> stanowi przestrzeń zarezerwowaną dla stopki strony internetowej lub artykułu. Zamieścić tu więc można np. dane kontaktowe, dolne menu, różne regulaminy.
W praktyce budowa stron internetowych nieco odbiega od opisanego powyżej schematu. Prawdziwe witryny są dużo bardziej skomplikowane i nie opierają się wyłącznie o HTML5.
Warto jednak podczas przystąpienia do nauki poznać podstawową strukturę.
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…