Dokumentacja HTML
Zwięzła dokumentacja HTML oparta na przykładach. Przeczytaj o zagadnieniu, zobacz kod i przećwicz go na ścieżce Coddy.
Zacznij kursPierwsze kroki
- Doctype`<!DOCTYPE html>` to pierwsza linia każdego dokumentu HTML. Mówi przeglądarce, żeby renderowała stronę w trybie standardów zamiast w trybie quirks. Poznaj składnię, skutki starych doctype'ów i sposób sprawdzenia trybu.
- Znaczniki HTMLZnaczniki HTML oznaczają treść, żeby przeglądarka wiedziała, czym jest każda część: nagłówkiem, akapitem, linkiem, obrazkiem. Dowiedz się, jak działają znaczniki i elementy, które znaczniki nie mają znacznika zamykającego, jak działa zagnieżdżanie i których znaczników użyjesz najczęściej.
- Atrybuty HTMLAtrybuty dodają informacje do elementu HTML: dokąd prowadzi link, co pokazuje obrazek, która klasa CSS ma zastosowanie. Poznaj składnię, atrybuty globalne akceptowane przez każdy element, class i id, atrybuty logiczne oraz atrybuty data-*.
- KomentarzeKomentarz HTML to tekst między <!-- i -->, którego przeglądarka nie wyświetla. Poznaj składnię, komentarze wieloliniowe, zakomentowywanie kodu, skrót w edytorze, powód, dla którego komentarzy nie da się zagnieżdżać, i dlaczego nigdy nie są prywatne.
- DivZnacznik <div> to ogólny kontener blokowy bez własnego znaczenia. Dowiedz się, jak grupować nim treść, stylizować go przez klasę, budować układy z divów i flexboksa i kiedy lepszy jest znacznik semantyczny lub przycisk.
- SpanZnacznik <span> to ogólny kontener inline: obejmuje kilka słów w linii, żeby dało się je ostylować albo obsłużyć skryptem bez łamania linii. Dowiedz się, jak go używać, czym różni się od div i kiedy lepiej pasuje bardziej konkretny znacznik.
Tekst
- Nagłówki h1 do h6HTML ma sześć poziomów nagłówków, od <h1> do <h6>, które tworzą konspekt strony. Poznaj domyślne rozmiary, kolejność nagłówków, liczbę znaczników h1 na stronie, zmianę rozmiaru w CSS i sposób, w jaki korzystają z nich czytniki ekranu.
- Nowa linia (br)Użyj <br>, żeby zacząć nową linię wewnątrz bloku tekstu. Dowiedz się, kiedy <br> jest właściwy, a kiedy lepszy jest akapit, jak zachować znaki nowej linii z tekstu, jak pozwolić długim słowom się łamać przez <wbr> i jak zablokować łamanie linii.
- SpacjePrzeglądarki scalają każdy ciąg spacji w HTML w jedną. Dowiedz się, jak dodać dodatkowe spacje przez , co robi twarda spacja, jak zachować spacje i tabulatory przez <pre> i white-space oraz kiedy lepszym narzędziem są odstępy w CSS.
- Pogrubienie i kursywaPogrubisz tekst w HTML znacznikiem <strong> lub <b>, a kursywę uzyskasz przez <em> lub <i>. Dowiedz się, którego znacznika kiedy używać, jak połączyć pogrubienie z kursywą i jak zrobić to samo w CSS.
- Podkreślenie i przekreśleniePodkreśl tekst w HTML za pomocą <u> lub text-decoration w CSS, a przekreśl go za pomocą <s> lub <del>. Dowiedz się, co znaczy każdy znacznik, jak <ins> i <del> oznaczają zmiany i dlaczego podkreślony tekst, który nie jest linkiem, myli czytelników.
- Indeks górnyPisz indeks górny przez <sup> i indeks dolny przez <sub>: potęgi, liczebniki porządkowe, odnośniki do przypisów i wzory chemiczne. Poznaj typowe zastosowania, sposób na nierówne odstępy między liniami i sytuacje, w których lepiej pasuje znak Unicode albo MathML.
- Linia poziomaLinię poziomą w HTML narysujesz znacznikiem <hr>. Dowiedz się, co oznacza, jak zmienić jej kolor, grubość, szerokość i styl w CSS, jak zbudować separator z tekstem pośrodku i jak zrobić linię pionową.
- Wyśrodkowanie tekstuTekst w HTML wyśrodkujesz właściwością CSS text-align: center. Dowiedz się, gdzie ją umieścić, dlaczego nie działa na span, jak wyśrodkować tekst w pionie, jak wyrównać tekst do początku, końca lub obu krawędzi i jak robić wcięcia akapitów.
Linki i obrazy
- Linki (a href)Jak element <a> tworzy linki: atrybut href, bezwzględne i względne adresy URL, przejście do sekcji strony przez #id, linki do pobierania, klikalne karty i błędy, które psują linki.
- Link w nowej karcieDodaj target="_blank" do linku, żeby otwierał się w nowej karcie. Ta strona omawia rel="noopener" i noreferrer, informowanie użytkowników, że link otwiera nową kartę, inne wartości target oraz robienie tego w JavaScript.
- Linki e-mail (mailto)Zrób link, który otwiera nowego e-maila przez href="mailto:", uzupełnij temat, treść, cc i bcc, poprawnie je zakoduj i twórz linki do dzwonienia przez tel: i sms:.
- Przycisk jako linkWłaściwy sposób na przycisk prowadzący do innej strony to link wystylizowany jak przycisk. Zobacz, dlaczego przycisk w linku i nawigacja przez onclick się psują, kiedy lepszy jest przycisk formularza i jak stylizować oraz wyłączać linki-przyciski.
- ObrazkiJak wstawić obrazek w HTML znacznikiem <img>: src i alt, ustawianie rozmiaru przez width i height, responsywne obrazki, przycinanie przez object-fit, podpisy z figure, leniwe wczytywanie i odstęp pod obrazkami.
Listy i tabele
- ListyJak tworzyć listy w HTML: wypunktowania z <ul>, listy numerowane z <ol> (start, reversed, litery i cyfry rzymskie), listy zagnieżdżone, listy opisowe oraz stylowanie i usuwanie punktorów w CSS.
- TabeleJak zrobić tabelę w HTML: wiersze przez <tr>, komórki przez <td>, komórki nagłówka przez <th> i scope, podpisy, thead, tbody i tfoot, paski zebry oraz tabele przewijane na małych ekranach.
- Obramowanie tabeliJak dodać obramowanie do tabeli HTML w CSS: pojedyncze linie przez border-collapse, border-spacing, same linie między wierszami, tylko wewnętrzne obramowania, zaokrąglone rogi i dlaczego atrybut border jest przestarzały.
- colspan i rowspanScalaj komórki tabeli w poziomie przez colspan i w pionie przez rowspan. Dowiedz się, jak liczyć komórki, żeby tabela się nie rozjechała, jak budować grupowane nagłówki i jak zachować czytelność scalonych tabel dla czytników ekranu.
Formularze
- FormularzeJak zbudować formularz w HTML: element form, atrybuty name, action i method (GET a POST), grupowanie przez fieldset i legend, wbudowana walidacja z required i pattern oraz obsługa wysyłania w JavaScripcie.
- Typy inputWszystkie typy znacznika HTML <input> w jednym miejscu: text, email, password, number, range, data i czas, color, file, hidden i reszta, z tym, co każdy waliduje, jaką klawiaturę otwiera na telefonie i jakie atrybuty są wspólne.
- PrzyciskJak zrobić przycisk w HTML elementem <button>: trzy typy (submit, button, reset), wysyłanie wartości z formularzem, wyłączone przyciski, ikony i stylowanie w CSS, które zachowuje ramkę fokusu.
- CheckboxJak zrobić checkbox w HTML za pomocą <input type="checkbox">: etykiety, atrybut checked, co formularz wysyła, gdy pole jest zaznaczone, a co, gdy nie jest, grupy checkboxów, zaznacz wszystko ze stanem indeterminate i stylowanie.
- Radio buttonJak działają przyciski radio w HTML: grupowanie atrybutem name, domyślny wybór przez checked, wymagane grupy, odczyt wybranej wartości w JavaScript, obsługa klawiatury i stylowanie jako własne kółka albo karty.
- Lista rozwijana (select)Jak zrobić listę rozwijaną w HTML z <select> i <option>: wartości, opcja domyślna lub placeholder, required, grupy opcji, wybór wielokrotny, odczyt i ustawianie wartości w JavaScript oraz stylowanie strzałki.
- TextareaJak zrobić wielowierszowe pole tekstowe z <textarea>: rows i cols, tekst domyślny między znacznikami, zmiana rozmiaru i automatyczne rośnięcie, maxlength z licznikiem znaków, podziały linii w wysłanym tekście i stylowanie.
- Label w HTMLJak element <label> nadaje nazwę polu formularza: połączenie przez for i id albo przez objęcie pola, większy obszar kliknięcia dla checkboxów i radio, podpowiedzi i komunikaty o błędach, ukryte etykiety oraz błędy, które zrywają połączenie.
Semantyczny HTML
- Semantyczny HTMLSemantyczny HTML to wybieranie znaczników według tego, czym jest treść, a nie jak wygląda. Poznaj semantyczne znaczniki układu (header, nav, main, article, aside, footer), co dają czytnikom ekranu i wyszukiwarkom i jak sprawdzić strukturę strony.
- Znacznik headerElement <header> zawiera wstęp strony lub sekcji: logo, tytuł, nawigację, podpis autora. Dowiedz się, jak zbudować nagłówek strony, czym <header> różni się od <head> i nagłówków h1 do h6, jak używać go w artykułach i jak go przykleić.
- Stopka (footer)Element <footer> zamyka stronę lub sekcję: prawa autorskie, dane kontaktowe, linki, informacje o autorze. Dowiedz się, jak zbudować stopkę strony z kolumnami linków, jak utrzymać ją na dole krótkiej strony i jak działają stopki w artykułach.
- NavElement <nav> oznacza blok głównych linków nawigacyjnych. Dowiedz się, jak zbudować pasek nawigacji z <nav> i listy, jak oznaczyć bieżącą stronę, jak opisać kilka elementów nav na jednej stronie i jak zrobić przełącznik menu mobilnego.
- SectionElement <section> grupuje treść na jeden temat pod własnym nagłówkiem. Dowiedz się, kiedy używać <section>, kiedy lepszy jest <article> albo <div>, jak te trzy elementy się zagnieżdżają i jak opisana sekcja staje się punktem orientacyjnym.
Head i znaczniki meta
- Znacznik titleElement <title> nadaje stronie nazwę widoczną na karcie przeglądarki, w zakładkach i w wynikach wyszukiwania. Dowiedz się, gdzie go umieścić, jak długi powinien być, czym różni się od <h1> i atrybutu title oraz jak zmienić go w JavaScripcie.
- Meta viewportZnacznik meta viewport mówi telefonom, żeby układały stronę na szerokość ekranu, a nie na szerokość komputera. Poznaj standardowy znacznik, działanie każdej wartości, powód, dla którego zależy od niego responsywny CSS, i wartości, których lepiej unikać.
- PrzekierowaniePrzekieruj jedną stronę na inną znacznikiem meta refresh w czystym HTML, przez JavaScript albo na serwerze. Poznaj składnię meta refresh, automatyczne odświeżanie strony, powód, dla którego przekierowanie 301 na serwerze jest lepsze, i co z każdym robią wyszukiwarki.
- FaviconFavicon to mała ikona na karcie przeglądarki. Poznaj znacznik link, który ją dodaje, pliki i rozmiary do przygotowania (ICO, SVG, PNG, apple-touch-icon), sposób na favicon z SVG lub emotki, zmianę ikony w JavaScripcie i powód, dla którego wciąż widać starą.
- Atrybut langAtrybut lang mówi przeglądarkom, czytnikom ekranu i narzędziom do tłumaczenia, w jakim języku jest treść. Dowiedz się, gdzie go umieścić, jakich kodów używać (en, en-US, pt-BR), jak oznaczyć frazę w innym języku i co widocznie zmienia.
Multimedia i elementy interaktywne
- Znacznik iframeElement <iframe> pokazuje inną stronę internetową wewnątrz twojej. Poznaj potrzebne atrybuty (src, title, width, height), osadzanie filmów z YouTube i map, responsywny iframe, ograniczenia, które nakłada sandbox, i powód, dla którego niektóre strony nie chcą się w nim wczytać.
- Znacznik videoElement <video> odtwarza pliki wideo we wbudowanym odtwarzaczu przeglądarki. Poznaj kod, najważniejsze atrybuty (controls, autoplay, muted, loop, playsinline, poster, preload), formaty zapasowe z <source>, napisy z <track>, responsywny rozmiar i sterowanie odtwarzaniem w JavaScripcie.
- Znacznik audioElement <audio> odtwarza pliki dźwiękowe we wbudowanym odtwarzaczu przeglądarki. Poznaj kod, atrybuty (controls, autoplay, loop, muted, preload), zalecane formaty, powód blokowania autoodtwarzania z dźwiękiem i sposób na własny przycisk odtwarzania w JavaScripcie.
- details i summaryElementy <details> i <summary> tworzą zwijaną sekcję bez JavaScriptu: summary jest zawsze widoczne, a kliknięcie go pokazuje lub ukrywa resztę. Poznaj kod, atrybuty open i name, akordeony, stylowanie strzałki i zdarzenie toggle.
