HTML Academy · Lekcja

Elementy span i div

Używać ogólnych kontenerów inline i blokowych jako punktów zaczepienia dla stylów.

Elementy span i div to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 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.

Kontenery ogólnego przeznaczenia

HTML ma dwa ogólne, neutralne semantycznie elementy kontenerów:

<div> — kontener blokowy
<span> — kontener wbudowany

Same w sobie nie mają żadnego znaczenia — służą wyłącznie jako uchwyty do stylowania i obsługi skryptów.

Element div

<div> jest kontenerem blokowym — tworzy nowy wiersz przed sobą i za sobą:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

Element span

<span> jest kontenerem wbudowanym — przepływa wewnątrz tekstu:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Kiedy używać div zamiast elementów semantycznych

Zanim użyją Państwo elementu <div>, proszę sprawdzić, czy pasuje element semantyczny:

Nagłówek strony → <header>
Nawigacja → <nav>
Główna treść → <main>
Wpis na blogu → <article>
Pasek boczny → <aside>
Stopka strony → <footer>

Elementu <div> należy używać tylko wtedy, gdy nie pasuje żaden element semantyczny.

Divitis

Divitis — nadmierne używanie elementu <div> do wszystkiego:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Uchwyty CSS za pomocą class i id

Elementów <div> i <span> używa się wraz z atrybutami class lub id w celu wskazania elementów dla CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Wskazywanie elementów w JavaScript

Elementy <div> i <span> mogą być również wskazywane w JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Zasady zagnieżdżania

Zasady zagnieżdżania ogólnych kontenerów:

<div> może zawierać elementy <div> i <span>
<span> może zawierać tylko elementy <span> i treść wbudowaną
Nie należy umieszczać elementu <div> wewnątrz elementu <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div w układzie strony

Typowy wzorzec układu strony z użyciem elementów div:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span do stylowania wbudowanego

Typowe wzorce stylowania wbudowanego:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div i span są niewidoczne

Domyślnie elementy <div> i <span> są niewidocznymi opakowaniami:

<div> nie dodaje żadnego stylowania wizualnego poza wyświetlaniem blokowym
<span> nie dodaje absolutnie żadnego stylowania
Cały wygląd pochodzi z zastosowanego CSS
Dzięki temu są idealnymi neutralnymi kontenerami

Szybkie sprawdzenie

Którego elementu należy użyć, aby stylizować pojedyncze słowo w akapicie?

Podsumowanie: span i div

Najważniejsze informacje o ogólnych kontenerach:

<div> — blokowy, grupuje elementy na potrzeby układu
<span> — wbudowany, wskazuje fragmenty tekstu do stylowania
Oba elementy są neutralne semantycznie — nie dodają znaczenia
Jeśli to możliwe, należy wybierać semantyczne elementy HTML5
Atrybutów class i id należy używać do łączenia tych elementów z CSS i JavaScript

Często zadawane pytania

Czy lekcja „Elementy span i div” jest bezpłatna?

Tak — pełny tekst „Elementy span i div” 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 „Elementy span i div”?

Używać ogólnych kontenerów inline i blokowych jako punktów zaczepienia dla stylów. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Elementy span i div”?

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