HTML Academy · Lekcja

Akapity, em, strong oraz b i

Oznaczać tekst akapitów za pomocą semantycznego wyróżnienia oraz znaczników pogrubienia.

Akapity, em, strong oraz b i to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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.

Element akapitu

Element  oznacza blok tekstu jako akapit:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Emfaza semantyczna: em

Element  oznacza tekst jako emfazę akcentowaną — słowo, które zmienia znaczenie zdania:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Znaczenie semantyczne: strong

Element  oznacza tekst jako szczególnie ważny:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em a i

Elementy  i  domyślnie renderują tekst kursywą, ale mają inne znaczenie:

 — semantyczna emfaza akcentowana (należy używać go najczęściej)
 — prezentacyjna kursywa: terminy techniczne, tytuły, wyrażenia w językach obcych

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong a b

Elementy  i  domyślnie renderują tekst pogrubieniem, ale różnią się pod względem semantycznym:

 — semantyczne oznaczenie ważności (należy używać go najczęściej)
 — zwrócenie uwagi bez sugerowania ważności: słowa kluczowe, nazwy produktów

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Zagnieżdżanie em i strong

Elementy emfazy można zagnieżdżać, aby uzyskać połączony efekt:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Akapitów nie można zagnieżdżać

Element  nie może zawierać innego elementu :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Elementy wbudowane i blokowe w akapitach

 jest elementem blokowym, który może zawierać wyłącznie elementy wbudowane:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Dostępność emfaz

Dlaczego znaczniki semantyczne mają znaczenie dla technologii wspomagających:

Czytniki ekranu odczytują  ze zmienioną intonacją w niektórych implementacjach
 może być odczytywany z dodatkowym akcentem
Pogrubienie lub kursywa uzyskane wyłącznie za pomocą CSS (np. font-style: italic na elemencie span) nie mają znaczenia semantycznego dla czytników ekranu

Częste błędy

Należy unikać następujących częstych błędów w oznaczaniu tekstu:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Kiedy używać poszczególnych elementów

Szybki przewodnik ułatwiający podjęcie decyzji:

Fragment tekstu ciągłego → 
Zaakcentowanie słowa zmieniającego znaczenie → 
Oznaczenie informacji o kluczowym znaczeniu → 
Zapisanie tytułu lub terminu technicznego kursywą → 
Zwrócenie uwagi na słowo kluczowe bez sugerowania ważności →

Szybkie sprawdzenie

Którego elementu należy użyć, aby oznaczyć tekst jako szczególnie ważny?

Podsumowanie: semantyka tekstu

Podsumowanie oznaczania tekstu:

 — akapity tekstu ciągłego
 — emfaza akcentowana, zmienia znaczenie zdania
 — szczególna ważność
 — prezentacyjna kursywa (tytuły, terminy)
 — zwrócenie uwagi bez oznaczania ważności
Nigdy nie należy używać   do tworzenia odstępów między akapitami

Często zadawane pytania

Czy lekcja „Akapity, em, strong oraz b i” jest bezpłatna?

Tak — pełny tekst „Akapity, em, strong oraz b i” 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 „Akapity, em, strong oraz b i”?

Oznaczać tekst akapitów za pomocą semantycznego wyróżnienia oraz znaczników pogrubienia. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Akapity, em, strong oraz b i”?

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