Pojawienie się HTML5 było prawdziwą rewolucją w budowie stron internetowych. Umożliwiło bowiem twórcą witryn tworzenie obiektów o których wcześniej mogli tylko pomarzyć.
Wprowadzono tutaj większy nacisk na specyfikację typów znaczników. Oczywiście z początku nie obsługiwanych przez większość przeglądarek i nieco zagmatwanych dla początkujących. Nowe znaczniki otrzymały określone funkcje oraz przeznaczenie wprowadzając swojego rodzaju porządek.
Co znajdziesz w tym wpisie
Elementy, które uległy zmianie w HTML5
Przykładowe różnice miedzy HTML4 i HTML5 przedstawia poniższa grafika.
W HTML5 zmianie uległ też sposób rozpoczynania samej strony. W efekcie tego nieco inaczej deklarujemy informację o tym, że tworzymy dokument w języku HTML. W HTML 4 deklaracja wyglądała następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Od razu widać więc, że została skrócona i dużo bardziej uproszczona:
<!doctype html>Elementy strony internetowej, które nie uległy zmianie
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' />Elementy występujące w HTML5 – czyli kod prostej strony
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.
Popularne znaczniki stosowane w HTML5
Do najczęściej używanych elementów blokowych jakie pojawiły się w HTML5 należą:
- header – nagłówek
- nav – nawigacja
- section – sekcja
- article – artykuł
- aside – panel boczny
- footer – stopka
- main – główna treść
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.
Struktura przykładowej strony internetowej
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.
Co umieszczamy w znaczniku – HEADER
<header>Jak sama nazwa mówi jest to nagłówek. W tej sekcji umieszczamy elementy takie jak:
- logo (najlepiej podlinkowane do strony głównej)
- baner
- menu (nie zawsze – chociaż powinien być)
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>Co powinno znaleźć się w – ASIDE
<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.
Co to jest – SECTION
<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ą.
Element – ARTICLE
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ę.
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.