Co to jest HTML i co właściwie robią znaczniki?

HTML (Hypertext Markup Language) to język znaczników służący do prezentacji treści na stronach internetowych, który jest oparty o hiperłącza łączące poszczególne dokumenty pomiędzy sobą. Przeglądarki internetowe jednoznacznie interpretują kod HTML i na jego bazie przedstawiają treść końcowym użytkownikom.

Pierwsze strony internetowe w odróżnieniu od większości obecnych były zaprojektowane tylko i wyłącznie z użyciem standardu HTML bez jakichkolwiek innych języków. Standard ten przyjął się tak dobrze, że bez niego nie może funkcjonować żadna strona internetowa a inne technologie albo generują kod html albo dodatkowo ubogacają treść na stronach.

Co to jest HTML - opis znaczników - LOGO

Dzięki językowi HTML można dodawać do tekstu akapity, hiperłącza (linki), nagłówki, pliki graficzne lub nawet formularze. Pozwala to nadawać znaczenie semantyczne poszczególnym fragmentom tekstu.

Natomiast sama struktura języka pozwala na wplatanie w niego języków skryptowych (na przykład javascript) pozwalających na kontrolowanie całą aplikacją jaką jest strona internetowa lub wprowadzonych później arkuszy stylów CSS (co jest obecnie bardziej zalecane niż wikłanie ich bezpośrednio w kodzie).

Poszczególne znaczniki języka HTML były przez długi czas różnie interpretowane przez różne przeglądarki. Wtedy doprowadzenie do stanu gdy dokument (czyli w zasadzie strona internetowa) zawsze będzie wyglądać tak samo było problematyczne. Zwłaszcza w czasach gdy popularność wyszukiwarek internetowych była bardziej zróżnicowana niż obecnie.

Na szczęście obecnie nie stanowi to aż takiego wyzwania, jednak w tym celu język i cały standard odbył sporą drogę zakończoną sukcesem dzięki swojej popularności i braku konkurencji.

Historia HTML

Początków języka HTML można dopatrywać się w roku 1980. Wtedy Tim Berners-Lee stworzył dla CERN’u tak zwane ENRIQUE. Był to pierwszy projekt hipertekstowy, który po latach stał się podwaliną dla właściwie całej sieci WWW.

Nie było to na początku w żadnym przypadku zaawansowane przedsięwzięcie. Służyło do współdzielenia głównie do odczytu dokumentów opisujących badania naukowe pomiędzy różnymi jednostkami. Innowacyjne było natomiast to, że było to teoretycznie możliwe z każdego miejsca na świecie.

Wraz z upływem lat cały projekt się rozwijał aż 10 lat później – w roku 1990 twórca Tim Berners-Lee opracował i rozesłał do kolegów w CERN pierwszą przeglądarkę internetową o nazwie WorldWideWeb.

W roku następnym (1991) światło dzienne ujrzała pierwsza oficjalna specyfikacja standardu HTML zawierająca opis 22 znaczników, za pomocą których można było tworzyć dokumenty HTML z czego ponad połowa przeszła do standardu HTML 4.

Przyczyniło się to do powstania w roku 1994 organizacji World Wide Web Consortium (W3C) założonej jak można się domyślić przez protoplastę języka. Od tego momentu sam język i technologie pokrewne rozpoczęły drogę do zapewnienia jednakowej obsługi kodu HTML niezależnie od przeglądarki czy to popularnego niegdyś Internet Explorera aż po obecnie rozpowszechnione Google Chrome.

W wyniku działań całego środowiska i organizacji W3C w roku 2014 weszła w życie jako oficjalna rekomendacja specyfikacja HTML 5, która posiada kompatybinlność wsteczną. Mimo, że w najnowszej rekomendacji część znaczników odeszła do lamusa, to kwestią sporną jest obecność niektórych nowych znaczników. Jednak dla przeciętnego użytkownika wiele to nie zmienia. Język wciąż opiera się na znacznikach a jedne z nich są częściej wykorzystywane od innych. Niezależnie od tych niuansów warto wiedzieć, czym tak właściwie są znaczniki HTML?

Co to jest znacznik HTML?

Skoro HTML co język znaczników, to jak wygląda i co to jest znacznik HTML? Każdy znacznik (nazywany też tagiem) to z określone słowo kluczowe lub pojedynczy znak zamknięty w ostrych nawiasach.

Większość z nich występuje w parach znacznik otwierający na przykład <strong> i znacznik zamykający ze slashem (ukośnikiem) </strong>. Pomiędzy nimi umieszczana jest ich docelowa zawartość a znaczniki same w sobie mogą posiadać specyficzne atrybuty (opisane wewnątrz tagu).

Standard HTML obsługiwany przez przeglądarki pozwala na wyświetlanie samej zawartości znaczników w zdefiniowany sposób bez pokazywania użytkownikowi końcowemu samych znaczników.

Jakie są najczęściej używane znaczniki HTML i do czego służą?

  • Znacznik HTML – znacznik otwierający dokument – <html></html>
  • Znacznik HEAD – opisujący nagłówek dokumentu i najważniejsze informacje o nim – <head></head>
  • Znacznik META TITLE – zawierający tytuł strony widoczny w wynikach wyszukiwania, na karcie przeglądarki oraz przekazujący istotne informacje dla robotów o zawartości danej podstrony – <title></title>
  • Znacznik BODY – właściwa treść dokumentu zawierająca inne znaczniki z treścią do wyświetlenia – <body></body>
  • Znaczniki H1-H6 – pełniące funkcje nagłówków strony i opisujące następujące po sobie sekcje danej podstrony. Najistotniejszy z nich jest nagłówek H1. – <h1></h1>
  • Znacznik P – paragraf, czyli pojedynczy blok tekstowy – <p></p>
  • Znacznik DIV – czyli po prostu blok, za jego pomocą często porządkuje się witrynę – <div></div>
  • Znaczniki B oraz STONG – służące do pogrubiania poszczególnych fragmentów tekstu – <b></b> i <strong></strong>
  • Znacznik IMG – pozwalający na umieszczenie obrazów na stronie (chociaż nie jest to jedyny sposób) – <img src=””></img>
  • Znacznik A – czyli hiperłącza, dzięki któremu umożliwia się przejście do innych podstron lub serwisów internetowych. – <a href=””></a>

Atrybuty znaczników HTML

Podstawowymi składowymi składni HTML są znaczniki. Jednak niektóre z nich mogą lub nawet muszą dla poprawnego działania posiadać specjalnie atrybuty dla swojego działania.

Na przykład w świecie rzeczywistym jeśli atrybutem HTML strony człowiek.html byłby wiek, to nie miałby on zbyt dużej wartości bez określenia jego wartości.

Tak samo jest w świecie internetowym. Wspomniany wcześniej znacznik HTML A odnoszący się do hiperłącza sam w sobie nie ma znaczenia, jeśli nie ma przypisanego atrybutu będącego adresem do zasobu, do którego się odnosi. Oznacza to że składnia <a href=””>Link</a> nie ma większego znaczenia. Natomiast znacznik A wraz z opisanym atrybutem HREF w postaci: <a href=”google.com”>Wyszukiwarka Google</a> nie tylko określa gdzie ma kierować dany odnośnik a za pomocą treści między znacznikami określa tak zwaną kotwicę (anchor) opisującą jakiego typu treść można znaleźć pod adresem docelowym.

Dobrze jest w miarę możliwości korzystać z atrybutów znaczników HTML a w niektórych przypadkach jest to definitywnie obligatoryjne.

Struktura dokumentu HTML

Oczywiście poszczególne znaczniki html mimo że mają swoje znaczenie to nie wplata się ich w kod w beznamiętnie jak leci (a przynajmniej nie powinno). Przyjęta została ogólna struktura dokumentu html i tego w jaki ogólny sposób należy je tworzyć. Nie zgłębiając się w szczegóły (i nie wchodząc w „nowe” wytyczne HTML 5 – to jak powinna wyglądać struktura dokumentu html 5 zasługuje na osobny artykuł) poniżej przedstawiam przykładową strukturę takiego dokumentu:

<!– Tak się oznacza komentarz w HTML – przeglądarka tego nie przetwarza – pozostaje niewidoczne →

<!– Informacja dla przeglądarki o rodzaju dokumentu –>

<!DOCTYPE HTML>

<!– Znacznik otwierający html i określenie języka–>

<html lang=”pl”>

<!– Znacznik otwierający head –>

<head>

<!– Określenie kodowania znaków – bez szczegółów, bez tego może nie być polskich znaków –>

<meta charset=”utf-8″>

<!– Tytuł strony – to jest BARDZO ważne pod SEO a wielu o tym zapomina lub bagatelizuje –>

<title>Super świetny dopasowany SEO semantycznie tytuł podstrony</title>

</head>

<!– Znacznik otwierający body – właściwa treść dokumentu –>

<body>

<!– Article – niby nie jest to konieczne, ale jest to dobry zwyczaj by oznaczać fragment kodu, który mógłby stanowić samodzielną część i być publikowany niezależnie jak treść wpisu, bez menu stopek itp. –>

<article>

<!– Nagłówek H1 – powinien być jeden i tylko jeden na stronie –>

<h1>Tytuł artykułu lub wpisu, warto w nim dać frazę kluczową</h1>

<p>Tu piszemy jakiś akapit tego tekstu <strong>a tak możemy wyróżnić jakąś frazę, zwrot lub fragment tekstu</strong>.</p>

<!– Nagłówek H2 lub dowolny inny, stosuje się je dla śródtytułów –>

<h2>W ten sposób wyróżnia się śródtytuł – warto je stosować!</h2>

<p>No i piszemy kolejny akapit tekstu, nikt nie lubi patrzeć na ścianę znaków</p>

</article>

<!– Znacznik zamykający body –>

</body>

<!– Znacznik zamykający html –>

</html>

Powyższy fragment tekstu jest samodzielnym dokumentem HTML. Wystarczy go skopiować do notatnika (lub innych specjalnych edytorów kodu / tekstu) i zapisać z dowolną nazwą, nadając mu rozszerzenie .html. Na przykład strona.html. Jeśli nigdy tego nie robiłeś – sprawdź, następnie otwórz zapisany plik (za pomocą przeglądarki). Tak mniej więcej wyglądały pierwsze strony internetowe (a Ty stałeś się początkującym webmasterem :)).

Znacznik HEAD

Mówi się, że ryba psuje się od głowy. Natomiast właściwy dokument HTML zaczyna się … też od głowy, a dokładniej od znacznika HEAD.

W obrębie znacznika HEAD opisuje się ustawienia dokumentu html, które nie są bezpośrednio widoczne w kodzie. Można w jego obrębie używać takich znaczników jak:

  • Meta Title: <title></title> – tytuł danej podstrony
  • Style: <style></style> – w ten sposób można dodać unikalne style CSS upiększające stronę napisaną w HTML, jak na przykład kolory tła, rodzaj fontów i tym podobne, można je dodać także za pomocą zasobów zewnętrznych poprzez dołączenie plików css poprzez <link rel=”stylesheet” href=”sciezka_do_zasobu.css”>
  • Link: <link rel=”stylesheet” href=”style.css”> – w ten sposób można wskazać plik ze stylami CSS dla danej strony lub nawet podstrony
  • Script: <script src=”js-file.js”></script> – pozwala na dołączenie do strony pliku ze skryptami Javascript, które pomogą uczynić stronę bardziej interaktywną, na przykład poprzez nietypową obsługę przycisków
  • Meta Charset: <meta charset=”UTF-8”> – w celu określenia kodowania znaków i zapewnienia polskich znaków diakrytycznych
  • Meta Description: <meta name=”description” content=”Opis”> – skrócony opis tego co można znaleźć na danej podstronie, mimo że Google i tak go jest w stanie sam wygenerować to warto go uzupełnić samodzielnie, to jak to zrobić najlepiej to już dłuższa opowieść
  • Kod analityczny Google Analytics – aby można było monitorować ile osób i jak odwiedza stronę internetową i poszczególne podstrony

Po zamknięciu znacznika HEAD </head> można przejść do właściwej części dokumentu czyli ciała (BODY).

Znacznik Body

W ciele między znacznikami BODY powinna się znaleźć właściwa treść dokumentu. Czyli to co będzie widoczne na ekranie naszym oraz innych użytkowników, którzy trafią na stronę.

Można w nim umieszczać takie znaczniki jak P, DIV, H1, H2-H6, ARTICLE, A, STRONG, B, etc.

To w jego obrębie znajduje się to czego użytkownicy szukają i chcą zobaczyć.

Treść Strony

Treść strony zazwyczaj znajduje się w całości w elemencie BODY. To tutaj znajduje się zarówno, tekst, nagłówki, przyciski, CTA, linki do innych podstron serwisu (nie tylko z menu), obrazki, slidery i inne elementy, do których zdążyliśmy się już przyzwyczaić przeglądając strony internetowe.

Warto pamiętać o tym, że należy planować rozkład treści na stronach internetowych. Nawet jeśli niektórzy uważają, że chaos jest najwyższym stopniem uporządkowania to łatwiej się czyta zarówno ludziom jak i robotom uporządkowane dokumenty.

Dobrze jest stosować śródtytuły (nagłówki), zdjęcia oraz wiele akapitów. Taki dokument o wiele lepiej się czyta niż ścianę tekstu a w przyszłości gdy zajdzie konieczność naniesienia zmian, łatwiej się w takim dokumencie odnaleźć.

Dlatego warto nie tylko pod kątem wizualnym planować rozkład elementów i treści na stronach internetowych. Należy też zadbać aby semantyka kodu HTML (użytych znaczników) była uporządkowana i sensowna. Pomoże to nie tylko podczas edycji strony i użytkownikom, ale także roboty Google będą lepiej rozumiały co na danej podstronie właściwie się znajduje.

Edycja i formatowanie plików HTML

Jak w jednym z powyższych przykładów wskazano, wiele nie potrzeba, aby samodzielnie tworzyć dokumenty HTML. Oczywiście o ile się zna składnie tego języka. Do najprostszych zastosowań wystarczy zwykły edytor tekstu. Tak można stworzyć stronę internetową w notatniku.

Jednak im bardziej projekt się rozrasta tym trudniej się pracuje na tego typu dokumentach, które są w sumie ciągiem znaków. W celu ułatwienia tej pracy powstało wiele edytorów kodu (HTML, CSS, JS, PHP, etc.), które kolorują składnię i poszczególne znaczniki, atrybuty oraz charakterystyczne elementy języka.

Na szczególną uwagę oprócz dużo bardziej zaawansowanych kombajnów programistycznych zasługuje kilka edytorów. Są to między innymi: Sublime Text, Notepad++, Bluefish i wiele innych, które można by wymieniać i wymieniać. Wybór jest spory, więc każdy znajdzie coś dla siebie a w dłuższej perspektywie praca z takimi narzędziami znacząco ułatwia pracę. Trzeba tylko wybrać swój odpowiedni edytor do pisania stron w html i ich edytowania.

Zwróć uwagę na przykład strony w HTML zacytowany w tym wpisie. Nie wygląda przyjaźnie. Jeśli wkleisz go do dowolnego edytora kodu (wskazanego lub znalezionego) to zobaczysz różnicę, względem notatnika.

Edytory HTML i stron typu WYSIWYG

Oprócz powyższych rozwiązań polegających na bezpośrednim pisaniu kodu HTML istnieją jeszcze edytory graficzne, zarówno samodzielne jak i wbudowane w inne systemy. Działają one na poziomie dokumentu zgodnie z tak zwaną zasadą WYSIWYG (ang. what you see is what you get) pozwalając otrzymać wynik podobny do tego co mamy na ekranie edycji (lub nawet identyczny).

O ile powyższa opcja zdaje się być bardzo kusząca, w końcu może stronę zaprojektować „ktokolwiek”, a nie tylko webmaster czy designer to nie zawsze jest to dobre rozwiązanie.

Jeśli uznamy, że dana osoba jest w stanie za pomocą takiego edytora zaprojektować dobrą, użyteczną i nawet konwertującą pod kątem sprzedażowym stronę lub podstronę to pozostaje pewne ale… .

Jest nim kolokwialnie mówiąc śmietnik w kodzie. Nie mam zamiaru tutaj demonizować tego typu rozwiązań ale swego czasu bardzo wiele z nich mimo że dawało dobry efekt wizualny to tworzyło istny chaos w kodzie HTML i całej strony. Przez to nie zawsze roboty mogły poprawnie interpretować to co jest na stronie a ewentualne poprawianie tego co powstało nie tylko nie należało do najprzyjemniejszych. To po prostu momentami stawało się nierentowne i lepiej było zrobić wszystko od nowa (tak jak W3C i Google przykazał).

Tak jak we wszystkim w świecie technologii internetowych i życiu ujętym ogólnie, trzeba znaleźć zdrowy rozsądek i optymalne rozwiązanie do swoich zastosowań.

Podsumowanie

Napisanie samemu prostej strony przy pomocy kodu HTML nie jest nadzwyczajnie trudne. Natomiast zrobienie tego dobrze zarówno wizualnie jak i pod kątem SEO to już troszkę wyższa szkoła jazdy.

Żeby zrobić to dobrze należy mieć świadomość działania podstawowych mechanik struktury kodu HTML i zasad SEO.

Mam nadzieję, że powyższym artykułem w przyjazny i niezbyt „komplikujący” sposób udało mi się opisać podstawowe zasady rządzące tym światem i jest Tobie teraz łatwiej się w nim poruszać.

Oczywistym jest, że temat nie został w 100% wyczerpany, więc jeśli masz jakiekolwiek pytania lub wątpliwości odnośnie tego czym jest HTML i do czego służy (zwłaszcza w kontekście SEO) to zapraszam do zadawania pytań w komentarzach lub w wiadomościach prywatnych.

A czy wy moi czytelnicy chcielibyście coś BARDZO istotnego względem kodu HTML dla początkujących dodać w tym wpisie?

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *