Formatowanie tekstu w HTML

Wyobraź sobie, że jesteś skrybą w Starożytnym Egipcie. Na papirusie nie piszesz wszystkiego jednakowo - ważne dekrety faraona wyróżniasz większymi hieroglifami, imiona bogów pochylasz z szacunkiem, a fragmenty zakazane przekreślasz. W HTML masz dokładnie takie same możliwości! Mohamed mówi: "Tekst bez formatowania to jak piramida bez ozdób - funkcjonalna, ale pozbawiona duszy."

Pogrubienie i kursywa - wyróżnianie tekstu

Najczęściej używane znaczniki formatowania to te, które nadają tekstowi wagę lub nacisk:

Semantyczne znaczniki (zalecane)

Znacznik <strong> oznacza tekst szczególnie ważny - przeglądarka wyświetla go pogrubieniem, ale co ważniejsze, czytniki ekranowe (screen readery) podkreślają jego wagę głosem:

1<p>Uwaga! <strong>Piramida Cheopsa</strong> to jedyny zachowany cud świata.</p>

Znacznik <em> oznacza tekst z naciskiem (emphasis) - wyświetlany jest kursywą i czytany z odpowiednią intonacją:

1<p>Mohamed szepnął: <em>Nigdy nie dotykaj skarbu faraona!</em></p>

Znaczniki <b> i <i>

Znaczniki <b> i <i> też tworzą pogrubienie i kursywę, ale nie dodają ważności ani nacisku. Sam wygląd tekstu zmienia się w CSS, a te znaczniki mają własne zadania: <b> przyciąga uwagę do słowa, np. nazwy w opisie, a <i> oznacza tekst wyodrębniony z reszty, np. obcojęzyczną nazwę:

1<p><b>Nazwa techniczna:</b> <i>Khufu</i> to oryginalne imię Cheopsa.</p>

Podkreślenie i przekreślenie

Znacznik <u> podkreśla tekst, ale ma wąskie zastosowanie, np. oznaczanie błędów pisowni. Podkreślenie łatwo pomylić z linkiem, dlatego na stronach używa się go rzadko:

1<p>Skryba zapisał <u>piramyda</u> zamiast „piramida”.</p>

Znacznik <s> przekreśla tekst - świetny do pokazania nieaktualnych informacji, jak skryba skreślający błąd na papirusie:

1<p>Wejście do piramidy: <s>50 złotych monet</s> darmowe!</p>

Zaznaczanie, indeks górny i dolny

Znacznik <mark> wyróżnia tekst żółtym tłem, jak zakreślacz na papirusie:

1<p>Najważniejsza zasada: <mark>zawsze zamykaj znaczniki HTML</mark>!</p>

Znaczniki <sup> (superscript - indeks górny) i <sub> (subscript - indeks dolny) przydają się w formułach i datach:

1<p>Bok podstawy piramidy ma 230 m, a jej powierzchnia to około 53 000 m<sup>2</sup></p>
2<p>Wzór chemiczny wody: H<sub>2</sub>O</p>

Łamanie linii i linie poziome

Czasem potrzebujesz złamać linię bez tworzenia nowego paragrafu. Znacznik <br> (break) robi dokładnie to - jest to znacznik samozamykający, nie potrzebuje zamknięcia:

1<p>Mohamed<br>Przewodnik po Egipcie<br>Kair, Egipt</p>

Znacznik <hr> (horizontal rule) tworzy poziomą linię oddzielającą sekcje - jak granica między rozdziałami na papirusie. Też jest samozamykający:

1<h2>Rozdział 1: Piramidy</h2>
2<p>Treść o piramidach...</p>
3<hr>
4<h2>Rozdział 2: Sfinks</h2>
5<p>Treść o Sfinksie...</p>

Cytaty i tekst preformatowany

Cytat blokowy

Znacznik <blockquote> służy do oznaczania cytatów - jak królewskie dekrety wyryte na kamiennych tablicach. Przeglądarka automatycznie dodaje wcięcie:

1<blockquote>
2  <p>Mądrość jest jak Nil - im głębiej spojrzysz, tym więcej skarbów znajdziesz.</p>
3</blockquote>

Tekst preformatowany i kod

Znacznik <pre> (preformatted) zachowuje dokładne formatowanie tekstu - wszystkie spacje, tabulatory i nowe linie. Idealny do wyświetlania kodu lub tabelek tekstowych:

1<pre>
2Piramida Cheopsa:
3  Wysokość:  146 metrów
4  Podstawa:  230 metrów
5  Wiek:      4500 lat
6</pre>

Znacznik <code> oznacza fragment kodu w tekście. Przeglądarka wyświetla go czcionką o stałej szerokości (monospace):

1<p>Aby stworzyć nagłówek, użyj znacznika <code>&lt;h1&gt;</code>.</p>

Często łączymy <pre> z <code> dla bloków kodu:

1<pre><code>&lt;h1&gt;Witaj w Egipcie!&lt;/h1&gt;
2&lt;p&gt;Jestem Mohamed.&lt;/p&gt;</code></pre>

Komentarze HTML

Komentarze to ukryte notatki w kodzie, które nie są wyświetlane na stronie. To jak sekretne wiadomości, które skryba zostawiał na marginesie papirusu - widoczne tylko dla innych skrybów:

1<!-- To jest komentarz - przeglądarka go zignoruje -->
2<h1>Witaj w Egipcie!</h1>
3
4<!-- TODO: dodać opis piramid -->
5<p>Tu będzie treść o piramidach.</p>
6
7<!--
8  Komentarz wieloliniowy:
9  Ten fragment jest w trakcie przygotowywania.
10  Wrócimy do niego później.
11-->

Komentarze zaczynają się od <!-- i kończą na -->. Są niezwykle przydatne do:

• Opisywania kodu - wyjaśnianie, co robi dany fragment
• Tymczasowego wyłączania - "ukrywanie" fragmentów HTML bez ich usuwania
• Organizacji - oznaczanie sekcji w dłuższych dokumentach

Podsumowanie

Mohamed podsumowuje: "Formatowanie tekstu w HTML to jak sztuka pisania hieroglifów - każdy znacznik ma swoje przeznaczenie i nadaje tekstowi odpowiednią formę. Pamiętaj o różnicy między znacznikami oznaczającymi ważność i nacisk (<strong>, <em>) a tylko wyróżniającymi (<b>, <i>). Używaj komentarzy, by zostawiać wskazówki dla przyszłych skrybów - w tym dla siebie!"

Oto najważniejsze znaczniki formatowania:

• <strong> / <b> - pogrubienie (ważność / zwrócenie uwagi)
• <em> / <i> - kursywa (nacisk / tekst wyodrębniony)
• <u> - podkreślenie, <s> - przekreślenie
• <mark> - wyróżnienie, <sup> / <sub> - indeksy
• <br> - łamanie linii, <hr> - linia pozioma
• <blockquote> - cytat, <pre> - tekst preformatowany
• <code> - fragment kodu
• <!-- --> - komentarz HTML

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Formatowanie tekstu</title>
6</head>
7<body>
8    <h1>Formatowanie tekstu w HTML</h1>
9
10    <p>Tekst <strong>pogrubiony</strong> i <em>pochylony</em>.</p>
11    <p>Tekst <mark>zaznaczony</mark> i <s>przekreślony</s>.</p>
12    <p>Wzór: H<sub>2</sub>O i E = mc<sup>2</sup></p>
13
14    <hr>
15
16    <blockquote>
17        "Wiedza jest jak Nil - im więcej jej pijesz, tym bardziej pragniesz." - Mohamed
18    </blockquote>
19
20    <p>Fragment kodu: <code>&lt;h1&gt;</code></p>
21
22    <pre>
23To jest    tekst
24    z zachowanym
25        formatowaniem
26    </pre>
27
28    <!-- To jest komentarz HTML - niewidoczny na stronie -->
29</body>
30</html>