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>

Wizualne znaczniki

Znaczniki

<b>

i

<i>

również tworzą pogrubienie i kursywę, ale nie niosą znaczenia semantycznego. Używaj ich, gdy chcesz zmienić wygląd tekstu bez podkreślania jego wagi:

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

Podkreślenie i przekreślenie

Znacznik

<u>

podkreśla tekst — przydatny np. do zaznaczenia nazw własnych:

1<p>Odwiedź świątynię <u>Karnak</u> w Luksorze.</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>Piramida ma powierzchnię 230m<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 semantycznymi (

<strong>

,

<em>

) a wizualnymi (

<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 (semantyczne / wizualne)

• <em>

  /

  <i>

  — kursywa (semantyczna / wizualna)

• <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