Stoisz przed edytorem strony internetowej, masz dorzucić prosty wpis na bloga albo poprawić wygląd firmowego newslettera i nagle w oczy uderzają Cię dziwne znaczki w ostrych nawiasach. W pierwszej chwili można poczuć lekkie zagubienie. Krąży przecież mit, że jakakolwiek zabawa z kodem to trudne umiejeności, dostępne tylko dla ludzi po latach studiów informatycznych. Prawda jest jednak znacznie bardziej łaskawa dla osób, które z programowaniem nie mają nic wspólnego. Czy da się to okiełznać bez rwania włosów z głowy? Oczywiście.
Współczesny rynek pracy oczekuje od nas wszechstronności, a internet stał się naturalnym środowiskiem dla większości biznesów. Znajomość podstaw sieci to dzisiaj ogromny atut. Jeśli pracujesz w marketingu, prowadzisz własną działalność albo po prostu chcesz dla własnego użytku dopracować prywatną stronę, to te kilka prostych komend bardzo Ci pomoże. Pozwoli to uniezależnić się od działu IT przy najprostszych poprawkach i sprawi, że zaczniesz mówić z przeglądarką w tym samym języku.
Spis treści
Czym właściwie jest HTML?
Wbrew obiegowej opinii, HTML nie jest pełnoprawnym językiem programowania. Nie znajdziesz tu skomplikowanej logiki czy zaawansowanych algorytmów. To po prostu język znaczników (fachowo: hipertekstowy język znaczników). Jego jedynym i najważniejszym zadaniem jest określenie tego, jak ma wyglądać zawartość strony internetowej.
HTML jest trochę, jak plan budynku, wskazujący, w którym miejscu ma być okno, a gdzie główne drzwi. W świecie cyfrowym tymi oknami i drzwiami są nagłówki, zdjęcia czy teksty. To właśnie kod html podpowiada robotom sieciowym oraz oprogramowaniu, z czym właściwie mają do czynienia, gwarantując poprawne wyświetlanie całości na ekranie.
Znaczniki a komendy HTML
Warto w tym miejscu rozwiać jedną wątpliwość. Czym różnią się znaczniki od klasycznych komend HTML? Komenda to bezpośrednie polecenie dla systemu, żeby coś uruchomić lub przekształcić. Znacznik z kolei działa jak naklejka informacyjna. Nie wykonuje żadnej akcji, a jedynie etykietuje dany element, nadając mu odpowiedni sens. Gdzie to wszystko wpisujemy? Wystarczy zwykły, najprostszy edytor tekstu (nawet systemowy Notatnik), choć w codziennej pracy znacznie wygodniej korzystać z darmowych narzędzi dla programistów, takich jak Notepad++ czy Visual Studio Code, które ładnie kolorują składnię.
Anatomia kodu, czyli jak czytać tagi
Większość elementów języka html działa w systemie seryjnym. Potrzebują otwarcia i zamknięcia. Wygląda to tak, że tekst, który chcemy odpowiednio sformatować, bierzemy w dwa nawiasy. Pierwszy daje sygnał rozpoczęcia, a drugi zakończenia.
Czasami do tagu dorzucamy tak zwane atrybuty, czyli dodatkowe instrukcje. Idealnie widać to na przykładzie odnośników. Wewnątrz znacznika wskazujemy konkretny adres URL, pod który ma przenieść użytkownika kliknięcie w tekst.
Dowiedz się także: HTTPS – co to? Jak włączyć?
Podstawowe znaczniki HTML
Żeby sprawnie poruszać się po strukturze dokumentu, musisz poznać zestaw podstawowych klocków, z których buduje się każdą witrynę. Oto one:
- <!DOCTYPE html> – obowiązkowa linijka na samym starcie. Mówi przeglądarce, że ma do czynienia z najnowszą wersją kodu.
- <html> – klamra kompozycyjna, która spina całą stronę od początku do końca.
- <head> – techniczne zaplecze witryny. Użytkownik go nie widzi, ale to tam lądują kluczowe parametry konfiguracyjne.
- <title> – definiuje tytuł strony, który wyświetla się na karcie przeglądarki internetowej oraz bezpośrednio w wynikach wyszukiwania Google.
- <meta name=”description”> – popularny meta description. To krótki opis, który podpowiada wyszukiwarkom, o czym traktuje Twoja witryna.
- <body> – wszystko, co wyląduje w tej sekcji, będzie widoczne dla każdego, kto odwiedzi Twój adres.
- <h1> do <h6> – hierarchia ważności w tekście. <h1> rezerwujemy dla głównego tytułu, a niższe poziomy pomagają sensownie podzielić artykuł na sekcje.
- <p> – najzwyklejszy paragraf tekstu, bez którego nie powstałby żaden artykuł czy opis produktu.
- <ul> oraz <ol> – dwa sposoby na tworzenie list. Pierwsza generuje klasyczne kropki, natomiast druga to lista uporządkowana, idealna do instrukcji krok po kroku, gdzie liczą się kolejne numery.
- <li> – znacznik odpowiadający za konkretny, pojedynczy punkt na wybranej liście.
- <img> – element wstawiający grafikę (jeden z nielicznych, który nie potrzebuje domknięcia).
- <span> – bardzo przydatne narzędzie służące do stylowania fragmentu tekstu, np. gdy chcesz wyróżnić jedno konkretne słowo grubszą czcionką lub innym kolorem w środku zdania.
- <table> – znacznik otwierający ramę dla zestawień danych.
- <tr> – oznacza pojedynczy, poziomy wiersz tabeli.
- <td> – pojedyncza komórka (kolumna) wewnątrz wiersza, w której wpisujesz konkretne dane.
- <form> – podstawa interakcji z klientem, czyli okienko formularza kontaktowego lub zapisu na newsletter.
- <input> – uniwersalne narzędzie formularzy. Tworzy m.in. pola tekstowe, w które użytkownicy mogą wpisać swoje imię czy adres e-mail.
Kod HTML a SEO
Roboty wyszukiwarek (ale też nowoczesne narzędzia oparte na AI) nie widzą stron tak jak my. Nie zachwycają się ładnymi kolorami czy układem graficznym. One czytają strukturę. Dlatego tak duże znaczenie mają znaczniki semantyczne (np. <header> dla nagłówka strony czy <footer> dla jej stopki) i to, co wyświetla się na pasku przeglądarki. Pomagają one maszynom błyskawicznie posegregować informacje i zrozumieć, co na stronie jest kluczowym tekstem, a co tylko elementem nawigacji.
Równie ważnym detalem jest dbanie o opis alternatywny (atrybut alt przy zdjęciach). Tekst ukryty pod tym znacznikiem informuje wyszukiwarkę, co dokładnie znajduje się na obrazku (co pomaga w pozycjonowaniu grafik), a przy okazji jest nieocenioną pomocą dla osób niedowidzących, które przeglądają sieć za pomocą czytników ekranowych.
Znajomość podstawowych znaczników HTML
Jak widzisz, podstawy wcale nie wymagają talentu do matematyki ani zacięcia inżynieryjnego. Oczywiście to, co tu widzisz, to zaledwie fundament, a świat webdevelopmentu oferuje setki innych opcji. Jeśli jednak chcesz wejść głębiej, nie musisz rzucać pracy. W sieci znajdziesz mnóstwo darmowych poradników do samodzielnej praktyki, a na rynku dostępne są świetne, skondensowane szkolenia. Wszystko zależy od tego, jak bardzo chcesz ułatwić sobie codzienne obowiązki.
