Podstawowe znaczniki HTML
Pozycjonowanie stron wymaga zapoznania się z HTML oraz jego podstawowymi znacznikami. Podczas budowania strony internetowej znaczniki HTML pozwalają na prezentację treści w witrynie, łącząc ze sobą hiperłączem poszczególne dokumenty. Co warto wiedzieć o HTML i jego elementach? Jakie są najczęściej stosowane znaczniki HTML?
Co to jest znacznik HTML?
HTML (Hypertext Markup Language) jest to hipertekstowy język znaczników, który służy do tworzenia stron internetowych – budowania jej struktury oraz zawartości. Pozwala on na m.in. formatowanie tekstu, zmianę koloru tła czy wstawianie obrazu i tabeli.
I choć większość narzędzi do edycji tekstu obecnie daje możliwości edycji wizualnej tekstu, warto wiedzieć samemu, jak można sformatować tekst poprzez znaczniki HTML. Jak wygląda budowa tagów HTML?
Lista podstawowych znaczników HTML i ich budowa
Każdy znacznik HTML składa się z ostrych nawiasów np. <b>, <p>, czy <head> i aby zadziałał tak jak należy, w większości przypadków musi on zostać “zamknięty” – </b>, </p> </head>. W innym przypadku roboty mogą nie sczytać lub wczytać niepoprawnie zasoby strony.
Choć nie są to wszystkie dostępne znaczniki, są one najpopularniejsze i najczęściej używane przez programistów.
- < !doctype html > – podstawowy znak html, który informuje, że mamy do czynienia z językiem HTML
- < html >…< /html > – tutaj znaleźć możemy całą zawartość strony, zarówno przeznaczoną dla robotów, jak i użytkowników. Ten znacznik jest elementem nadrzędnym – pozostałe elementy muszą być potomkami tego elementu
- < head >…< /head > – w nim zawarte najważniejsze informacje o danej stronie. Head zawiera dane widoczne tylko dla robotów (nie są one dostępne dla użytkownika), są to m.in. kody śledzenia czy metadane, czyli informacje odczytywane maszynowo
- < title >…< /title > – tytuł wyświetlany w wyszukiwarce oraz pasku strony
- < meta…> – znaczniki meta opisują szerzej o czym jest dana strona
- < link … > – ten tag określa link prowadzący do zasoby zewnętrznego – nie jest widoczny dla użytkownika
- < style >…< /style > – za jego pomocą możemy m.in. dodawać język CSS, czyli język przeznaczony do formatowania treści strony
- < script >…< /script > – prezentuje zasób internetowy w postaci dodatkowego skryptu przeznaczonego dla danego dokumentu HTML (domyślnie skryptu języka programowania JavaScript)
- < body >…< /body > – element zawiera informację o pełnym zasobie strony, która jest widoczna dla użytkownika i tak jak <head>, może znajdować się tylko raz w kodzie źródłowym
- < a >…< /a > – odnośnik, link do innej witryny lub zasobu, wewnętrzny lub zewnętrzny. Dodatkowo trzeba użyć atrybutu “href”. Dodaje się do niego adres strony internetowej, do której chcemy zaprowadzić robota lub użytkownika. Czasami zwany jako “element kotwicy”
- < div >…< /div > – nie ma znaczenia semantycznego – pozwala uporządkować zasoby na witrynie. Nie ma żadnego wpływu na układ oraz treść dopóki nie zostanie odpowiednio ostylizowany z użyciem CSS, jest swego rodzajem “pojemnika” na treść
- < hx >…< /hx > – tag określający nagłówki w tekście (od H1 do H6)
- < p >…< /p > – paragraf tekstu
- < img…> – znacznik graficzny, który zamyka się samym ‘>’ ( <img scr=”…”> )
- < strong >…< /strong > – pogrubienie tekstu (pogrubić można także poprzez element <b>…</b>)
- < span >…< /span > – element liniowy używany głównie do stylowania fragmentu tekstu – także nie posiada znaczenia semantycznego.
- < form >…< /form > – element, który reprezentuje sekcję dokumentu zawierającą interaktywne “kontrolki” do przesyłania informacji, takie jak: <input>, <label> … </label>
- < ul >…< /ul > – lista nieuporządkowana (poprzez punktory)
- < ol >…< /ol > – lista uporządkowana (poprzez liczby porządkowe 1., 2.)
- < li >…< /li > – element listy – stosowane do listy uporządkowanej oraz nieuporządkowanej
- < table >…< /table > – znacznik do tworzenia tabeli
- < tr >…< /tr > – element do wstawiania wierszy w tabeli
- < td >…< /td > – komórka w wierszu tabeli
- < th >…< /th > – komórka w kolumnie tabeli
