Co to jest HTML?
Przeglądając ulubione serwisy informacyjne, korzystając z social mediów czy odbierając e-maila na poczcie elektronicznej, prawdopodobnie nie zastanawiasz się nad tym, jak to wszystko działa. Dla osób, które na co dzień nie zajmują się programowaniem może być to czarna magia, dlatego nie warto zawracać sobie tym głowy, prawda? Za działanie serwisów internetowych odpowiada ogrom mechanizmów, jednak podstawą w większości przypadków jest znacznik HTML.
Początki tego zagadnienia sięgają lat 80. ubiegłego wieku, kiedy to fizyk Tim Berners-Lee stworzył prototyp hipertekstowego systemu informacyjnego. Po wielu ulepszeniach i modyfikacjach w 1991 roku pojawiła się pierwsza, publicznie dostępna wersja języka HTML. Dziś bez niego serwisy internetowe nie mogłyby istnieć. Czym jest HTML i na czym polega jego działanie?
Czym jest HTML?
Zacznijmy od tego, co właściwie oznacza termin HTML. Skrót pochodzi od wyrażenia z j. ang. – „HyperText Markup Language”, które po polsku brzmi „hipertekstowy język znaczników”. Na pierwszy rzut oka wygląda skomplikowanie, dlatego warto rozłożyć to wyrażenie na dwie części:
- Hipertekstowy (HyperText) – oznacza to, że dotyczy on tworzenia dokumentów hipertekstowych. A czym jest taki dokument? Zawiera on treści, które automatycznie mogą przekierować użytkownika do innych informacji za pomocą hiperłączy, czyli inaczej linków.
- Język znaczników (Markup Language) – jest to język, który do tworzenia struktury hipertekstu wykorzystuje znaczniki nadające jego poszczególnym elementom znaczenie semantyczne.
HTML to podstawa tworzenia stron internetowych, odpowiada on za to, jak wygląda treść na stronie, która wyświetla się użytkownikom. Dzięki niemu zwykły tekst w Internecie może nabrać zupełnie innej struktury. Język znaczników HTML pozwala dodawać w tekście takie elementy, jak:
- nagłówki,
- akapity,
- listy,
- wyróżnienia (pogrubienia, podkreślenia),
- hiperłącza,
- grafiki.
HTML nie jest językiem programowania
HyperText Markup Language (HTML) często kojarzony jest z programowaniem. Mimo że język znaczników i język programowania dotyczą tego samego, czyli tworzenia serwisów internetowych, nie są to pojęcia tożsame. HTML odpowiada za strukturę informacji zawartych na stronie WWW – może nadać poszczególnym fragmentom tekstu jakieś cechy (pogrubienie, nagłówek itp.). Nie odpowiada jednak za funkcje serwisu. Oznacza to, że HTML nie służy do projektowania i obsługiwania interakcji użytkownika z serwisem internetowym. Inaczej mówiąc, jeśli strona WWW pozwala Ci wykonać jakieś zadanie czy obsługiwać zewnętrzne urządzenia, to nie jest za to odpowiedzialny język HTML. Do przetwarzania danych i wykonywania obliczeń służy właśnie język programowania.
Jednym z najpopularniejszych języków programowania jest JavaScript, który umożliwia wdrażanie na stronach internetowych skomplikowanych, interaktywnych elementów. Dzięki niemu serwis nie tylko wyświetla informacje w formie statycznej, ale również przetwarza dane i pozwala na dodawanie elementów dynamicznych. Dlatego tworząc profesjonalną i rozbudowaną stronę internetową, która spełnia wiele funkcji, Web Deweloperzy zawsze pracują zarówno ze standardowym językiem znaczników HTML, jak i językiem programowania. Do tego dochodzi jeszcze jeden, stały element, ale o nim za chwilę.
Jak stworzyć stronę za pomocą języka znaczników HTML?
Jak już wiesz, do stworzenia rozbudowanej strony, która będzie profesjonalne prezentowała się użytkownikom, potrzeba czegoś więcej niż języka HTML. Jednak jest to podstawa, od której wszystko się zaczyna i na której buduje się resztę strony. A jak się to robi? Wbrew pozorom, aby zacząć, nie potrzeba specjalistycznych programów i narzędzi. Szkielet HTML strony możesz stworzyć nawet w zwykłym notatniku, który na pewno masz na swoim komputerze. Oczywiście istnieją specjalne programy do tworzenia struktury w języku znaczników HTML, jednak równie dobrze można to zrobić bez nich. Wystarczy zapisać plik z notatnika w rozszerzeniu „html”.
Oczywiście zapisanie pliku z notatnika to jedno, ale rozpisanie całej struktury strony HTML to drugie. Do tego potrzebna jest odpowiednia wiedza, przede wszystkim z zakresu znaczników HTML, które odpowiadają za poszczególne cechy tekstu. Warto wiedzieć, że nawet najmniejszy błąd popełniony w trakcie kodowania może wpłynąć na wygląd i działanie stron internetowych, a także zaszkodzić poszczególnym fragmentom tekstu.
Komponenty języka HTML
Można powiedzieć, że HyperText Markup Language (HTML) jest organizerem strony. Porządkuje on jej zawartość, ale robi to za pomocą odpowiednich komponentów, które trzeba uwzględnić podczas tworzenia struktury serwisu. Oto podstawowe komponenty języka znaczników HTML.
Znaczniki lub tagi
Znaczniki nazywane też tagami to podstawa języka HTML. To właśnie na nich opiera się cały proces projektowania struktury serwisu i to one decydują o tym, co wyświetli się użytkownikom. Są to zazwyczaj wyrazy lub pojedyncze litery zamknięte w ostrych nawiasach, czyli „<” oraz „>”. Tagi mogą być pojedyncze lub podwójne. Te drugie występują znacznie częściej. Składają się na nie znaczniki otwierające oraz zamykające i wyglądają tak: <znacznik> treść </znacznik>. Najpopularniejsze znaczniki HTML w HyperText Markup Language to:
- <html> – definiuje cały dokument i oplata treść znajdującą się na stronie, pomiędzy znacznikiem otwierającym a zamykającym znajdują się zarówno instrukcje dla przeglądarek, jak i treści dla użytkowników;
- <head> – zawiera podstawowe informacje na temat strony np. tytuł, skrypty, style itp.;
- <meta> – definiuje meta dane dokumentu;
- <title> – definiuje tytuł dokumentu;
- <script> – pozwala na umieszczenie skryptu w kodzie;
- <body> – zawiera wszystko to, co wyświetla się użytkownikowi na stronie;
- <p> – paragraf tekstu;
- <a> – odnośnik wewnętrzny lub zewnętrzny;
- <img> – plik graficzny;
- <b> – pogrubienie tekstu;
- <table> – tabela;
- <form> – formularz.
Oczywiście jest to tylko niewielka część wszystkich tagów, których używa się do określenia struktury strony HTML. Jeśli nie masz zamiaru zajmować się tworzeniem serwisów internetowych, nie musisz ich wszystkich znać. Warto jedynie wiedzieć, że znaczniki HTML opisują zawartość strony i przekazują przeglądarkom informacje na temat tego, jak mają one wyświetlać tę zawartość użytkownikom. Dzięki ogólnie przyjętym standardom każdą przeglądarkę dokładnie w ten sam sposób interpretują tagi HTML umieszczone w dokumencie strony.
Atrybuty znaczników HTML
Atrybuty znaczników HTML to inaczej dodatkowe cechy czy informacje, które opisują cały element. Umieszcza się je w tagu otwierającym, a każdy z nich ma dodatkowo jakąś wartość. Cały atrybut wygląda zatem tak: nazwa=wartość, natomiast cały element może wyglądać tak: <tag nazwa atrybutu=’wartość atrybutu’> treść </tag>.
Przykładowo atrybutem tagu <img> może być szerokość (width) pliku graficznego, natomiast wartością tego atrybutu będzie 200. Innym przykładem może być tag <a> dotyczący odnośnika zewnętrznego lub wewnętrznego. Jego atrybutem będzie href, a wartością tego atrybutu adres URL.
Atrybuty są niezbędne do tego, aby składowe języka znaczników działały poprawnie i mogły w odpowiedni sposób opisywać poszczególne elementy tekstu na stronie.
Typy danych
Dane wykorzystywane w tworzeniu szkieletu strony za pomocą HyperText Markup Language (HTML) można podzielić na kilka typów. Dotyczą one przede wszystkim wartości elementów i atrybutów. Podstawowe typy danych to:
- kolory,
- wymiary,
- skrypty,
- języki,
- kodowanie znaków,
- czas i data,
- style,
- adresy URI,
- identyfikatory.
Encje i referencje znakowe
HyperText Markup Language (HTML) w nowszych wersjach, czyli od 4.0, określa listę 1114050 symboli znakowych oraz 252 encji. Pozwalają one na alternatywny zapis określonych znaków za pomocą specjalnych stałych. Przykładowo znak „<” można zapisać jako „<”. Po co się to robi? Jak już wiesz, ostry nawias jest elementem składowym języka znaczników – jest to początek tagu otwierającego i zamykającego. Używanie takich znaków w tekście może skutkować tym, że roboty przeglądarki źle zinterpretują ich funkcję i nazwą je właśnie kodem HTML. Taka sytuacja mogłaby przyczynić się do powstania błędów na stronie.
Deklaracja typu dokumentu
W dokumencie strony deklaracja jego typu określana jest w ten sposób: <!doctype html>. Umieszczenie takiego znacznika oznacza, że kod strony będzie pisany w najnowszej wersji standardu HTML, czyli HTML5. Tak naprawdę nie jest to typowy znacznik, jak np. <body> czy <a>. Jest to raczej instrukcja dla przeglądarki, którą umieszcza się w dokumencie HTML na samym początku, jeszcze przed tagiem <html>.
Jak wygląda szkielet HTML?
Szkielet strony napisany w hipertekstowym języku znaczników (HTML) składa się dwóch głównych elementów: sekcji head (głowa) i sekcji body (ciało). Taką strukturę można porównać do organizmu człowieka – głowa odpowiedzialna jest za sterowanie całym ciałem, ale z zewnątrz nie widać, co jest w środku; informacje znajdujące się w głowie przekładają się na to, co robi ciało i to jest już widoczne z zewnątrz.
Podstawowy szkielet HTML strony wygląda tak:
Wszystkie elementy HTML widoczne na grafice zostały pokrótce opisane nieco wyżej. Znacznik <!doctype html> to wskazówka dla przeglądarki, która mówi o tym, z jakiej wersji standardu języka będziemy korzystać – nie zawiera się ona pomiędzy znacznikami <html> a </html>. Tam znajdują się oczywiście dwie główne sekcje, czyli head i body, w których umieszcza się wiele dodatkowych elementów. To, co widzisz, jest tylko podstawą – taki szkielet strony nie będzie wyświetlał w przeglądarce żadnej zawartości. Tworzenie serwisu HTML można porównać do stawiania budynku. Szkielet dokumentu jest podstawą, czyli gruntem, a znaczniki to kolejne cegiełki, z których tworzy się jedną spójną całość. Aby nadać stronie wartość poprzez stworzenie struktury, Web Developer dodaje kolejne tagi, zaczynając od sekcji head, przechodząc przez sekcję body i kończąc na znaczniku zamykającym cały dokument, czyli </html>.
Sekcja Head strony
Można powiedzieć, że sekcja head strony to poniekąd centrum dowodzenia. To właśnie w tym miejscu znajdują się wszystkie istotne informacje o serwisie, a także podpięte dodatki, które usprawniają działanie serwisu lub pozwalają śledzić jego statystyki. Nie wyświetlają się one jednak użytkownikowi na stronie.
W sekcji head umieszcza się takie elementy, jak:
- tytuł strony;
- informacje o autorze strony;
- informacje dotyczące języka;
- podstawowy adres URL;
- arkusze stylów;
- skrypty języka kodowania np. JavaScript;
- kod analityczny Google Analytics (aby możliwe było śledzenie statystyk strony).
Wszystkie wymienione elementy to raczej instrukcje dla przeglądarki internetowej, których nie widzi człowiek, odwiedzając stronę. Jednak w sekcji head umieszcza się również takie elementy jak meta description i title. Można je uznać za wyjątek, ponieważ mimo że nie wyświetlają się bezpośrednio na stronie, użytkownik widzi je w wyszukiwarce, czyli na stronie SERP (Search Engine Results Page), po wpisaniu odpowiedniej frazy.
Meta title to tytuł strony lub podstrony należącej do domeny. Wyświetla się on w wynikach wyszukiwania największą czcionką i zbudowany jest – a właściwie powinien być – z ok. 65 znaków. Meta tytuł to znacznik, który liczy się zarówno dla robotów przeglądarki, jak i dla użytkowników – w obu przypadkach jego zadaniem jest opisanie zawartości poszczególnych podstron. Na jego podstawie użytkownik może zdecydować, że chce odwiedzić daną stronę, czy raczej nie. Meta description to natomiast opis strony lub podstrony. Jest on nieco dłuższy od tytułu, a wynikach wyszukiwania wyświetla się pod nim mniejszą czcionką.
Podstawowe tagi, które umieszcza się w sekcji head to:
- <title>,
- <style>,
- <script>,
- <link>,
- <meta>,
- <base>.
Po umieszczeniu wszystkich informacji, które powinny znaleźć się w head strony, konieczne jest umieszczenie tagu zamykającego tę sekcję, czyli </head>.
Sekcja Body strony
Po zamknięciu sekcji head przechodzi się do obszaru, w którym powinny znaleźć się treści dla użytkownika, czyli do body strony. To właśnie tam znajdują się wszystkie informacje, elementy czy funkcje, jakich szuka użytkownik, wpisując konkretną frazę w wyszukiwarce – jest to tzw. treść właściwa dokumentu. Oprócz samej treści w sekcji body należy umieścić również znaczniki dotyczące formatowania, odnośników zewnętrznych i wewnętrznych, plików graficznych, nagłówków, list, tabel i wszystkich innych elementów, które definiują zawartość serwisu internetowego.
Przykładowe tagi, które umieszcza się w sekcji body to:
- <p>,
- <a>,
- <b>,
- <img>,
- <h1>,
- <i>,
- <video>,
- <ol>.
Sekcja body – tak samo, jak head – powinna zakończyć się tagiem zamykającym, w tym przypadku będzie to oczywiście </body>.
Czym jest i do czego służy CSS?
Wiesz już, co robi HTML, ale wiesz również, że język znaczników nie wystarczy do tego, aby stworzyć atrakcyjną, interaktywną i rozbudowaną witrynę internetową. Hipertekstowy język znaczników HTML pozwala zarządzać treścią, jaka wyświetli się użytkownikowi na stronie i określać, jak ma wyglądać jej podstawowy układ (paragrafy, nagłówki, wyróżnienia, listy itp.). Jednak nie odpowiada on za wygląd wszystkich znajdujących się na stronie elementów. Do tego potrzeba czegoś więcej, a mianowicie języka CSS (Cascading Style Sheets). Jest to język, który służy do opisu formy prezentacji dokumentu, czyli tego, jak ma wyświetlać się serwis internetowy pod względem wizualnym. Dzięki niemu można dowolnie modyfikować każdy element języka znaczników i tym samym zadbać o to, żeby strona była atrakcyjna dla oka użytkownika. Pozwala on zmienić kolor tła i dostosować m.in. takie parametry:
- kolor tekstu (czcionki),
- rodzaj i wielkość czcionki,
- obramowanie,
- tło przycisków.
Wyrażenie Cascading Style Sheets (CSS) po polsku oznacza kaskadowe arkusze stylów. Jak zostało wspomniane wcześniej, umieszcza się je w sekcji head strony.
Reguły CSS
Reguły CSS to inaczej zbiory zasad, które służą do formatowania treści. Każda reguła w kaskadowych arkuszach stylów składa się z kilku elementów. Możemy tu wyróżnić takie elementy jak:
- Selektor – jest to element HTML, do którego ma zostać zastosowane poszczególne formatowanie. Selektorem może być jeden element lub grupa elementów. Dzięki temu można jednocześnie np. zmienić kolor wszystkich paragrafów lub powiększyć czcionkę wszystkich nagłówków H3.
- Deklaracja – to pojedyncza reguła, która składa się z właściwości i wartości. Umieszczona jest w nawiasach klamrowych, w których może znajdować się jedna lub kilka deklaracji.
- Właściwość – jest to cecha selektora, której będą dotyczyły zmiany np. kolor, rozmiar czcionki itp.
- Wartość właściwości – jest to liczba, tekst lub inny typ danych. Właściwością będzie kolor, a wartością tej właściwości np. czerwony lub niebieski.
Można powiedzieć, że język znaczników HTML służy do tworzenia tego, co pojawi się na stronie, a dane arkuszy stylów do określania tego, jak wyświetlane będą poszczególne elementy. Zarówno język znaczników, jak i CSS to instrukcje dla przeglądarek internetowych. Dlaczego nie można zrobić wszystkiego za pomocą jednego języka? Separacja struktury dokumentu HTML od formy jego prezentacji pozwala uprościć kod, a także ułatwia wprowadzanie zmian.
Czy CSS jest językiem programowania?
HTML nie jest językiem programowania, ponieważ nie przetwarza danych i nie pozwala na wykonywanie obliczeń. Z tego samego powodu CSS również nie jest językiem programowania, ale nie jest też językiem znaczników. Wykorzystując wyłącznie CSS, stworzenie strony czy aplikacji byłoby niemożliwe. Obecnie podstawowy zestaw do tworzenia witryn internetowych, z jakiego powinien korzystać każdy Web Developer składa się z:
- hipertekstowego języka znaczników (HTML);
- kaskadowych arkuszy stylów (CSS);
- języka programowania (np. JavaScript).
Czy musisz znać język HTML, aby stworzyć swoją stronę internetową?
Kodowanie w języku HTML nie jest trudne, jednak opanowanie teorii, aby wykorzystać ją w praktyce, może być sporym wyzwaniem. Ale czy nauka języka znaczników jest konieczna do tego, aby stworzyć własną stronę internetową? Obecnie język znaczników HTML jest podstawą w tworzeniu większości produktów cyfrowych. Jednak nie oznacza to, że każdy, kto chciałby np. promować swój biznes w sieci, musi się go uczyć. Dzięki wysoko rozwiniętej technologii dziś możesz stworzyć swoją stronę czy sklep internetowy bez znajomości zarówno HTML, CSS, jak i języków programowania.
Jak stworzyć stronę bez znajomości języka znaczników i programowania?
Stworzenie witryny internetowej bez konieczności samodzielnego kodowania znaków umożliwiają kreatory stron WWW, których na rynku jest obecnie mnóstwo. Jak działa kreator stron? Jest to platforma lub narzędzie, które pozwala stworzyć witrynę na podstawie gotowych (wcześniej stworzonych) szablonów HTML, a także umożliwia łatwe zarządzanie nią – wszystko to bez konieczności edytowania kodu.
Oczywiście do stworzenia takiego narzędzia wcześniej twórcy musieli wykorzystać język znaczników HTML i wszystkie inne elementy składowe programowania. Oznacza to, że jeśli zdecydujesz się skorzystać z kreatora, struktura Twojego serwisu i tak będzie opierała się na hipertekstowym języku znaczników.
Kreator stron czy kodowanie w języku HTML?
Jeśli serwis internetowy można w tak łatwy sposób zaprojektować i umieścić na serwerze, to dlaczego nie każdy korzysta z takiego rozwiązania? Należy zauważyć, że kreatory stron WWW – mimo że obecnie oferują wiele możliwości i pozwalają tworzyć profesjonalne, rozbudowane strony – mają pewne ograniczenia. Wynika to oczywiście z braku dostępu do kodu źródłowego. Najczęściej możliwe jest korzystanie wyłącznie z gotowych szablonów HTML, dlatego trudno dopasować wygląd i ogólną funkcjonalność serwisu do swoich potrzeb. Oprócz tego brak dostępu do kodu może być przeszkodą w zwiększeniu widoczności strony w wynikach wyszukiwania (np. poprzez Google Chrome) – optymalizacja kodu jest elementem pozycjonowania. Właśnie z tego względu wielu przedsiębiorców, którzy chcą (skutecznie) promować swój biznes w sieci, nawiązuje współpracę ze specjalistami. Web Deweloperzy budują serwis od podstaw, czyli od stworzenia szkieletu HTML, a następnie korzystają z kaskadowych arkuszy stylów i języków programowania.
Znaczniki HTML – wpływ na pozycjonowanie strony
Za pomocą znaczników HTML lub inaczej tagów można przede wszystkim przekazać przeglądarce internetowej informacje na temat tego, jak ma ona wyświetlać strukturę strony stworzoną w języku HTML. Komendy wydawane bezpośrednio w dokumencie dotyczą m.in. akapitów, nagłówków, wyróżnień czy hiperłączy. Warto jednak wiedzieć, że niektóre z nich spełniają też inne zadanie – ich optymalizacja ma wpływ na pozycję strony w wynikach naturalnych i jest (a właściwie powinna być) nieodłącznym elementem każdego procesu pozycjonowania.
Zarówno w Polsce, jak i na całym świecie, najpopularniejszą wyszukiwarką internetową jest Google. To z niej korzysta najwięcej użytkowników, dlatego specjaliści od SEO optymalizują serwisy właśnie pod jej kątem. Firma Google przy ustalaniu rankingu stron bierze pod uwagę kilkaset czynników. Nie wszystkie są nam znane, jednak wśród tych, których znaczenie dla pozycji strony jest udowodnione, znajdują się właśnie niektóre elementy kodu, czyli tagi hipertekstowego języka znaczników HTML.
Znaczniki w sekcji head, które mają wpływ na pozycjonowanie
Meta tagi, czyli meta tytuły i meta opis – znaczniki HTML występują w sekcji head i mają największy wpływ na pozycję strony w rankingu Google. Właściwie bezpośredni wpływ mają jedynie tytuły podstron, jednak opisy również znajdują się na liście czynników, o które należy zadbać w trakcie pozycjonowania.
Dlaczego meta tytuły mają znaczenie dla SEO?
Jak już wiesz, meta title wyświetla się w wyszukiwarce największą czcionką i składa się z ok. 65 znaków. Jeśli będzie zawierał więcej, na stronie wyników wyszukiwania wyświetli się tylko jego część. Wprawdzie nie będzie miało to dużego znaczenia dla SEO, jednak lepiej zmieścić się w wyznaczonej liczbie znaków i przekazać wszystko botom indeksującym i użytkownikom w zwięzły sposób.
Znaczenie meta tytułu dla pozycjonowania jest ogromne. Przede wszystkim boty indeksujące w łatwy sposób mogą odczytać, co znajduje się na poszczególnych podstronach – wyszukiwarka Google lubi, gdy struktura strony jest jasno określona. Oprócz tego w tytułach umieszcza się słowa kluczowe, na które widoczny ma być serwis.
Dlaczego meta opisy mają znaczenie dla SEO?
Meta opis to krótki tekst, który wyświetla się pod meta tytułem strony lub podstrony. Jest to nic innego jak opis jej zawartości. Wprawdzie nie ma on bezpośredniego wpływu na miejsce w rankingu, jednak firma Google rekomenduje, aby uwzględnić jego optymalizację w całym procesie pozycjonowania. Jego zadaniem jest przede wszystkim poinformowanie użytkownika o tym, co znajdzie na danej stronie. Aby poprawić statystyki dotyczące ruchu, warto tworzyć perswazyjne meta opisy, które będą zachęcały użytkowników do odwiedzenia witryny poprzez przedstawienie głównych korzyści.
W przypadku description również znaczenie ma jego długość – powinien mieć on ok. 155 znaków ze spacjami.
Znacznik Meta Robots
Znacznik Meta Robots również nie wpływa bezpośrednio na pozycję strony, jednak mimo to, ma on znaczenie w procesie pozycjonowania. Wynika to z mechanizmu działania wyszukiwarki Google. Zanim zacznie ona wyświetlać użytkownikom konkretne wyniki, w pierwszej kolejności musi znaleźć serwis w sieci, a następnie dodać go do swojego indeksu. Znacznik Meta Robots to narzędzie do komunikacji z botami indeksującymi przeglądarki. Dzięki niemu określa się, które podstrony mają zostać zaindeksowane, a które nie. Warto wiedzieć, że nie wszystkie elementy na stronie mają znaczenie dla pozycjonowania (regulamin, koszyk, strona rejestracji). Za pomocą znacznika Meta Robots można wskazać botom drogę, po której mają się poruszać. Zablokowanie dostępu do poszczególnej strony za pomocą elementu HTML może wyglądać tak: <meta name=”robots” content=”noindex”/>. Jest to instrukcja skierowana do wszystkich robotów, jednak taką komendę można skierować do konkretnego ich typu, poprzez użycie innej wartości przy atrybucie.
Znaczniki w sekcji body, które mają wpływ na pozycjonowanie
W sekcji body strony znajdują się znaczniki, które dotyczą przede wszystkim formatowania tekstów np. <p> (paragraf) czy <h1> (nagłówek pierwszego rzędu). W tym przypadku największe znaczenie dla pozycjonowania mają właśnie znaczniki dotyczące nagłówków, zwłaszcza H1.
Nagłówki
Jest to najważniejszy element na każdej podstronie, który powinien zawierać główne słowo kluczowe, a także przedstawiać to, co użytkownik znajdzie na poszczególnej podstronie. Tagiem <h1> oznacza się m.in.:
- tytuły podstron,
- nazwy produktów,
- nazwy kategorii,
- tytuł wpisu blogowego,
- nazwę usługi.
Nagłówki, podtytuły i śródtytuły pozwalają uporządkować stronę i poprawić jej czytelność – dzięki nim użytkownik w łatwy sposób może znaleźć najważniejsze dla niego informacje i nie musi czytać całego tekstu od początku do końca. Stosowanie nagłówków niższego rzędu (H2, H3, H4) jest obowiązkowe zwłaszcza w przypadku długich tekstów. Nie można zapominać również o umieszczeniu w nich słów kluczowych.
Tagi związane z formatowaniem treści
Nagłówki to jednak niejedyne tagi, które mają znaczenie dla SEO. Tak naprawdę wszystkie znaczniki związane z formatowaniem tekstu będą miały wpływ na widoczność strony i na to, jak zostanie odebrana przez użytkowników. Zarówno wyszukiwarka Google, jak i użytkownicy nie lubią ścian tekstu, które nie zawierają podziału na sekcje, oraz wyróżnień. Takie treści są nieczytelne i nieatrakcyjne, a warto wiedzieć, że firma Google zwraca szczególną uwagę na doświadczenia użytkowników.
Atrybut alt
Innym ważnym znacznikiem, a właściwie atrybutem znacznika, który należy do sekcji body strony, jest atrybut alt, czyli alternatywny opis obrazka. Użytkownik widzi go tylko wtedy, gdy występuje problem z wczytaniem pliku graficznego. Jego obecność jest zatem istotna również dla wrażeń użytkownika, a nie tylko dla SEO. Ale jak właściwie atrybut alt wspiera pozycjonowanie? Otóż zoptymalizowany alternatywny opis, który zawiera odpowiednie słowa kluczowe, będzie wyświetlał się w Grafice Google, co pozwoli pozyskiwać więcej ruchu na stronie.
W przypadku pytań nasza agencja SEO zaprasza do kontaktu.
