br, hr, blockquote i pre
Kontrolować podziały wierszy, podziały tematyczne, cytaty i tekst preformatowany.
br, hr, blockquote i pre to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 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 br
Element <br> wstawia podział wiersza w treści tekstowej:
<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->Kiedy używać br
Elementu <br> należy używać wyłącznie wtedy, gdy podziały wierszy są częścią treści:
- Adresy pocztowe
- Wiersze poezji z określonymi podziałami
- Teksty piosenek
Nie należy używać <br> do dodawania wizualnych odstępów między akapitami — służy do tego CSS.
Element hr
Element <hr> reprezentuje podział tematyczny między treściami:
<p>Chapter One begins here and introduces the characters.</p>
<hr>
<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->Stylizowanie hr za pomocą CSS
Element <hr> można w pełni stylizować:
<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">
<!-- Or in CSS: -->
<!--
hr {
border: none;
border-top: 1px solid #ddd;
margin: 1.5rem 0;
}
-->Element blockquote
Element <blockquote> oznacza fragment zacytowany z innego źródła:
<blockquote cite="https://example.com/article">
<p>The best time to plant a tree was 20 years ago.
The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->Cytaty wbudowane za pomocą q
W przypadku krótkich cytatów wbudowanych należy użyć <q> zamiast <blockquote>:
<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->Element pre
Element <pre> wyświetla tekst czcionką o stałej szerokości i dokładnie zachowuje białe znaki:
<pre>
function hello() {
console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->Elementy pre i code razem
Elementów <pre> i <code> należy używać razem w przypadku bloków kodu:
<pre><code>
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->Escapowanie w pre
Specjalne znaki HTML wewnątrz <pre> nadal muszą być zapisane w postaci encji:
<pre><code>
<!-- These must be escaped: -->
<div class="box">
<p>Content</p>
</div>
<!-- < = < > = > & = & -->
</code></pre>Zwijanie białych znaków
Standardowy HTML zwija białe znaki — wiele spacji i znaków nowego wiersza staje się pojedynczą spacją:
<p>This has extra spaces.</p>
<!-- Renders as: "This has extra spaces." -->
<pre>This keeps all spaces.</pre>
<!-- Renders exactly as written -->
<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved newlines</p>Podsumowanie elementów związanych z białymi znakami
Szybkie zestawienie:
<br>— wbudowany podział wiersza (adresy, poezja)<hr>— tematyczny podział sekcji<blockquote>— cytat blokowy<q>— cytat wbudowany<pre>— tekst preformatowany, zachowuje białe znaki<code>— wbudowany fragment kodu
Szybkie sprawdzenie
Który element dokładnie zachowuje wszystkie białe znaki, w tym spacje i znaki nowego wiersza?
Podsumowanie: br, hr, blockquote i pre
Elementy związane z białymi znakami i cytowaniem:
<br>— podział wiersza w treści (nie do tworzenia odstępów)<hr>— tematyczny podział treści (semantyczny, a nie wyłącznie wizualny)<blockquote cite>— cytat blokowy ze źródłem<q>— cytat wbudowany<pre><code>— sformatowane bloki kodu
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „br, hr, blockquote i pre” jest bezpłatna?
Tak — pełny tekst „br, hr, blockquote i pre” 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 „br, hr, blockquote i pre”?
Kontrolować podziały wierszy, podziały tematyczne, cytaty i tekst preformatowany. Ć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 3 z 4.
Ile czasu zajmuje lekcja „br, hr, blockquote i pre”?
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
- Nagłówki h1-h6 i ich hierarchia
- Akapity, em, strong oraz b i
- br, hr, blockquote i pre
- Elementy span i div