Przeglądanie stron internetowych w XXI wieku stało się naszą codzienną rutyną, zupełnie niczym poranne picie kawy, czy herbaty. Czytane niegdyś gazety papierowe zastąpiliśmy portalami informacyjnymi, firmowe wizytówki tekturowe wymieniliśmy na innowacyjne witryny. Sklepy stacjonarne zaś z roku na rok są coraz rzadziej odwiedzane przez konsumentów, którym często wygodniej jest robić po prostu zakupy online. Strony internetowe można, więc śmiało stwierdzić towarzyszą nam każdego dnia. Zanim jednak my użytkownicy będziemy mieli okazji taką stronę odwiedzić, musi ona zostać zbudowana przez web developerów, którzy krok po kroku zaimplementują określone jej elementy i funkcje. Zaglądając do wnętrzności stron internetowych, możemy ujrzeć niezliczone linijki kodu i różnorodne bloki, w których umieszczana jest sama treść witryny. To nic innego jak właśnie znaczniki HTML, które poznamy bliżej w tym artykule.
Co to jest HTML i co trzeba o nim wiedzieć?
HTML to skrót oznaczający HyperText Markup Language, tłumacząc zaś na polski “hipertekstowy język znaczników”. Często błędnie nazywany językiem programowania, służy tak naprawdę do budowy dokumentów hipertekstowych, najczęściej właśnie stron internetowych. HTML za pomocą znaczników umożliwia nam zbudowanie szkieletu, uporządkowanie struktury oraz rozmieszczenie elementów na stronie. Warto jednak na wstępie zaznaczyć, że sam język znaczników tu nie wystarczy, byśmy powstały w ten sposób twór nazwali stroną. Do nadania odpowiedniego wyglądu i estetyki stronie musimy sięgnąć jeszcze po tzw. kaskadowe arkusze stylów CSS (Cascading Style Sheets). Można powiedzieć, że są one swojego rodzaju dopełnieniem dla języka HTML.
Wracając jednak do tematu znaczników, możemy wyróżnić wiele ich typów, gdzie każde z nich spełnia inną rolę. Treść właściwą najczęściej (choć nie zawsze) umieszczamy w samym środku, tuż po otwarciu znacznika i przed jego zamknięciem, co zresztą zobaczymy na wielu przykładach, omawianych w tym artykule.
Szablon strony i jego podstawowe znaczniki HTML
Znaczniki HTML można śmiało podzielić na te, które organizują i uporządkowują nam strukturę dokumentu oraz te, których używamy do umieszczania treści. Zacznijmy, więc od najważniejszych składowych każdego szablonu strony internetowej.
- <!DOCTYPE html> – jest to oznaczenie, że dany dokument jest dokumentem HTML,
- <html>…</html> – między tymi znacznikami znajduje się tak naprawdę cała zawartość strony internetowej,
- <head>…</head> – część strony, w której umieszczane są przeróżne informacje o stronie, istotne dla przeglądarek, czy wyszukiwarek internetowych, lecz niewidoczne gołym okiem dla użytkownika tej strony,
- <meta> – tu możemy wyróżnić kilka różnych meta tagów, w zależności, z jakich atrybutów one korzystają. Istotne meta tagi dla pozycjonowania to chociażby “meta description”, czy “meta robots”. Możemy się spotkać też z innymi np. meta charset, który to odpowiada za kodowanie strony,
- <title>…</title> – tytuł strony, widoczny w pasku przeglądarki oraz wyników wyszukiwarki Google,
- <script> … </script> – znacznik, służący do umieszczania w nim wewnętrznie lub do podpinania zewnętrznie skryptów takich jak np. JavaScript,
- <body>…</body> – po otwarciu tego znacznika umieszczamy całą zawartość strony widoczną dla użytkowników.
Kolejne istotne dla omawianego tematu są znaczniki znajdujące się już wewnątrz <body>. Z racji tego, że jest ich naprawdę wiele, przedstawimy te najbardziej istotne lub występujące z największą częstotliwością.
Kontener div
Dawniej do wyszczególnienia konkretnej sekcji na stronie posługiwano się znacznikami <section>. Dziś jednak nie są one już stosowane, odkąd ich miejsce zajęły na stałe kontenery <div>
Uwielbiane przez programistów, gdyż dają tak naprawdę duże możliwości, jeśli chodzi o porządkowanie strony i nadawanie jej elementom indywidualnego wyglądu poprzez style CSS. Najczęściej w zestawie ze znacznikiem <div> pojawia się jego najpopularniejszy atrybut, czyli class. Jest to dosłownie klasa, dzięki której możemy zdefiniować konkretne ustawienia w stylach CSS dla danego diva i jego elementów, występujących wewnątrz.
Co najważniejsze wewnątrz takiego kontenera możemy umieszczać także inne znaczniki HTML.
Przykład:
<div class=”przyklad”>
<h1>Przykładowy nagłówek </h1>
<p> Przykładowy tekst HTML wewnątrz kontenera</p>
</div>
Nagłówki h1, h2, h3 i tak dalej
Nagłówki służą nam najczęściej do wyróżniania na stronie najważniejszych haseł, myśli, czy śródtytułów nawiązujących do akapitów. Na tle bloków tekstowych zdecydowanie odznaczają się one najbardziej. Stopni nagłówków jest kilka, zaczynając od <h1>, na <h6> kończąc. W hierarchii strony (jak i również w SEO) najważniejszy jest pierwszy z nagłówków, czyli <h1> dlatego właśnie w obrębie danej podstrony serwisu powinien on wystąpić dokładnie raz. Kolejne nagłówki, czyli h2, h3 itd. mogą występować już częściej.
Nagłówki na stronie internetowej i ich zastosowanie można, więc śmiało porównać do książki. Tytuł książki jest tylko jeden, tak samo jak w przypadku strony nagłówek h1. Podobnie, jak książka bez rozdziałów, czy podrozdziałów, czymże byłby artykuł blogowy na stronie internetowej bez odpowiednich śródtytułów, mających nam zasygnalizować co znajdziemy w następnym akapicie. Tak, więc stosowanie nagłówków nie służy jedynie samej stronie, ale również i jej odbiorcom, którzy dzięki temu lepiej ją odbierają. Przypominamy również jak niezwykle ważne są one pod kątem SEO – chcąc dowiedzieć się więcej na temat tego dlaczego nagłówki są ważne dla pozycjonowania, odsyłamy do jednego z naszych wcześniejszych wpisów – https://kompan.pl/blog/naglowki-h1-h2-h3-jak-wazne-sa-dla-pozycjonowania/ .
Przykłady nagłówków:
<h1>To jest przykładowy nagłówek h1</h1>
<h2>To jest przykładowy nagłówek h2</h2>
Paragrafy
Paragrafy to prawdopodobnie znaczniki o największej częstotliwości występowania w kodzie strony. Służą do umieszczania tekstów w formie akapitów. Nie oznacza to jednak, że w znaczniku <p> znaleźć się może jedynie długi blok tekstowy, gdyż może się tam znaleźć równie dobrze pojedyncze zdanie, zazwyczaj jednak dłuższe niż sam nagłówek, w którym to umieszczamy raczej bardziej kluczowe i krótkie hasła, idealne do wyróżnienia.
Paragrafy oznaczamy jak można się domyślić znacznikiem <p>
Przykład:
<p>To jest przykładowy tekst umieszczony w paragrafie.</p>
Zdjęcia i grafiki
Chyba nikt nie wyobraża sobie strony internetowej bez zdjęć, czy grafik. W końcu nawet umieszczenie logotypu firmy wiąże się z zaimplementowaniem grafiki w kodzie strony. Do osadzania grafik służy znacznik <img>. Przy czym różni się on od większości znaczników tym, że zawartość, czyli w tym przypadku grafika nie jest umieszczana pomiędzy tagiem otwierającym a zamykającym, lecz poprzez atrybut “href”. Różnicę widać gołym okiem na poniższym przykładzie:
<img href=”/sciezka-do-zdjecia” alt=”Opis alternatywny” title=”Tytuł grafiki”/>
Widać, więc doskonale, że znacznik ten nie posługuje się dwoma tagami, jak większość wcześniej przytoczonych przykładów. Dodatkowo za pomocą atrybutów “alt”, czy “title” można zdefiniować tekst alternatywny (w momencie, gdy strona nie może wyświetlić danej grafiki) i kolejno tytuł obrazka, który możemy ujrzeć po najechaniu kursorem myszki na tę grafikę.
Linki
Hiperłącza to kolejne elementy, bez których o sprawnie działającej stronie moglibyśmy jedynie pomarzyć. To właśnie one umożliwiają nam swobodne nawigowanie po stronie, co jest szczególnie ważne w przypadku rozbudowanych stron, takich jak np. sklepy internetowe. Linki można znaleźć nie tylko w menu, ale również w artykułach blogowych, czy na liście kategorii produktowej, kiedy to chcemy przejść do karty konkretnego produktu. Zastosowań linków, więc jak widać, nie brakuje, dowiedzmy się zatem jak poprawnie umieszczać je na stronie.
Przykłady:
<a href=”/sciezka-wzgledna>Przykładowy link HTML</a>
<a href=”https://adres-strony/sciezka-bezwgledna>Przykładowy link</a>
Tutaj podobnie jak w przypadku zdjęć konieczne jest użycie atrybutu “href”. Odesłanie do strony docelowej jest możliwe na dwa sposoby: poprzez podanie ścieżki względnej, czyli skróconego adresu URL, jeśli jest to link wewnętrzny do innej podstrony serwisu, czy poprzez podanie ścieżki bezwzględnej, czyli pełnego adresu URL, jeśli hiperłącze ma nas odesłać do innej domeny.
Wypunktowanie, czyli lista
W momencie, gdy coś na stronie wymaga wypunktowania, czy wyliczenia, warto posłużyć się listami. Obecnie w HTML mamy dwa znaczniki, umożliwiające umieszczenie listy:
- lista uporządkowana – znacznik <ol>, czyli lista numerowana cyframi
- lista nieuporządkowana – znacznik <ul>, czyli lista wypunktowana
Dodatkowo każdy punkt, czy podpunkt umieszczany musi być między znacznikami <li>…</li>.
Przykładowa lista:
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>
Warto również wspomnieć, że listy HTML dają nam możliwość również ich mieszania i zagnieżdżania. Wówczas tworzymy kolejną listę wewnątrz znaczników <li>…</li> jak na przykładzie poniżej:
<ol>
<li>Punkt pierwszy:
<ul>
<li>Podpunkt pierwszy</li>
<li>Podpunkt drugi</li>
</ul></li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>
Różne sposoby wyróżnienia tekstu
Budując stronę w HTML, dysponujemy również znacznikami, które pomogą nam zaznaczyć najistotniejsze fragmenty w tekście lub takie, które chcemy koniecznie wyróżnić.
Są to przede wszystkim:
- <strong>…</strong> – pogrubienie tekstu
- <i>…</i> lub <em>…</em> – pochylenie tekstu
- <u>…</u> – podkreślenie tekstu
Jest jeszcze kilka innych znaczników “ozdabiających” tekst, lecz zdecydowanie trzy powyżej uwzględnione można spotkać w kodzie strony najczęściej.
Podsumowując, HTML to bogaty w przeróżne znaczniki język, a każdy z tych znaczników pełni inną funkcję na stronie. Oczywiście poznanie podstawowych znaczników nie wystarczy, żeby w pełni wykorzystać potencjał HTML. Od momentu ich poznania do budowania w pełni funkcjonalnych stron jeszcze długa droga, a oprócz nich samych warto również przyswoić wiedzę z zakresu CSS, czy chociażby języka programowania JavaScript.
Paweł Maciejewski
Specjalista ds. SEO