10. Podstawy dostępności i ważne meta tagi
~10–14 min
poziom: początkujący
Kilka prostych zasad sprawia, że strona jest czytelna dla każdego – także dla Google i czytników ekranu.
Najważniejsze reguły dostępności w HTML
- Zawsze pisz sensowny
altdo zdjęć - Używaj
<label for="id">do pól formularzy - Zachowuj logiczną hierarchię nagłówków (h1 → h2 → h3…)
- Semantyczne tagi:
<nav>,<main>,<header> - Linki otwierane w nowej karcie →
rel="noopener noreferrer"
Ważne meta tagi w <head>
<meta name="description" content="Krótki opis strony – max 160 znaków">
<meta name="author" content="Twoje Imię">
<!-- Open Graph – ładne podglądy w mediach społecznościowych -->
<meta property="og:title" content="Moja super strona">
<meta property="og:description" content="Opis, który zachęca do kliknięcia">
<meta property="og:image" content="https://twojastrona.pl/og.jpg">
<meta property="og:url" content="https://twojastrona.pl">
Do zapamiętania: Dobra dostępność = lepsze SEO + większy zasięg.
Zadanie
Dodaj do swojego index.html:
- sensowny opis w meta description
- minimum 3 poprawne atrybuty alt
- poprawnie powiązane label + input
[ Miejsce na reklamę ]