Jak działa i skąd się wziął internet
Niekiedy można mieć wrażenie, że internet jest z nami od zawsze. Czy wiemy jednak jak i kiedy powstał? Jakie są podstawy jego działania?
Dużo ludzi mówi, że HTML jest prosty. Jednak jakimś cudem prawie nikt nie potrafi go poprawnie używać. Jeżeli uważasz, że Ty potrafisz, to zapraszam do sprawdzenia się. Ile z tagów znałeś i rozumiałeś?
O tym czym jest semantyczny HTML i kiedy trzeba go używać pisałem już wcześniej. Jeżeli nie wiesz, to zerknij tam najpierw - to raptem kilka minut czytania.
Jest też już tekst na temat “rdzenia” struktury aplikacji i stron internetowych. Mowa o landmarkach HTML, które wytyczają kluczowe elementy naszych widoków. Nie będę ich tutaj umawiał.
Ten artykuł skupi się na mniej znanych lub często źle używanych tagach, które dopełniają landmarki. Wejdźmy więc na wyższy poziom!
Istnieje ponad 100 semantycznych tagów HTML. Zachęcam do zapoznania się z nimi, na przykład na stronie Mozilli. Tutaj omówimy te, które powinny być najczęściej przydatne w codziennej pracy. Zgodnie z ideą, która przyświeca temu blogowi - krótko, zwięźle. Maksimum wartości, minimum wkładu Twojego czasu.
Bardzo ciekawy tag, szczególnie dzięki jednemu atrybutowi, ale po kolei. Oczywiście wydzielamy nim informacje o czasie lub dacie. Na przykład <time>24 marca</time>
.
Jednak najciekawiej dzieje się kiedy dodamy do niego atrybut datetime
. Dzięki temu, że stosujemy w nim określone formaty dat i godzin, mogą one wpływać na:
Jeżeli nie podamy tego atrybutu, ale treść tagu będzie datą lub godziną w poprawnym formacie, to uzyskamy taki sam efekt jak z atrybutem. Musimy tylko pamiętać, że data lub czas muszą byc bezpośrednim dzieckiem tagu time
.
Na Mozilla MDN możesz sprawdzić przykłady poprawnych formatów.
Wiem, że to wydaje się oczywiste, ale nie jest! Chyba najczęściej źle używany tag jaki istnieje. Jest ich 6 wariantów, od H1 do H6. Bardzo często można usłyszeć, że stosujemy je ze względu na różne rozmiary, ale zupełnie nie o to chodzi. Nagłówki mniejszego stopnia bez problemu mogą być tego samego rozmiaru.
Ich celem jest tworzenie struktury informacji. H1 zazwyczaj służy do opisania tytułu sekcji. Mitem jest to, że możemy mieć tylko jeden taki tag na stronę. Możemy mieć ich całą masę, o ile poprawnie ich używamy.
Kiedy więc będzie użyty niepoprawnie?
1<main>
2 <section>
3 <!-- Dobrze! Sekcja wręcz powinna mieć nagłówek
4 Co więcej, jest to sekcja najwyższego stopnia, więc użycie H1 jest właściwe
5 -->
6 <h1>Dania kuchni polskiej</h1>
7 <p>Kuchnia polska to wiele wspaniałych smaków. Poznaj klasyczne dania</p>
8
9 <article>
10 <!-- Źle, w tej sekcji, wyżej już mamy H1. Ten tytuł poniżej to tytuł
11 kolejnej, ZAGNIEŻDŻONEJ sekcji bądź artykułu. Musi więc być niższego,
12 kolejnego stopnia - H2
13 -->
14 <h1>Dania mięsne</h1>
15 <p>...</p>
16
17 <section>
18 <!-- Źle, pominęliśmy nagłówek drugiego stopnia -->
19 <h3>Pierogi z mięsem</h3>
20 </section>
21 </article>
22 </section>
23<main>
24
Musisz sobie wyobrazić, że każdy Twój widok, strona, jest jak mini-książka, na przykład podręcznik do biologii.
<title>
. Jest on jeden na stronę, fajnie jakby był unikalny.<h1>
, które dzieliły się na poddziały. Na przykład “Ciąża, poród, laktacja”, która z kolei pasuje do naszego <h2>
.<h3>
<h1>
Po co to wszystko? Wyszukiwarki, jak Google, ale także czytniki ekranowe i inne narzędzia asystujące, nie są w stanie (przynajmniej na ten moment) odgadnąć jak treści na Twojej stronie są powiązane.
To, że dla człowieka jest to oczywiste, bo wystarczy rzucić okiem, nie ma tutaj znaczenia. Dla maszyny jest to zlepek znaków i jedyne co może jej pomóc, to ustalone z góry zasady.
Jeżeli chcesz docierać do większej liczby odbiorców i sprawiać by Twoje rozwiązania były dostępne dla każdego, nie możesz ignorować tych zasad.
Ciekawostka, istnieje też tag <hgroup>
, który służy to opakowywania headingów (czyli tytułów) wraz z podtytułami.
Header i heading - łatwo pomylić, ale to zupełnie różne rzeczy. Header, bo o nim tutaj mowa może mieć kilka zastosowań. Błędem jest założenie, że służy tylko do tworzenia górnej części strony, gdzie zwykle mamy nawigację.
Może być do tego użyty, ale to tylko jedna z opcji.
Header służy też do opakowywania wszelkich wstępnych treści, na przykład:
Przykładowe użycie:
1<section>
2 <h1>Products list</h1>
3 <article>
4 <header>
5 <h1>VR headset</h1>
6 <img src="..." alt="White VR headset" />
7 </header>
8 <p>This headset will make you feel like you're in another world!</p>
9 </article>
10</section>
Nie tylko na dosłownie artykuły. Ten tag używamy wtedy kiedy chcemy opakować jakiś zbiór informacji ściśle powiązanych ze sobą. Takich, które po takim opakowaniu są kompletne oraz niezależne od reszty strony. To znaczy, że moglibyśmy je wyciąć i wrzucić w dowolne inne miejsce aplikacji, nie zmieniając ich sensu. Najłatwiej przedstawić to na przykładach z życia:
Dobrze żeby taki <article>
miał w sobie nagłówek odpowiedniego poziomu. To jaki poziom będzie odpowiedni, będzie zależeć od struktury całej strony - tak jak to opisałem wcześniej. Przykład użycia article znajdziesz wyżej, przy omawianiu <header>
.
Ten tag jest opakowaniem na treści tylko częściowo związane z główną treścią. To może być jakaś ciekawostka, informacje uzupełniające. Często aside
występuje w formie sidebara, czyli dodatkowej kolumny po prawej lub lewej stronie.
1<article>
2 <h1>Jedno miasto, dwa kraje</h1>
3 <p>
4 Cieszyn – miasto w południowej Polsce nad rzeką Olzą, na granicy z Czechami, w województwie śląskim, siedziba władz powiatu cieszyńskiego.
5 </p>
6 <aside>
7 <p>Od końca XIII w. był centrum Księstwa Cieszyńskiego.</p>
8 </aside>
9 <p>Chciałbyś odwiedzić miasto, które łączy kulturę polską i czeską? Ciąg dalszy...</p>
10</article>
Uwaga! Pamiętaj, że kolejność elementów w HTML ma duże znaczenie w przypadku accessibility. Dlatego nawet jeżeli chcesz mieć `aside` po lewej stronie, to lepiej zrobić to za pomocą CSS, ale sam element wstawić za główną treścią.
Chodzi o to, że czytnik ekranowy zacząłby czytać treść od `aside` - czyli zawartość dodatkową, pomocniczą. Będzie to wtedy brzmieć bez sensu.
Te tagi występują zwykle w zestawie. Samo <figure>
służy do wydzielania pobocznej treści, która jest powiązana z główną, ale jej położenie nie odgrywa znaczenia. Może być wstawiona gdzieś na samym końcu, po boku.
Na przykład mogłoby to być zdjęcie przedstawiające rośliny w Puszczy Amazońskiej. Dodatkowo, za pomocą figcaption
(caption z angielskiego to podpis) da się je opisać.
NOTE:
Tag <figcaption>
zapewnia nam accessible description, czyli opis dostępny dla narzędzi pomocniczych, takich jak czytniki ekranowe. Ale uwaga! Pamiętaj, że zdjęcie i tak musi mieć atrybut alt
.
Tylko co w takim razie wpisać w jedno, a co w drugie?
Gdybyśmy użyli tego przykładu z puszczą, a zdjęcie pokazywało drzewa, moglibyśmy stworzyć taki kod:
1<figure>
2 <img src="las.jpg" alt="Wysokie, liściaste drzewa z bujnymi koronami" />
3 <figcaption>Co roku, ogromne ilości lasów są wycinane, a zwierzęta tracą swoje domy.</figcaption>
4</figure>
Prosty w użyciu tag, w dodatku nie jest kapryśny co do tego co w nim się znajduje, ani w czym znajduje się on sam. Można to używać w dowolnym kontekście, który wymaga podania jakichś danych adresowych.
Na przykład w głównej stopce strony, w wizytówce jakiejś osoby, wizytówce firmy (jeżeli na przykład prowadzimy katalog firm).
Na bank słyszałeś o input
, ale czy zetknąłeś się z output
? Tak, mają ze sobą coś wspólnego - muszą występować w parze. Dlaczego?
Rolą tagu <output>
jest wyświetlanie informacji, które są efektem jakichś danych, które wprowadziliśmy. Chodzi o dynamicznie zmieniającą się treść. Dobrym przykładem byłby kalkulator BMI, kojarzysz?
Trzeba podać wzrost oraz wagę, a efektem będzie wskaźnik informujący (w mocno uproszczony sposób) czy kilogramy, które na sobie nosimy są w sam raz, jest ich za mało lub za dużo.
Zobacz jak taki kalkulator wyglądałby przy użyciu naszego tagu output
. Zwróć tylko uwagę na to, że użyłem tam Reacta, więc niektóre atrybuty są inne (htmlFor
zamiast “normalnego” for
)
Niekiedy można mieć wrażenie, że internet jest z nami od zawsze. Czy wiemy jednak jak i kiedy powstał? Jakie są podstawy jego działania?
Jak chcesz zacząć ogarniać accessibility to zacznij od tej prostej listy. To absolutne konieczności!
Jak sprawdzić czy ktoś nie naciąga nas na kasę, oddając niskiej jakości, niedokończoną stronę? Na co zwrócić uwagę podczas zamawiania i odbioru strony?
Dziwnych zachowań formularzy jest wiele i potrafią one zupełnie zniszczyć odbiór aplikacji przez klientów. Dzisiaj omówimy temat tak żeby ten problem nie dotyka...