Formatowanie tekstu w HTML jest podstawowym elementem projektowania stron internetowych, pozwalającym na wyróżnianie ważnych informacji, strukturyzację treści oraz poprawę czytelności i estetyki strony. HTML oferuje różne znaczniki do formatowania tekstu, takie jak pogrubienie, pochylenie, podkreślenie, przekreślenie, indeks górny i dolny, a także znaczniki do dodawania semantycznych zmian w tekście, takich jak wstawienie (ins) i usunięcie (del). W tej lekcji przejdziemy przez każdy z tych znaczników, oferując przykłady ich użycia.
Przykłady formatowania tekstu
Poniżej znajdziesz serię przykładów, jak używać różnych znaczników do formatowania tekstu w HTML.
Pogrubienie tekstu z tagiem <b>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pogrubienie tekstu</title>
</head>
<body>
<p>Ten tekst jest <b>pogrubiony</b>.</p>
</body>
</html>
Pochylenie tekstu z tagiem <i>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pochylenie tekstu</title>
</head>
<body>
<p>Ten tekst jest <i>pochylony</i>.</p>
</body>
</html>
Podkreślenie tekstu z tagiem <u>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podkreślenie tekstu</title>
</head>
<body>
<p>Ten tekst jest <u>podkreślony</u>.</p>
</body>
</html>
Przekreślenie tekstu z tagiem <strike>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przekreślenie tekstu</title>
</head>
<body>
<p>Ten tekst jest <strike>przekreślony</strike>.</p>
</body>
</html>
Superskrypt i subskrypt z tagami <sup> i <sub>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superskrypt i subskrypt</title>
</head>
<body>
<p>To jest tekst z indeksem górnym (superskrypt) E=mc<sup>2</sup>.</p>
<p>To jest tekst z indeksem dolnym (subskrypt) H<sub>2</sub>O.</p>
</body>
</html>
Wstawianie i usuwanie tekstu z tagami <ins> i <del>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wstawianie i usuwanie tekstu</title>
</head>
<body>
<p>Ten tekst zawiera <del>usunięty fragment</del> oraz <ins>wstawiony fragment</ins>.</p>
</body>
</html>
Zmiana rozmiaru tekstu z tagami <big> i <small>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zmiana rozmiaru tekstu</title>
</head>
<body>
<p>Ten tekst jest <big>większy</big> oraz <small>mniejszy</small>.</p>
</body>
</html>
Podsumowanie
W tej lekcji przeszliśmy przez podstawowe znaczniki HTML służące do formatowania tekstu. Każdy z tych znaczników ma swoje zastosowanie i pozwala na efektywne wyróżnianie oraz strukturyzowanie treści na stronie internetowej. Pamiętaj, że choć znaczniki takie jak <b>, <i>, <u>, czy <strike> są stosunkowo proste w użyciu, to HTML5 wprowadza bardziej semantyczne podejście do formatowania tekstu (np. <strong> zamiast <b> dla wyróżnienia ważności tekstu, <em> zamiast <i> dla nacisku), co jest zalecane dla lepszej dostępności i SEO.
Podczas pracy z HTML warto również pamiętać o wykorzystaniu CSS (Cascading Style Sheets) do bardziej zaawansowanego formatowania tekstu i elementów strony, co pozwala na oddzielenie struktury strony (HTML) od jej wyglądu (CSS). Współczesne strony internetowe często korzystają z połączenia HTML, CSS, i JavaScript do tworzenia bogatych w interakcje i wizualnie atrakcyjnych interfejsów użytkownika.
Pamiętaj, że formatowanie tekstu to tylko jedna z wielu umiejętności potrzebnych do tworzenia dobrze zaprojektowanych stron internetowych. Eksperymentuj z różnymi znacznikami i stylami, aby znaleźć najlepsze rozwiązania dla swoich projektów.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.