Na co mi ten HTML?
Przeglądając oferty pracy na frontend developera, zapewne zobaczysz powtarzający się schemat: “znajomość jednego frameworka, biblioteki, jak: React, Vue, Angular”. Nie dziwi zatem, że zaczynając swoją przygodę w frontendem, właśnie tego chcesz się uczyć jak najszybciej. Stąd tematy takie jak HTML i CSS bardzo często traktowane są dość pobieżnie. Jednak chcąc czy nie chcąc, to są to podstawy, bez których strona nie powstanie. Niemniej za HTML-em nie kryje się tylko zwykła struktura strony, są też takie zagadnienia, jak semantyka, SEO i dostępność. Chcesz wiedzieć więcej? Zapraszam do czytania 🙂
HTML – Hypertext Markup Language
Hipertekstowy język znaczników, czyli jak sama nazwa wskazuje to język znaczników, nie język programowania. Za pomocą tych znaczników (tagów) mówimy przeglądarce, czym jest dany element i w jaki sposób ma go wyświetlić.
Oczywiście nie jest tak, że teraz napiszę <p>Mój super paragraf</p> i to zadziała. Trzeba jeszcze przeglądarce dać znać, że będziemy używać html-a. I tu pojawia się anatomia dokumentu HTML .
Niezależnie czy piszemy prostą stronę czy bardziej skomplikowany projekt z użyciem jakiegoś frameworka, zapewne zawsze znajdziemy tam plik z rozszerzeniem .html, który będzie wyglądał mniej więcej tak:
See the Pen
html – 1 by frontowisko (@frontowisko)
on CodePen.
Jest to rodzaj szablonu, dzięki któremu mówimy przeglądarce o typie dokumentu oraz gdzie kończy, a gdzie zaczyna się nasz kod, tj. wszystko to wewnątrz tagu <html>.
head
Jest i <head>, który skrywa wszystkie rzeczy, których nie pokazujemy normalnie użytkownikowi. Natomiast posiada on wszelkie informacje o stronie dla wyszukiwarek, deklaracje, style.
Tutaj znajdziesz szereg znaczników <meta />. Jak widzisz jest on przykładem samozamykającego się tagu, tzn. nie posiada pary: tagu otwierającego i zamykającego.
W metatagach zawierają się metadane. Są to informacje, które chcemy przekazać np. wyszukiwarkom na temat naszej witryny. To właśnie dzięki nim widzimy treści znajdujące się po wpisaniu jakiegoś hasła w google.
Jednymi z metatagów, z którymi najczęściej się spotkasz i które również powinnaś używać, są:
<meta charset="utf-8"/>
odpowiada on za poprawne wyświetlanie znaków.
Oraz <meta name="viewport" content="..."> , standardowo występuje on w takiej formie:
<meta name="viewport" content="width=device-width, initial-scale=1">.
Ten tag mówi przeglądarce, jak renderować stronę na urządzeniu mobilnym, a jego obecność, że strona w ogóle jest dostosowana do tych urządzeń.
body
Body jest głównym elementem strony, zawierającym całą treść strony, widoczną dla użytkownika. To tutaj umieszczamy wszystkie elementy, które tworzą nam kontent.
Jednak zanim do nich przejdziemy, zadajmy sobie pytanie – po co się tak właściwie uczyć tagów HTML?
„Filozofia” dla frontenda
Historia HTML-a sięga 1993 (dobry rocznik! 😀 ). Obecnie mamy wersję HTML5, która została przedstawiona 10 lat temu i wniosła sporo nowości do świata znaczników. Zostały zaprezentowane takie tagi, jak: header, aside, article, section, figure, footer itd.
Czy w takim razie dawanie <div class=”header”> jako kontenera dla headera strony, zamiast użycia znacznika <header> jest błędem?
Ano, tak. Co nie znaczy, że tamto nie będzie działało, bo będzie. Jednak nie będzie to poprawne. I tutaj wkracza trójca: semantyka, dostępność, SEO, która jest ściśle powiązana z HTML-em.
Semantyczny HTML
Semantyka w kontekście stron internetowych odnosi się do używania tagów zgodnie z ich przeznaczeniem. Jeśli chcemy utworzyć nagłówek stosujemy znacznik <h1>...<h5> (heading), jeśli chcemy utworzyć link używamy do tego <a> (anchor), itd.
Często możemy się spotkać z pojęciem “znacznik semantyczny”. Jednak każdy znacznik jest semantyczny, stąd jest to mylny termin. Powstał on najprawdopodobniej przez to, że jedne tagi mają konkretne przeznaczenie, inne nie.
Zobaczmy to na przykładzie <div> i <header> :
<header>
The header element represents a group of introductory or navigational aids.
Reprezentuje grupę wprowadzającą/zapoznawczą lub wspomagającą nawigację.
<div>
The div element has no special meaning at all.
Div nie ma żadnego znaczenia.
I może to wydawać się dziwne, ale…znaczące jest to, że <div> nic nie znaczy. Tym samym możemy go używać do, np. grupowania elementów i dla użytkownika ten element nie pojawia się w żaden specjalny sposób.
Semantyka jest o tyle ważna, ponieważ przeglądarki przedstawiają nam każdy element w określony sposób. Nie mówiąc o tym, że jest to też o wiele czytelniejsze dla developera. Jednak wydaje się, że najważniejszym powodem poprawnego używania znaczników jest też wpływ na SEO i dostępność.
SEO – Search engine optimization
SEO – to nic innego jak pozycjonowanie stron na liście wyników wyszukiwania. I wiadomo, że im wyżej w wynikach, tym lepiej. W końcu rzadko kiedy klika się na 2. czy 3. stronę w wyszukiwarce. Używanie odpowiednich znaczników wpływa na lepsze definiowanie różnych sekcji i układu strony. Sprawia to, że jest ona bardziej informacyjna, a to umożliwia wyszukiwarką (i ich robotom) na lepszą interpretację naszej treści. Tym samym też i na ranking strony oraz jej zasięg.
Dostępność (ang. accessibility)
Dostępność stron internetowych to nic innego, jak zapewnienie tych samych możliwości korzystania z nich najszerszemu gronu odbiorców, bez względu na ich ograniczenia. Najczęściej mówi się o tym w kontekście osób niepełnosprawnych. Jednakże zapomina się o tym, że w obecnych czasach, bardzo dużo czasu spędzamy przed ekranami telefonów, monitorów itd. Co prowadzi do tego, że coraz więcej osób ma problemy ze wzrokiem i prawdopodobieństwo niedowidzenia jest lub też będzie większe. Czy w takim razie zapewnianie dostępności nadal powinno się ignorować?
W niektórych państwach istnieją już przepisy prawne, które regulują poziom dostępności treści na stronach internetowych. W związku z tym można mieć kłopoty, w przypadku niezapewnienia takich ułatwień, gdy zostanie zgłoszona skarga na daną stronę. Istnieje dość obszerna lektura, bo bądźmy szczerzy, jest to dość szeroki temat, która zawiera zbiór wytycznych dla dostępności treści strony, mowa tu WCAG czyli Web Content Accessibility Guidelines.
Jak się ma dostępność do HTML?
Ano tak, że często osoby te korzystają z ,np. czytników ekranowych. Stąd też powtarzane jest jak mantrę, że zdjęcie, o ile nie jest dekoracyjnym, musi być opatrzone atrybutem alt , opisując co ten obrazek przedstawia. A to tylko jeden przykład. No a co z semantyką?
Używanie natywnych znaczników sprawie, że będą one zawsze działać dobrze. Oto nam chyba chodzi, prawda? Bo co innego <div role=button> , a co innego <button>. Te elementy nie będą sobie równe, stąd nie wymyślajmy sami elementów 😉 . Dokumentacja precyzuje przypadki, w których możemy użyć innego taga, niż natywny.
Druga rzecz to pomoc w nawigowaniu i znalezieniu odpowiedniej treści. Bardzo często nawigacja ta opiera się o nagłówkach, ponieważ tworzą one spis treści strony.
Dzięki takim nagłówkom można szybko dotrzeć do treści, które nas interesują – tak jak w książce 🙂 .
Swoją drogą, kiedyś spotkałam się z określeniem „divologia”, czyli umieszczanie wszędzie gdzie się da <div>. Tak nie robimy 😀
Podsumowanie
Chyba już wiesz, czemu warto przysiąść troszkę nad nauką HTML-a? Oczywiście nie mówię, że ma to trwać tygodniami, co to, to nie! Jest on łatwy, szczególnie, że niektórych znaczników pewnie nigdy nie będziesz miała okazji użyć. Jednak chciałam Ci przybliżyć tematy, które są blisko języka znaczników, a o których nie tak często się mówi lub pamięta, czyli semantyka i dostępność. Do nich na pewno jeszcze wrócimy na Frontowisku. Natomiast w następnym wpisie zaprezentujemy i omówimy te ważniejsze tagi HTML-a oraz niektóre ciekawe atrybuty, także bądź z nami 😀 .
#staytuned
