HTML Academy · Lekcja

id, class, style i title

Stosować podstawowe atrybuty globalne do dowolnego elementu HTML.

id, class, style i title to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Atrybuty globalne

Atrybuty globalne można stosować do dowolnego elementu HTML:

id — unikalny identyfikator
class — jedna lub więcej klas CSS
style — CSS inline
title — tekst podpowiedzi
Oraz wiele innych: lang, hidden, tabindex, data-*...

Atrybut id

Atrybut id przypisuje elementowi unikalny identyfikator:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Zastosowania id

Atrybut id ma wiele zastosowań:

Wybieranie za pomocą CSS: #hero-banner { ... }
Wybieranie w JavaScript: document.getElementById('signup-form')
Nawigacja do fragmentu: <a href="#installation">
Nadawanie etykiet ARIA: aria-labelledby="modal-title"

Atrybut class

Atrybut class przypisuje jedną lub więcej klas CSS:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id a class

Kiedy używać poszczególnych atrybutów:

id — jeden konkretny element na stronie
class — wzorzec stylu stosowany do wielu elementów

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

Atrybut style

Atrybut style dodaje CSS inline:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Kiedy używać atrybutu style inline

Styl inline jest dopuszczalny w następujących przypadkach:

Wartości dynamiczne ustawiane przez JavaScript
Wartości, których nie można znać podczas pisania CSS (kolory i szerokości ustawiane przez użytkownika)
HTML wiadomości e-mail (klienci poczty usuwają zewnętrzny CSS)

Nie należy używać style do statycznych decyzji dotyczących wyglądu — należą one do CSS.

Atrybut title

Atrybut title udostępnia tekst podpowiedzi po najechaniu:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Ograniczenia dostępności atrybutu title

Atrybut title ma poważne problemy z dostępnością:

Nie jest dostępny podczas nawigacji za pomocą klawiatury
Nie jest wyświetlany na ekranach dotykowych
Działanie z czytnikami ekranu jest niespójne
Nigdy nie umieszczaj ważnych informacji wyłącznie w atrybucie title

W przypadku ważnych informacji używaj aria-label lub widocznego tekstu.

Specyficzność: id, class i style inline

Specyficzność CSS od najniższej do najwyższej:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Konwencje nazewnictwa class

Popularne konwencje nazewnictwa klas:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Szybkie sprawdzenie

Jaka jest najważniejsza zasada dotycząca atrybutu id?

Podsumowanie: id class style title

Najważniejsze atrybuty globalne:

id — unikalny na stronie; używany w CSS, JavaScript, fragmentach i ARIA
class — wielokrotnego użytku; wiele klas oddzielonych spacjami
style — CSS inline (używaj oszczędnie; preferuj zewnętrzny CSS)
title — podpowiedź; niedostępny dla użytkowników klawiatury i ekranów dotykowych
Specyficzność id > specyficzność class w CSS

Często zadawane pytania

Czy lekcja „id, class, style i title” jest bezpłatna?

Tak — pełny tekst „id, class, style i title” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „id, class, style i title”?

Stosować podstawowe atrybuty globalne do dowolnego elementu HTML. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „id, class, style i title”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy