Jak wstawić linię w HTML?

Aby wstawić linię w HTML, najczęściej stosuje się znacznik <hr>, który generuje poziomą linię dzielącą sekcje strony. Oprócz tego, za pomocą CSS i prostych struktur HTML można uzyskać również linię pionową oraz dostosować wygląd linii do indywidualnych potrzeb.

Pozioma linia – znacznik <hr>

Znacznik <hr> służy do wstawiania poziomej linii rozdzielającej elementy treści. Można go stosować w dowolnym miejscu kodu HTML.

<p>Fragment tekstu przed linią.</p>
<hr>
<p>Fragment tekstu po linii.</p>

Domyślnie linia ta ma szerokość 100% rodzica, wysokość 1 lub 2 piksele oraz kolor zgodny z motywem strony.

Modyfikacja poziomej linii za pomocą CSS

Standardowa linia może być niewystarczająca pod względem wyglądu. Dlatego poleca się dostosować jej styl za pomocą CSS, np. zmieniając:

• Kolor – zmiana barwy linii;
• Grubość – dostosowanie wysokości linii;
• Styl linii (ciągły, przerywany) – wybór efektu graficznego;
• Marginesy i szerokość – regulacja położenia i rozmiaru.

Przykład –

<hr style="border: none; height: 3px; background-color: #3477db; width: 70%;"> 

Inny sposób, z osobną klasą CSS –

<hr class="my-hr">
<style>
.my-hr {
  border: none;
  height: 4px;
  background: linear-gradient(to right, #ff9933, #3366ff);
  margin: 24px auto;
  width: 50%;
}
</style>

Pionowa linia – wykorzystanie CSS i elementu <div>

HTML nie ma osobnego znacznika dla pionowych linii, natomiast można je łatwo uzyskać przez odpowiednio wystylizowany element:

<div style="width:2px; height:100px; background-color:#888;"></div> 

Zaleca się stosowanie klas CSS:

<div class="vertical-line"></div>
<style>
.vertical-line {
  width: 2px;
  height: 120px;
  background-color: #888;
  margin: 0 16px;
  display: inline-block;
}
</style>

Pionowe linie idealnie nadają się do rozdzielania kolumn lub sekcji menu.

Linie niestandardowe i alternatywy

Możliwe jest tworzenie linii także przez:

• Ramki (border) – dodawane do innych elementów, np. do <span> lub <div>;
• Wykorzystanie elementów SVG – dla złożonych i dekoracyjnych linii (np. falistych).

Przykład z użyciem border –

<span style="display:block; border-bottom: 2px dashed #e01a4f; width:40%; margin:24px auto;"></span> 

Praktyczne zastosowania linii w serwisach internetowych

• Oddzielanie bloków treści – np. sekcji z opisem i sekcji z opiniami;
• Podkreślenia tytułów lub podtytułów;
• Wizualne dzielenie menu nawigacyjnego (pionowo);
• Tworzenie rozdzielaczy w formularzach;
• Zastosowania dekoracyjne – np. gradientowe lub animowane linie dla nowoczesnego wyglądu.

Najlepsze praktyki i wskazówki

• Używaj linii z umiarem. Nadmiar linii obniża czytelność zamiast ją zwiększać;
• Dbaj o spójność stylów na całej stronie;
• W przypadku linii pionowych stosuj CSS i odpowiednie struktury HTML – nie próbuj osiągać efektu pionowej linii przez obracanie <hr>, bo nie jest to semantyczne ani dostępne;
• Pamiętaj o dostępności i kontrastach – zbyt jasna lub cienka linia może być niewidoczna dla części użytkowników.

Podsumowanie kluczowych sposobów wstawiania linii

Wstawianie linii w HTML to prosty sposób na poprawę struktury i czytelności każdej strony internetowej. Dzięki odpowiednio dobranym stylom każdą linię możesz idealnie dopasować do wyglądu swojego projektu.