Znaczniki w HTML oraz ich atrybuty

1. Co to jest znacznik i atrybut?

HTML (HyperText Markup Language) to język znaczników służący do tworzenia struktury stron internetowych. Nie jest językiem programowania, lecz językiem opisu treści, który określa sposób prezentacji elementów w przeglądarce. Podstawą HTML są znaczniki (ang. tags), a ich działanie można modyfikować za pomocą atrybutów.

2. Budowa znacznika

Znacznik HTML zwykle występuje w parze:

Tag otwierający: <p>
Treść: „To jest akapit”
Tag zamykający: </p>

Niektóre znaczniki są samozamykające (np. <br>, <img>).

3. Kategorie znaczników HTML

Znaczniki można podzielić na grupy w zależności od ich funkcji:

a) Strukturalne

<html> – obejmuje całą stronę.
<head> – zawiera metadane (tytuł, opisy, linki do stylów i skryptów).
<body> – przechowuje całą widoczną zawartość strony.

b) Nagłówki i tekst

<h1> … <h6> – nagłówki różnego poziomu (od najważniejszego do najmniej istotnego).
<p> – akapit tekstu.
<strong> – tekst pogrubiony (semantycznie ważny).
<em> – tekst kursywą (semantyczne podkreślenie znaczenia).
<span> – fragment tekstu bez dodatkowego znaczenia semantycznego, używany do stylizacji.

c) Listy

<ul> – lista nieuporządkowana (wypunktowana).
<ol> – lista uporządkowana (numerowana).
<li> – element listy.

d) Obrazy i multimedia

<img> – obrazek (samozamykający).
<video> – osadzenie filmu.
<audio> – osadzenie dźwięku.

e) Linki i nawigacja

<a> – odsyłacz (link).
<nav> – sekcja przeznaczona na menu nawigacyjne.

f) Formularze

<form> – kontener formularza.
<input> – pole formularza (tekstowe, checkbox, radio, button itp.).
<textarea> – większe pole do wprowadzania tekstu.
<button> – przycisk.
<label> – etykieta powiązana z polem formularza.

g) Tabele

<table> – tabela.
<tr> – wiersz tabeli.
<td> – komórka tabeli.
<th> – nagłówek tabeli.

h) Semantyczne znaczniki HTML5

<header> – nagłówek strony lub sekcji.
<footer> – stopka.
<article> – niezależny artykuł.
<section> – sekcja treści.
<aside> – treści dodatkowe, np. sidebar.
<main> – główna treść strony.

4. Atrybuty w HTML

Atrybuty to dodatkowe informacje przypisane do znaczników, które modyfikują ich działanie.

a) Podstawowe atrybuty

id – unikalny identyfikator elementu.
class – przypisuje element do jednej lub wielu klas (używane w CSS/JavaScript).
style – umożliwia bezpośrednie dodanie stylu CSS.
title – wyświetla podpowiedź po najechaniu kursorem.

Przykład:

b) Atrybuty globalne (dostępne dla większości znaczników)

lang – określa język treści, np. lang="pl".
hidden – ukrywa element.
tabindex – ustawia kolejność poruszania się klawiszem TAB.

c) Atrybuty specyficzne dla wybranych znaczników

<a href="adres"> – adres linku.
<img src="obrazek.jpg" alt="opis obrazka"> – ścieżka do obrazu i alternatywny opis.
<input type="text" value="Domyślna wartość"> – typ pola i jego zawartość.
<form action="wyslij.php" method="post"> – adres wysyłki i metoda przesyłania danych.

5. Znaczenie atrybutów dla dostępności i SEO

alt w obrazkach – umożliwia osobom niewidomym korzystanie z czytników ekranu, a także wspiera SEO.
title – podpowiedzi dla użytkownika.
Semantyczne znaczniki i atrybuty lang – pomagają wyszukiwarkom i technologiom wspomagającym w prawidłowej interpretacji treści.

6. Najczęściej popełniane błędy

Brak zamykania znaczników (np. <p> bez </p>).
Używanie atrybutu style zamiast arkusza CSS – utrudnia utrzymanie kodu.
Powtarzanie tego samego id w wielu miejscach – id musi być unikalne.
Nieużywanie atrybutu alt w obrazkach.

7. Struktura dokumentu

8. Nagłówki i tekst

9. Linki

Atrybuty: href, target, title

10. Obrazy i multimedia

Atrybuty: src, alt, width, height, controls, autoplay, muted, loop

11. Listy

Atrybuty: type, start, id, class

12. Tabele

Atrybuty: border, cellspacing, cellpadding, rowspan, colspan, scope

13. Formularze

Atrybuty: action, method, type, name, id, placeholder, required, checked, value, rows, cols, disabled

14. Semantyczne znaczniki

Atrybuty: id, class, data-* (atrybuty niestandardowe), hidden

15. Podsumowanie

Znaczniki w HTML to podstawowe elementy budujące stronę internetową, a atrybuty pozwalają modyfikować ich działanie i wygląd.

Znaczniki tworzą strukturę dokumentu.
Atrybuty dodają im właściwości (np. identyfikatory, style, linki, opisy).
Poprawne stosowanie znaczników i atrybutów ma ogromne znaczenie dla użyteczności, dostępności i SEO.