Znaczniki HTML: ściąga (cheat sheet)
Ostatnia aktualizacja
Struktura dokumentu
Każda strona HTML zaczyna się od tego szkieletu.
| Element | Co robi |
|---|---|
<!DOCTYPE html> | Deklaruje dokument jako HTML5 (pierwsza linia) |
<html lang="en"> | Element główny; lang ustawia język |
<head> | Metadane: tytuł, linki, skrypty; niewidoczne na stronie |
<meta charset="UTF-8"> | Kodowanie znaków (zawsze dodawaj) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Responsywne skalowanie na urządzeniach mobilnych |
<title> | Tytuł strony widoczny na karcie przeglądarki i w wynikach wyszukiwania |
<body> | Tu trafia wszystko, co widać na stronie |
Tekst i nagłówki
| Element | Co robi |
|---|---|
<h1> … <h6> | Nagłówki, <h1> najważniejszy (jeden na stronę) |
<p> | Akapit tekstu |
<br> | Łamanie wiersza (bez znacznika zamykającego) |
<hr> | Podział tematyczny / linia pozioma |
<strong> | Ważny tekst (pogrubiony) |
<em> | Tekst z emfazą (kursywa) |
<span> | Kontener liniowy do stylowania fragmentu tekstu |
<code> | Kod w linii |
<pre> | Tekst preformatowany (zachowuje białe znaki) |
<blockquote> | Blok cytatu |
Linki i obrazy
| Element | Składnia |
|---|---|
| Link | <a href="https://coddy.tech">Coddy</a> |
| Otwarcie w nowej karcie | <a href="..." target="_blank" rel="noopener"> |
| Kotwica (skok do id) | <a href="#section">Jump</a> |
| Obraz | <img src="cat.png" alt="A cat" width="200"> |
| Obraz responsywny | <img src="..." srcset="..." sizes="..."> |
| Ilustracja z podpisem | <figure><img ...><figcaption>…</figcaption></figure> |
Listy
| Element | Co robi |
|---|---|
<ul> | Lista nieuporządkowana (punktowana) |
<ol> | Lista uporządkowana (numerowana) |
<li> | Element listy (wewnątrz <ul> lub <ol>) |
<dl> | Lista definicji |
<dt> / <dd> | Definiowany termin / jego opis |
Tabele
| Element | Co robi |
|---|---|
<table> | Kontener tabeli |
<thead> / <tbody> / <tfoot> | Grupy nagłówka, treści i stopki tabeli |
<tr> | Wiersz tabeli |
<th> | Komórka nagłówka (pogrubiona, wyśrodkowana) |
<td> | Komórka danych |
colspan / rowspan | Scalanie komórek w poziomie / w pionie |
Formularze i pola
Elementy składowe każdego formularza, który zbiera dane.
| Element | Składnia / zastosowanie |
|---|---|
| Formularz | <form action="/submit" method="post"> |
| Pole tekstowe | <input type="text" name="q" placeholder="Search"> |
| E-mail / hasło | <input type="email">, <input type="password"> |
| Pole wyboru / przycisk opcji | <input type="checkbox">, <input type="radio"> |
| Liczba / data | <input type="number">, <input type="date"> |
| Etykieta | <label for="q">Search</label> |
| Wiele linii | <textarea rows="4"></textarea> |
| Lista rozwijana | <select><option>One</option></select> |
| Przycisk | <button type="submit">Send</button> |
| Pole wymagane | <input required> |
Znaczniki semantyczne i układu
Używaj ich zamiast ogólnych <div>, aby przeglądarki, czytniki ekranu i wyszukiwarki rozumiały twoją stronę.
| Element | Co oznacza |
|---|---|
<header> | Górna część strony lub sekcji (logo, nawigacja) |
<nav> | Linki nawigacyjne |
<main> | Główna treść (jedna na stronę) |
<section> | Tematyczna grupa treści |
<article> | Samodzielna treść (wpis, karta) |
<aside> | Pasek boczny / treść poboczna |
<footer> | Dolna część strony lub sekcji |
<div> | Ogólny kontener blokowy (bez znaczenia) |
Popularne atrybuty globalne
| Atrybut | Co robi |
|---|---|
id | Unikalny identyfikator elementu |
class | Jedna lub więcej nazw klas (dla CSS / JS) |
style | CSS w linii (używaj oszczędnie) |
title | Podpowiedź po najechaniu kursorem |
data-* | Własny atrybut danych, np. data-id="42" |
hidden | Ukrywa element |
Wszystkie znaczniki i atrybuty HTML, po które sięgasz, pogrupowane według tego, co robią. Ten HTML cheat sheet obejmuje szkielet strony, tekst i linki, obrazy i multimedia, listy, tabele, formularze oraz znaczniki semantyczne, które nadają znaczenie twojemu kodowi.
Wszystko to standardowy HTML5, który działa w każdej nowoczesnej przeglądarce. Skopiuj znacznik albo otwórz edytor online HTML, aby edytować go z podglądem na żywo, bez żadnej konfiguracji. Budujesz swoją pierwszą stronę? Darmowy interaktywny kurs HTML w Coddy zaczyna od podstaw.
Znaczniki HTML: najczęstsze pytania
Czy ten HTML cheat sheet jest darmowy?
Tak. Z tej ściągi z HTML korzystasz za darmo i bez rejestracji. Dodaj ją do zakładek i wracaj, gdy potrzebujesz sprawdzić znacznik albo atrybut.
Czym różni się <section> od <div>?
<section> to znacznik semantyczny: mówi przeglądarkom i czytnikom ekranu, że jego zawartość to znacząca, tematyczna grupa, i zwykle ma nagłówek. <div> nie niesie żadnego znaczenia i jest tylko ogólnym kontenerem do stylowania albo skryptów. Sięgaj po znacznik semantyczny (<section>, <article>, <nav>), gdy któryś pasuje, a po <div> tylko wtedy, gdy żaden nie pasuje.Czy wszystkie znaczniki HTML potrzebują znacznika zamykającego?
Większość tak (
<p>...</p>), ale kilka elementów "pustych" nie, bo nie mogą niczego zawierać: <img>, <br>, <hr>, <input>, <meta> i <link>. W HTML5 możesz je pisać z ukośnikiem na końcu albo bez niego.Czy mogę ćwiczyć HTML online?
Tak. Otwórz edytor online HTML, aby pisać HTML w przeglądarce z podglądem na żywo, bez instalacji. Gdy chcesz uczyć się bardziej systematycznie, darmowy interaktywny kurs HTML w Coddy krok po kroku uczy znaczników, formularzy i układu stron.
Czy ta ściąga nadaje się dla początkujących?
Tak. Zaczyna od szkieletu strony i codziennych znaczników, których użyjesz najpierw, a potem przechodzi do formularzy i znaczników semantycznych, więc górnych sekcji możesz używać od pierwszego dnia.
Powiązane materiały
Więcej ściąg
