HTML opisuje znaczenie i strukturę treści, nie jej wygląd — o wygląd dba CSS. Przeglądarka (i czytnik ekranu, i Google) czyta znaczniki, nie domyśla się z samego tekstu, co jest tytułem, co listą, a co obrazkiem. Płaski tekst bez tagów to dla maszyny jedna nierozróżnialna sterta — otagowany dokument to drzewo, które da się przeszukać, wystylować i odczytać na głos.
| Tag |
Do czego służy |
<!DOCTYPE html> |
Mówi przeglądarce: to jest HTML5, renderuj w trybie standardowym |
<html> |
Korzeń całego dokumentu |
<head> |
Metadane niewidoczne na stronie: tytuł karty, kodowanie, CSS |
<title> |
Tytuł w karcie przeglądarki i w wynikach wyszukiwania |
<meta charset="utf-8"> |
Kodowanie znaków — bez tego polskie znaki się psują |
<body> |
Wszystko, co faktycznie widać na stronie |
| Tag |
Do czego służy |
<header> |
Nagłówek strony albo sekcji — np. imię i rola na górze |
<main> |
Główna, unikalna treść strony (jedna na stronę) |
<section> |
Tematyczny blok treści z własnym nagłówkiem (np. „O mnie”) |
<article> |
Samodzielny kawałek treści, sensowny wyrwany z kontekstu (post, wpis) |
<footer> |
Stopka — kontakt, prawa autorskie, linki na dole |
<nav> |
Blok linków nawigacyjnych |
<div> |
Kontener bez znaczenia — ostatnia deska ratunku, gdy nic semantycznego nie pasuje |
| Tag |
Do czego służy |
<h1>–<h6> |
Nagłówki wg ważności, tylko jeden <h1> na stronę, po kolei (nie z pominiętym poziomem) |
<p> |
Akapit — każdy fragment tekstu mieszka w jakimś elemencie, nigdy goły w <body> |
<strong> |
Tekst istotny znaczeniowo (pogrubiony domyślnie) |
<em> |
Tekst z naciskiem (kursywa domyślnie) |
<blockquote> |
Cytat blokowy, wyodrębniony z reszty treści |
<span> |
Neutralny inline-kontener — jak div, ale w linii tekstu |
<br> |
Złamanie linii bez nowego akapitu — używać rzadko |
| Tag |
Do czego służy |
<ul> |
Lista nieuporządkowana — kolejność nieistotna |
<ol> |
Lista uporządkowana — kolejność się liczy (kroki, ranking) |
<li> |
Pojedynczy element listy, zawsze wewnątrz <ul>/<ol> |
| Tag |
Do czego służy |
<a href="..."> |
Link — href wskazuje cel (adres, mail przez mailto:) |
<img src="..." alt="..."> |
Obrazek — alt zawsze opisuje treść obrazka (dla czytnika ekranu i gdy plik się nie wczyta), nigdy nazwę pliku |
| Tag |
Do czego służy |
<form> |
Kontener formularza, action/method mówią, dokąd i jak wysłać dane |
<input> |
Pojedyncze pole (tekst, liczba, hasło, checkbox — zależnie od type) |
<label> |
Opis pola, powiązany z <input> przez for/id — bez tego pole jest niedostępne dla czytnika ekranu |
<button> |
Przycisk — type="submit" wysyła formularz |
- Jedno
<h1> na stronę.
- Nagłówki po kolei, nie po wielkości liter.
- Każdy tekst mieszka w jakimś elemencie.
- Lista to
<ul>/<ol>, nie kilka linii pod sobą.
- Obrazek zawsze z
alt, opisującym treść, nie nazwę pliku.