Lista znaczników HTML

Lista znaczników HTML

Strony internetowe to nic innego jak kod HTML zinterpretowany przez przeglądarkę internetową. Wspomniany kod składa się z wszelkiego rodzaju znaczników HTML, które spełniają jasno określone zadania.

Nie ma potrzeby uczyć się wszystkich znaczników HTML na pamięć z dwóch prostych powodów. Po pierwsze: nie wszystkie znaczniki HTML są wykorzystywane na każdej stronie internetowej. Po drugie: Tworzenie stron i aplikacji internetowych to nie sprawdzian w szkole czy na studiach, tutaj spokojnie można korzystać z podpowiedzi.

Poniższa lista nie zawiera wszystkich istniejących znaczników HTML. Nie zostały tu również opisane wszystkie możliwe atrybuty tych znaczników czy też wartości możliwe do przypisania tym atrybutom. Celem niniejszej listy jest przedstawienie najpopularniejszych, najczęściej stosowanych znaczników HTML wykorzystywanych do budowania stron internetowych.

Jeśli uznacie, że jakaś informacja powinna zostać dodana do tej listy, koniecznie dajcie mi o tym znać.


Znacznik !DOCTYPE (ang. document type – typ dokumentu)

Znacznik !DOCTYPE właściwie nie jest znacznikiem. To deklaracja typu dokumentu, niezbędna do prawidłowej interpretacji kodu przez przeglądarkę internetową.

Dla dokumentów HTML napisanych w standardzie HTML5 typ dokumentu deklarujemy umieszczając w pierwszej linii pliku <!DOCTYPE html>.

<!DOCTYPE html>

Przykład kodu


Znacznik a (ang. anchor – kotwica)

Znacznik a stosowany jest do tworzenia odnośników do innych stron lub podstron. Kliknięcie na odnośnik spowoduje przejście pod podany adres.

Atrybuty znacznika a, ich opis i przykłady użycia:

NazwaOczekiwana wartośćWartość domyślnaOpisWymaganyPrzykład
hrefPoprawny adres URLBrakMiejsce docelowe, do którego zostaniemy przeniesieni po kliknięciu w element.Takhref="https://dawidgalecki.pl"
targetJedna z poniższych:
_blank,
_self.
_selfInformacja o miejscu otwarcia klikniętego linku. Użycie _blank spowoduje otwarcie klikniętego linku w nowej karcie. Użycie _self spowoduje otwarcie klikniętego linku w bieżącej karcie.Nietarget="_blank"

<a href="https://dawidgalecki.pl/" target="_blank">Fotograf Dawid Gałecki</a>

Przykład kodu

Fotograf Dawid Gałecki

Efekt działania opisanego przykładu


Znacznik body (ang. body – ciało)

Znacznik body to “kontener” na kod HTML, który będzie interpretowany przez przeglądarki internetowe. Musi być on umieszczony wewnątrz znacznika html.

<html>
<body>
Treść strony
</body>
</html>

Przykład kodu


Znaczniki h1-h6 (ang. heading – nagłówek)

Znaczniki od h1 do h6 to nagłówki specjalnego przeznaczenia. Oznacza się nimi tytuły na stronie internetowej, gdzie znacznikiem h1 oznacza się tytuły najważniejsze, znacznikiem h2 tytuły nieco mniej ważne i tak aż do znacznika h6.

<h3>Nagłówek trzeciego poziomu</h3>

Przykład kodu

Nagłówek trzeciego poziomu

Efekt działania opisanego przykładu


Znacznik head to obszar strony internetowej, który nie jest interpretowanym przez przeglądarkę fragmentem wyglądu strony. Przechowuje on informacje niezbędne do prawidłowego wyświetlania strony w przeglądarce, pozycjonowania w wyszukiwarkach itp.

Znacznik head musi być umieszczony za otwierającym znacznikiem html i jednocześnie przed otwierającym znacznikiem body.

Informacje dotyczące strony są umieszczane wewnątrz znacznika head za pomocą następujących znaczników:

NazwaOpisPrzykład
titleTytuł strony widoczny na zakładce w przeglądarce i w wynikach wyszukiwania w wyszukiwarce internetowej<title>Fotograf Dawid Gałecki</title>

<html>
<head>
<title>Fotograf Dawid Gałecki</title>
</head>
<body>
</body>
</html>

Przykład kodu


Znacznik html (ang. HTML, HyperText Markup Language – Hipertekstowy język znaczników)

Znacznik html to niezbędny element każdej strony internetowej. Informuje on przeglądarkę, że wewnątrz niego znajduje się kod HTML, który należy odpowiednio zinterpretować.

<html>
</html>

Przykład kodu


Znacznik li (ang. list item – element listy)

Znacznik li odpowiada za pojawienie się elementu na liscie uporządkowanej tworzonej za pomocą znacznika ol lub nieuporządkowanej tworzonej za pomocą znacznika ul. Nie istnieje maksymalna ilość elementów dodanych do listy.

Ten znacznik nie istnieje samodzielnie – musi być użyty wewnątrz listy.

<li>Element listy</li>

Przykład kodu


Znacznik ol (ang. ordered list – lista uporządkowana)

Znacznik ol odpowiada za stworzenie uporządkowanej (najczęściej numerowanej) listy. Elementy listy dodawane są za pomocą znacznika li. Każdy z nich jest poprzedzony domyślnie kolejną liczbą począwszy od 1.

<ol>
<li>Pierwszy element listy</li>
<li>Drugi element</li>
<li>Trzeci</li>
</ol>

Przykład kodu

  1. Pierwszy element listy
  2. Drugi element
  3. Trzeci

Efekt działania opisanego przykładu


Znacznik p (ang. paragraph – paragraf)

Znacznik p to element, którego zadaniem jest przechowywanie jednego akapitu tekstu.

<p>To jest jeden akapit tekstu.</p>

Przykład kodu

To jest jeden akapit tekstu.

Efekt działania opisanego przykładu


Znacznik ul (ang. unordered list – lista nieuporządkowana)

Znacznik ul odpowiada za stworzenie nieuporządkowanej listy. Elementy listy dodawane są za pomocą znacznika li. Każdy z nich jest domyślnie poprzedzony takim samym symbolem.

<ul>
<li>Pierwszy element listy</li>
<li>Drugi element</li>
<li>Trzeci</li>
</ul>

Przykład kodu

  • Pierwszy element listy
  • Drugi element
  • Trzeci

Efekt działania opisanego przykładu


Globalne atrybuty znaczników

Każdy opisany powyżej znacznik może przyjąć wymienione poniżej atrybuty:

NazwaOczekiwana wartośćOpisPrzykład
classTekstNazwa klasy CSS przypisanej do elementu (nazwy kilku klas oddzielamy spacją)class="col-sm-12"
idTekstUnikalny w obrębie strony identyfikator elementuid="header"

Dawid Gałecki, dn. 01.02.2021 o godz. 19:30


Znalazłeś błąd w treści wpisu, masz uwagi dotyczące tekstu albo chcesz podsunąć pomysł na kolejny artykuł? Zapraszam do kontaktu ze mną. Dziękuję!