Lekcja 2.3: Łamanie linii (<br>)
Czym jest znacznik <br>?
Znacznik <br> (od angielskiego "break") służy do tworzenia łamania linii (przejścia do nowej linii) w tekście HTML. W przeciwieństwie do znacznika <p>, który tworzy nowy paragraf z odstępami przed i po, <br> po prostu przerywa linię tekstu i kontynuuje ją od nowej linii, bez dodawania dodatkowych odstępów.
Składnia znacznika <br>
Znacznik <br> jest elementem pustym (void element), co oznacza, że nie ma znacznika zamykającego ani zawartości. W HTML5 można go zapisać na dwa sposoby:
<br> <!-- Standardowy zapis w HTML5 -->
<br /> <!-- Zapis zgodny z XHTML, również poprawny w HTML5 -->Oba zapisy są poprawne w HTML5, ale pierwszy jest bardziej powszechny i prostszy.
Zastosowanie znacznika <br>
Znacznik <br> jest używany w sytuacjach, gdy chcemy przerwać linię tekstu bez tworzenia nowego paragrafu. Oto kilka typowych zastosowań:
1. Adresy
<p>
Jan Kowalski<br>
ul. Przykładowa 123<br>
00-001 Warszawa<br>
Polska
</p>
Jan Kowalski
ul. Przykładowa 123
00-001 Warszawa
Polska
2. Poezja i teksty z określonym formatowaniem
<p>
Oto jest wiersz,<br>
który ma kilka linii,<br>
ale jest jednym paragrafem.
</p>
Oto jest wiersz,
który ma kilka linii,
ale jest jednym paragrafem.
3. Formularze
<form>
<label for="name">Imię:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Wyślij">
</form>Różnice między <br> a <p>
Ważne jest, aby zrozumieć różnice między znacznikami <br> i <p>:
| Znacznik <br> | Znacznik <p> |
|---|---|
| Tworzy tylko łamanie linii | Tworzy nowy paragraf |
| Nie dodaje dodatkowego odstępu | Dodaje odstęp przed i po paragrafie |
| Jest elementem pustym (bez znacznika zamykającego) | Wymaga znacznika zamykającego |
| Używany do formatowania tekstu w ramach jednego paragrafu | Używany do organizowania treści w logiczne bloki |
Najlepsze praktyki używania <br>
Chociaż znacznik <br> jest przydatny, jego nadużywanie może prowadzić do złych praktyk w tworzeniu stron internetowych. Oto kilka wskazówek dotyczących jego właściwego użycia:
- Używaj
<br>tylko do łamania linii w ramach jednego logicznego bloku tekstu, takiego jak adres czy wiersz. - Nie używaj
<br>do tworzenia odstępów między elementami - do tego służy CSS (marginesy, padding). - Nie używaj wielu
<br>pod rząd do tworzenia większych odstępów - zamiast tego użyj CSS. - Nie używaj
<br>do oddzielania paragrafów - do tego służy znacznik<p>. - Pamiętaj o semantyce -
<br>powinien być używany tylko wtedy, gdy łamanie linii jest częścią treści, a nie elementem formatowania.
Przykład złego użycia:
<!-- Źle: używanie <br> do tworzenia odstępów -->
<p>To jest pierwszy paragraf.</p>
<br>
<br>
<p>To jest drugi paragraf.</p>Lepsze rozwiązanie:
<!-- Dobrze: używanie CSS do kontrolowania odstępów -->
<p>To jest pierwszy paragraf.</p>
<p>To jest drugi paragraf.</p>
<style>
p {
margin-bottom: 20px;
}
</style>Alternatywy dla <br>
W wielu przypadkach istnieją lepsze alternatywy dla znacznika <br>:
- Dla oddzielnych paragrafów: Użyj znacznika
<p>. - Dla list: Użyj znaczników
<ul>i<li>(lista nienumerowana) lub<ol>i<li>(lista numerowana). - Dla preformatowanego tekstu: Użyj znacznika
<pre>, który zachowuje spacje i znaki nowej linii. - Dla odstępów między elementami: Użyj CSS (margin, padding).
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz stronę HTML zawierającą wizytówkę z danymi kontaktowymi, używając znacznika <br> do formatowania adresu.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Wizytówka</title>
<style>
.business-card {
width: 350px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
font-family: Arial, sans-serif;
}
.name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.title {
color: #666;
margin-bottom: 15px;
}
.contact {
margin-top: 15px;
}
</style>
</head>
<body>
<div class="business-card">
<div class="name">Jan Kowalski</div>
<div class="title">Programista Front-end</div>
<div>
<strong>Firma XYZ</strong><br>
ul. Przykładowa 123<br>
00-001 Warszawa<br>
Polska
</div>
<div class="contact">
Tel: +48 123 456 789<br>
Email: jan.kowalski@example.com<br>
Web: www.example.com
</div>
</div>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz krótki wiersz lub cytat, używając znacznika
<br>do formatowania linii. - Stwórz prosty formularz kontaktowy, używając
<br>do oddzielania pól formularza. - Przepisz przykład "złego użycia"
<br>na wersję z poprawnym użyciem CSS. - Stwórz przykład, w którym zamiast
<br>lepiej użyć listy<ul>lub<ol>.
Najczęściej zadawane pytania
Kiedy należy używać <br>, a kiedy <p>?
Znacznik <br> należy używać tylko do łamania linii w ramach jednego logicznego bloku tekstu (np. w adresie, wierszu). Do oddzielania paragrafów lub bloków treści zawsze używaj znacznika <p>.
Czy można dodać style do znacznika <br>?
Technicznie można dodać style do <br> używając atrybutów id lub class, ale ma to ograniczone zastosowanie, ponieważ <br> jest elementem pustym bez zawartości. Lepiej stylizować elementy zawierające tekst.
Jak dodać więcej przestrzeni przy użyciu <br>?
Można użyć kilku znaczników <br> pod rząd, ale nie jest to zalecane. Lepszym rozwiązaniem jest użycie CSS z właściwościami margin lub padding do kontrolowania odstępów między elementami.
Czy <br> jest zgodny z HTML5?
Tak, znacznik <br> jest w pełni zgodny z HTML5. Można go zapisać jako <br> lub <br /> (zapis zgodny z XHTML), przy czym pierwsza forma jest bardziej powszechna w HTML5.
Czy <br> wpływa na SEO?
Sam znacznik <br> ma minimalny wpływ na SEO. Jednak nadużywanie go zamiast odpowiednich znaczników semantycznych (jak <p>, <h1>-<h6>, <ul>, <ol>) może negatywnie wpłynąć na strukturę strony z punktu widzenia wyszukiwarek.