Spis treści Skorowidz Poziom główny Poziom nadrzędny Wstecz Dalej Zadania ©

Formatowanie dokumentów w języku HTML

Znaczniki w dokumencie: łagodne wprowadzenie

Omówione w tym rozdziale reguły znakowania wywodzą się z formalizmów opracowanych w II połowie XX wieku. Początki języka SGML (Standard Generalized Markup Language, czyli Standardowy Uogólniony Język Znakowania) sięgają lat 60–tych XX wieku, a ostateczna postać pochodzi z roku 1986. Obecnie korzysta się z jego uproszczonej wersji o nazwie XML (Extensible Markup Language, Rozszerzalny Język Znakowania) z 1996 r.

Pierwsza część rozdziału ma charakter ogólny i nie wskazuje żadnego konkretnego obszaru zastosowań technik znakowania. Jest to uzasadnione, gdyż sam XML nie wskazuje takiego obszaru, a wielość zastosowań we współczesnym świecie skłania do zapoznania się z jego zasadami.

Kolejne podrozdziały będą się odwoływać do języków opisu dokumentów, ze szczególnym uwzględnieniem najprostszego, a zarazem najszerzej znanego spośród nich, noszącego nazwę XHTML. Mimo to wiele uwag ma charakter ogólny i odnosi się równie dobrze do tworzenia dokumentów źródłowych w innych językach znakowania, np. DocBook lub , a także za pośrednictwem oprogramowania użytkowego.

Elementy i znaczniki

Element formatowania służy do nadania tekstowi właściwości, która nie wynika sama z zapisu znakowego. Może się ona wiązać ze znaczeniem, strukturą, wyglądem albo czymś jeszcze innym. Umówmy się, że obszar obowiązywania elementu będziemy rozpoczynać znacznikiem zawierającym nazwę elementu w nawiasach trójkątnych (znaki nierówności), a zamykać podobnym znacznikiem, ale z kreską ukośną przed nazwą elementu. Jest rzeczą pożądaną, by nazwa elementu była w jakiś sposób związana z definiowaną przezeń właściwością.

<element>W obszarze między znacznikami działa element formatowania, 
nadając tekstowi pewną właściwość</element>, a tu już nie.

Na przykład element p języka HTML wymusza sformatowanie obszaru w akapit. Zawartość całego akapitu umieszczamy więc między znacznikami <p> i </p>, tak jak w poniższym przykładzie.

  +- zawartość akapitu ------------------------+
<p>Koń jaki jest, każdy widzi (B. Chmielowski).</p>

Para odpowiadających sobie znaczników stanowi rodzaj „nawiasów” wyznaczających zakres operacji formatowania dokonywanej na tekście. Dlatego elementy znakowania można zagnieżdżać w sobie, tak jak to widać niżej:

  +- zawartość akapitu -------------------------------+
  |  +- cytat ------------------+                     |
<p><q>Koń jaki jest, każdy widzi</q> (B. Chmielowski).</p>

(w obszarze akapitu oznaczonego elementem p znajduje się cytat, oznaczony elementem q). Natomiast przeplatanie znaczników:

     +- zawartość akapitu ----------------------------+
  +--|- cytat ------------------+                     |
<q><p>Koń jaki jest, każdy widzi</q> (B. Chmielowski).</p>

jest zawsze niepoprawne, podobnie jak bezsensowne jest wyrażenie algebraiczne (x + [yz) + u].

Elementy bez zakresu

Niektóre elementy — jak końce wiersza, obrazy, linie oddzielające — z zasady nie obejmują żadnego zakresu. Czasem zachodzi potrzeba wstawienia innego elementu o pustym zakresie (np. pustej komórki lub pustego wiersza tabeli). Znacznik takiego elementu powinien mieć postać <element />; znacznik zamykający jest wtedy niepotrzebny.

Elementy i atrybuty elementów

Znacznik otwierający może zawierać dodatkowe informacje na temat sposobu zastosowania elementu. Są to tzw. atrybuty elementu. Na przykład element języka HTML o nazwie blockquote służy oznaczania obszernych cytatów. Znacznik otwierający elementu blockquote

<blockquote>

będzie zawsze oznaczał rozpoczęcie nowego cytatu blokowego. Atrybut cite, którego użycie w znaczniku otwierającym może mieć postać

<blockquote cite="opis-źródła-cytatu">

służy do udokumentowania źródła pochodzenia cytowanego tekstu. W obu przypadkach znacznik zamykający powinien mieć postać

</blockquote>

bez żadnych dodatkowych atrybutów.

Atrybuty mogą istotnie wpływać na zawartość dokumentu. Na przykład element języka HTML o nazwie img służy osadzania w dokumencie obiektów graficznych. Znacznik elementu img powinien mieć postać

<img src="nazwa" alt="tekst" />

gdzie nazwa jest nazwą pliku z obrazem.

Wartości atrybutów piszemy zawsze w cudzysłowach technicznych (tych z zestawu ASCII).

Każdy element ma spis atrybutów, których wolno używać w jego znacznikach. Wszystkie atrybuty nie ujęte w takim spisie są nielegalne w odniesieniu do danego elementu.

Element główny

Wymogiem XML jest, by cała zawartość dokumentu była umieszczona wewnątrz pojedynczego elementu zwanego elementem głównym.

Na przykład cała zawartość każdego dokumentu HTML musi być objęta znacznikami elementu głównego o nazwie html. Tak więc prawidłowy dokument musi mieć ogólną postać

<html>
zawartość dokumentu
</html>

gdzie przez zawartość dokumentu rozumie się cały tekst wraz z opisującymi go znacznikami (oczywiście oprócz znaczników elementu głównego).

Jednostki znakowe

Czasem trzeba napisać w tekście znak „<” lub „>”. Nie możemy napisać ich wprost: nasz zecer mógłby „pomyśleć”, że nie są to znaki nierówności, tylko nawiasy znaczników. Robimy więc tak: piszemy

&lt;

chcąc uzyskać znak „<”, zaś

&gt;

kiedy mamy zamiar umieścić w dokumencie znak „>”. Tym samym zamiast wskazywać znak, używamy jego nazwy zrozumiałej dla zecera, którym może być człowiek lub maszyna. (Nazwa lt jest skrótem od less than, czyli „mniejszy niż”; nazwa gt jest skrótem od greater than).

Okaże się, że ciągi znaków postaci &nazwa; mogą generować także wiele innych pożytecznych znaków. W zasadzie można tym sposobem wygenerować każdy znak UNICODE, także te, których nie ma bezpośrednio na klawiaturach ani nawet w kodzie informacyjnym, którego używamy do przechowywania pliku źródłowego. Ciągi takie będziemy nazywać jednostkami (entities).

Niestety, czasem trzeba napisać także znak „&” (tzw. etka, a po angielsku ampersand), który — jak widać — pełni rolę znaku sterującego „rozpoczynam nazwę jednostki”. Robimy to tak:

&amp;

Proste, prawda? A jeżeli nie proste, to przynajmniej logiczne.

Do czego służy HTML i jak go używać

Język HTML (Hypertext Markup Language) nadaje tekstowi dokumentu strukturę i określa sposób jego przedstawiania. Podstawowe elementy HTML odnoszą się do podziału dokumentu na części, wyróżnienia w dokumencie bloków tekstu, wyliczeń i tabel, nadania dokumentowi właściwości hipertekstowych, osadzenia w nim ilustracji, ustalenia sposobu prezentacji tekstu. Te funkcje języka będą omówione najpierw za pomocą przykładów, a na końcu tego opracowania także w bezpośrednim opisie. Inne elementy HTML, mające za zadanie zarządzanie oknami przeglądarek internetowych oraz umożliwienie użytkownikom sieci tworzenie informacji zwrotnej i przesyłanie jej do serwera, nie stanowią obszaru naszego zainteresowania.

Zadaniem HTML jest określenie pewnych ogólnych właściwości tekstu. Nie można natomiast za jego pomocą precyzyjnie opisać wyglądu dokumentu. Nie ma nic dziwnego ani złego w tym, że ten sam dokument przedstawiany przez różne programy formatujące (przeglądarki) przybiera nieco inny wygląd. Nawet więcej: nie jest wcale powiedziane, że dokument ma być przedstawiany środkami wizualnymi (tj. że będzie przeznaczony do oglądania); nietrudno sobie wyobrazić, że dokument można odsłuchać, lub że pewien automat przeszukuje dokumenty w poszukiwaniu określonej zawartości (spisów literatury? nazwisk autorów? adresów?).

Od pierwszych chwil swojego istnienia, datowanych na 1992 rok, język HTML jest żywym tworem podlegającym ciągłej ewolucji. Normatywne definicje jego kolejnych wersji, sformułowane za pomocą języków SGML oraz XML, są sygnowane przez zespół roboczy Konsorcjum WWW (W3C). Dokumenty te stanowią ostateczną instancję przesądzającą o legalności lub nielegalności sposobu użycia elementów znakowania.

Wersja o nazwie XHTML 1.1 jest opatrzona datą z maja 2001 roku. W pierwszych latach XXI wieku opracowywano wersję o nazwie XHTML 2.0, która pod wieloma względami znacznie odbiegała od wersji poprzednich. Jej rozwój zarzucono w roku 2009. Od roku 2006 opracowywana jest wersja zwana HTML 5. W przeciwieństwie do XHTML 2.0 stanowi ona kontynuację poprzednich wersji języka.

Wczesne definicje języka HTML stwierdzały, że nie jest istotne, czy nazwy elementów są pisane małymi, czy wielkimi literami (czyli nazwy table, Table, TABLE oraz TablE oznaczały ten sam element). Jednak najnowsze sformułowania definicji języka HTML (zwane XHTML) są wyrażone w metajęzyku XML, który rozróżnia małe i wielkie litery w nazwach elementów. Zgodnie z tą standaryzacją, nazwy wszystkich elementów XHTML należy pisać małymi literami.

Wielkość liter jest też istotna w nazwach jednostek znakowych, (np. &delta; to „δ”, a &Delta; to „Δ”) oraz w wartościach niektórych atrybutów, zwłaszcza związanych ze znacznikami wyliczeń.

Wczesne definicje języka HTML dopuszczały pomijanie znaczników zamykających niektórych elementów (np. znacznika zamknięcia akapitu </p> lub pozycji wyliczenia </li>). Jednak w żadnym języku zdefiniowanym za pomocą metajęzyka XML takie pominięcie nie jest dopuszczalne. Dlatego chcąc pozostać w zgodzie z aktualnym sformułowaniem składni XHTML powinniśmy pilnować, by każdemu użytemu w dokumencie znacznikowi otwierającemu odpowiadał właściwy znacznik zamykający (lub by zamykać znaczniki nie obejmujące żadnego zakresu).

Znakowanie logiczne i fizyczne

Przyjrzymy się teraz kilku wstępnym przykładom użycia znaczników podczas formatowania tekstu. Gorąco zachęcam do ich obejrzenia za pomocą jak największej liczby przeglądarek pochodzących od różnych producentów. Proszę zwrócić uwagę na nazwy elementów znakowania: z jakim przeznaczeniem się kojarzą? do wyróżniania jakich funkcji i właściwości tekstu skłaniają? Jakich środków wyrazu dla znaczników wykorzystanych w tych przykładach jest w stanie użyć: przeglądarka internetowa pracująca w środowisku graficznym, program wyświetlający teksty na terminalu znakowym, syntezator głosu, osoba–lektor; osoba–grafik, osoba–zecer. Które ze znaczników będą uniwersalne, a które są przeznaczone tylko dla szczególnych odbiorców? Które trzeba będzie zastąpić innymi, jeżeli pewnego dnia zechcemy inaczej przedstawić efekty naszej pracy?

Jako przykład rozpatrzymy następujący krótki tekst:

Koń jaki jest, każdy widzi (Benedykt Chmielowski:
Nowe Ateny albo Akademia wszelkiej sciencyi pełna,
Lwów 1745–46).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Brak znaczników powoduje, że nie ma żadnej informacji o sposobie przedstawienia tekstu. Jest on więc sformatowany domyślnie: tak, jakby był zwykłym zdaniem w akapicie.

Znakowanie logiczne po raz pierwszy

Chwila refleksji nad zawartością naszego przykładu prowadzi do następującego spostrzeżenia: tekst zawiera cytat z pewnego dzieła, którego autor, tytuł i rok wydania zostały podane dalej. Wchodząc głębiej, można jeszcze zauważyć, że cytowane zdanie jest encyklopedycznym objaśnieniem pewnego terminu.

Odwzorowanie tej informacji za pomocą znaczników doprowadzi do następującej interpretacji:

<cytat><termin>Koń</termin> <objaśnienie>jaki jest, każdy widzi</objaśnienie></cytat> 
(<autor>Benedykt Chmielowski</autor>: 
<zródło>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</zródło>,
<wydanie>Lwów 1745–46</wydanie>).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Nazwy elementów znakowania ustalono dowolnie, tym niemniej oddają one istotę rzeczy. Zecer, z którym współpracujemy, nie rozumie dyrektyw wyrażonych za pomocą dowolnie przyjętego zestawu pojęć. Dlatego skutek jest taki, jaki jest (czyli żaden).

Tę samą strukturę tekstu możemy opisać również w konwencji narzuconej przez język HTML.

<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>:
<cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>,
<span class="wydanie">Lwów 1745–46</span>).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Nasz zecer rozumie podane w ten sposób instrukcje i formatuje tekst zgodnie ze swoją (najlepszą?) wiedzą o tym, jak ma wyglądać cytat, objaśniany termin, czy też tytuł źródła bibliograficznego.

Znakowanie fizyczne, czyli pułapka

Można się zastanawiać, czy zwyczaje naszego zecera nam odpowiadają. Być może chcielibyśmy wymusić na nim inny sposób prezentacji tekstu.

Moglibyśmy sami zastanowić się nad pożądanym (w danej chwili!) sposobem zaprezentowania powyższego przykładu. Jesteśmy w stanie podjąć np. następujące ustalenia: termin opisywany w haśle należy pisać kursywą, dla cytatu jako całości zastosować pismo bezszeryfowe, a tytuły dzieł źródłowych pisać także kursywą.

Ustalenia te da się wyrazić za pomocą znaczników:

<font face="sans-serif"><i>Koń</i> jaki jest, każdy widzi</font> (Benedykt Chmielowski:
<i>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</i>,
Lwów 1745–46).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Zecer nas co prawda zrozumiał, ale stała się rzecz niedobra: znakowanie nie oddaje już budowy naszego fragmentu tekstu! Co gorsza, dwie zupełnie różne sprawy: treść hasła i tytuł źródła, zostały oznakowane w dokładnie taki sam sposób. Nic nie szkodzi, że w danej chwili na wydruku wyglądają tak samo; gorzej, że dokument nie zawiera żadnej informacji pozwalającej rozstrzygnąć, czy w danym przypadku chodzi o hasło, czy o tytuł, czy może o coś jeszcze innego. Analizując układ znaczników nigdy nie znajdziemy sposobu, żeby je rozróżnić.

Zupełnie inna, choć równie sensowna, decyzja redakcyjna: termin opisywany w haśle piszemy wielkimi literami, pismem pogrubionym i w kolorze, tytuł dzieła piszemy prostym pismem bezszeryfowym, nazwisko autora piszemy kapitalikami, wymaga więc powtórnego znakowania, przy czym zmienią się nie tylko nazwy znaczników, ale także ich układ.

<font style="text-transform: uppercase"><font color="#000080"><b>Koń</b></font></font> 
jaki jest, każdy widzi (<span style="font-variant: small-caps">Benedykt Chmielowski</span>:
<font face="sans-serif">Nowe Ateny albo Akademia wszelkiej sciencyi pełna</font>,
Lwów 1745–46).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

To znaczy, że decydując się na znakowanie fizycznych cech wydruku wpadliśmy w pułapkę. Zobaczmy, jak jej uniknąć pozostając przy znakowaniu samej struktury.

Znakowanie logiczne po raz drugi

Zdecydujmy się, które elementy budowy tekstu są dla nas istotne i oznaczmy je za pomocą znaczników.

<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>:
<cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>,
<span class="wydanie">Lwów 1745–46</span>).

W razie konieczności, zamiast zmieniać układ znaczników, będziemy raczej dążyć do zmiany przyzwyczajeń zecera. Wariant pierwszy:

<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>:
<cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>,
<span class="wydanie">Lwów 1745–46</span>).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Wariant drugi:

<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>:
<cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>,
<span class="wydanie">Lwów 1745–46</span>).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Wariant trzeci:

<q><dfn>Koń</dfn> jaki jest, każdy widzi</q> (<span class="autor">Benedykt Chmielowski</span>:
<cite>Nowe Ateny albo Akademia wszelkiej sciencyi pełna</cite>,
<span class="wydanie">Lwów 1745–46</span>).

Koń jaki jest, każdy widzi (Benedykt Chmielowski: Nowe Ateny albo Akademia wszelkiej sciencyi pełna, Lwów 1745–46).

Jak widać, udało się. Zauważmy, że za każdym razem przykładowy tekst ma nie tylko tę samą treść, lecz również ten sam układ znaczników. Dobrze zaprojektowany pod względem logicznym dokument może przybrać dowolną spośród sensownych postaci ustalonych przez redaktora, bez jakiejkolwiek ingerencji w jego treść.

To jest właśnie istota znakowania logicznego. Skłonienie zecera do zrealizowania naszej wizji estetycznej jest co prawda ważne, ale stanowi zupełnie odrębne zadanie, do którego tekst dokumentu w ogóle nie jest potrzebny. Więcej: nie jest potrzebny do tego autor tekstu, tylko jego redaktor. Skupimy się teraz na technice opisywania budowy dokumentu, sprawy prezentacyjne zostawiając (redaktorowi) na później.

Zasady znakowania: podsumowanie

Języki: SGML i XML określają ogólne zasady znakowania, pozwalające opisywać obszary obowiązywania elementów i ich atrybutów za pomocą znaczników otwierających i zamykających. Chociaż same nie narzucają żadnych gotowych elementów ani atrybutów, to umożliwiają ich definiowanie za pomocą tzw. definicji typu dokumentu DTD (stosowanych w SGML i w XML) oraz XML-Schema (stosowanych w XML). Każda taka specyfikacja definiuje pewien szczególny zestaw elementów znakowania, określa wszystkie atrybuty dozwolone do umieszczenia w ich znacznikach i ustala zasady ich poprawnego użycia, a także ich zamierzone przeznaczenie. W ten sposób powstaje pewien szczególny język znakowania, przeznaczony do określonego celu. Jednym takich języków — jednym z najprostszych, a dla nas najważniejszym — jest HTML.

Reguły języka XML, obejmujące: nadawanie tekstowi właściwości opisanych przez elementy, wyznaczanie obszarów obowiązywania elementów za pomocą par znaczników, ujmowanie wartości atrybutów w cudzysłowy techniczne, ujęcie całego dokumentu w jeden element główny — można porównać do ogólnych reguł ruchu drogowego. Znajomość poszczególnych elementów języka HTML i celu ich stosowania można porównać do znajomości planu miasta. W tej analogii rolę pojazdów będzie pełnić używane przez nas oprogramowanie: edytory i przeglądarki. Po danym mieście, w zgodzie z zasadami ruchu drogowego, można poruszać się pojazdami wielu typów i marek.

W krótkiej, lecz burzliwej historii standaryzacji języka HTML można zauważyć tendencję do wiązania znakowania ze strukturą dokumentu i unikania bezpośredniego opisu wyglądu sformatowanego tekstu. W myśl tych założeń, znaczniki odnoszące się wprost do wyglądu (np. przez jawne określanie cech pisma znacznikiem font, podkreślanie za pomocą znacznika u itp.) oraz atrybuty znaczników odnoszące się bezpośrednio do wyglądu (np. atrybut wyrównywania bloku tekstu align) winny być stopniowo wypierane przez konstrukcje, których elementy i atrybuty odnoszą się do warstwy logicznej, a za wygląd odpowiada styl. Elementy i atrybuty przestarzałego rodzaju, nawet jeżeli funkcjonują jeszcze w definicji języka i są powszechnie używane przez autorów, zostały już skazane na wymarcie. W bieżącym opracowaniu będę się starał wyrobić (a przynajmniej stymulować) u Czytelnika nawyk myślenia o dokumencie w kategoriach zgodnych z duchem znakowania logicznego.

Teoria a praktyka znakowania

Przeglądarki HTML zwykle reagują wyrozumiale na błędy znakowania w pliku źródłowym. Zachowanie takie jest zgodne z zamiarem projektantów oprogramowania i ma na celu umożliwienie korzystania nawet z tych dokumentów, w których znaczniki rozmieszczono nie całkiem poprawnie.

Na przykład w większości przypadków element, którego nazwa nie jest zdefiniowana w standardzie HTML, zostanie po prostu zignorowany. Jednak niektóre przeglądarki rozumieją pewne dodatkowe znaczniki, nie należące oficjalnie do języka; znaczników takich będziemy unikać. Zajmujemy się bowiem tworzeniem dokumentów „w języku” i „zgodnie ze standardem”, a nie „dla programu”.

Jeżeli z konstrukcji dokumentu wynika jednoznacznie, że w danym miejscu powinien wystąpić znacznik zamykający, to przeglądarki na ogół pogodzą się z jego brakiem: na przykład rozpoczęcie akapitu na ogół będzie rozumiane jako zakończenie akapitu poprzedniego. Jednak nie oznacza to, że brak znacznika jest poprawny. Wygląd sformatowanego tekstu w danym przypadku nie może być argumentem przesądzającym, że znacznik zamykający jest zbędny. W szczególności jakiś inny program może zareagować na błąd, na przykład odmawiając przetwarzania dalszej części dokumentu lub przetwarzając ją w sposób nieoczekiwany dla użytkownika.

Wiele współczesnych — a zwłaszcza starszych — programów ignoruje wielkość liter w nazwach elementów HTML. Działają one na mocy starszych definicji języka. Jeżeli jednak np. znacznik początku akapitu ma w jednym miejscu postać <p>, a w innym <P>, i podobnie jest ze znacznikami zamykającymi, to należy spodziewać się kłopotów z unifikacją wyglądu elementów (w tym przypadku akapitów) przez zarządzanie stylami.

Zgodność układu znaczników w dokumencie z oficjalnym standardem (X)HTML da się sprawdzić automatycznie. Test poprawności, zwany też walidacją, oferują niektóre programy użytkowe. Wysokiej klasy walidator dostępny jest w serwisie Konsorcjum WWW.

Przykłady konstrukcji XHTML

W niniejszym podrozdziale przedstawiamy kilka przykładów poprawnego zastosowania znaczników HTML do opisu budowy dokumentu. Przykłady są uszeregowane według wzrastającego stopnia złożoności i wzrastającej liczby zastosowanych środków formatowania. Jeżeli naprawdę chcesz zrozumieć zasady znakowania, to radzę oglądać je — tak jak i wszystkie następne analizowane dokumenty — równocześnie w postaci sformatowanej i źródłowej. Nie obejdzie się też bez własnych eksperymentów. Zalecam korzystanie z wielu różnych programów formatujących (przeglądarek) pochodzących od różnych producentów.

Efekty formatowania i znaki typograficzne w różnych środowiskach

Poniższa tabela zestawia wybrane elementy struktury tekstu i sposoby ich uzyskania w kilku środowiskach. Inaczej formatujemy tekst znakowy ASCII, inaczej robimy to mając pełny repertuar symboli UNICODE. Jeszcze inaczej redagujemy znakowe pliki źródłowe dokumentów XHTML albo -a. Inaczej wreszcie posługujemy się środowiskami wizualnymi, w których tylko pośrednio mamy do czynienia z generowaniem plików dokumentu. Sposoby wykonywania poszczególnych operacji edycyjnych oraz uzyskiwania znaków interpunkcyjnych i typograficznych są różne w różnych programach użytkowych, a nawet w kolejnych wersjach tych samych programów. Szczegółowych informacji można szukać w dokumentacji oprogramowania oraz w poświęconych mu książkach (w których często co drugie zdanie rozpoczyna się słowem Aby). Nie znajdziemy w nich jednak na ogół informacji o zasadach poprawnego projektowania dokumentu.

Efekt formatowania ASCII ISO-Latin-2 UNICODE XHTML a Środowiska
wizualne
Nagłówek rozdziału (brak)(brak) <h1>tytuł</h1>
<h2>tytuł</h2>

<h6>tytuł</h6>
\chapter{tytuł}
\section{tytuł}
\subsection{tytuł}
i inne
(standardowe style blokowe nagłówków)
Początek akapitu (brak) (brak) <p> (brak) (brak)
Wcięcie wiersza na początku akapitu (spacje lub znak tabulacji) (spacje lub znak tabulacji) (zastosowanie stylu) (wynika ze stylu) (atrybut akapitu
lub styl)
Koniec akapitu (pusty wiersz) (pusty wiersz) </p> (pusty wiersz) lub \par Enter
Koniec wiersza #10 lub #13#10 #10 lub #13#10 (automat) (automat) (automat)
Wymuszony koniec wiersza #10 lub #13#10 #10 lub #13#10 <br /> \\ lub \newline lub \linebreak Shift+Enter
Spacja #32 #32 dowolna liczba spacji #32
lub końców wiersza #10 albo #13#10
dowolna liczba spacji #32 Spacja
Spacja wymuszona #32 #32 &nbsp; ~ lub \ (po ukośniku jest spacja) Spacja
Spacja z zakazem końca wiersza #32 #32 &nbsp; ~ Shift+Spacja lub
Ctrl+Spacja
Koniec strony (brak) (brak) (brak lub zastosowanie stylu) (automat) (automat)
Wymuszony koniec strony #12 #12 (brak) \pagebreak lub \newpage lub \clearpage (wstaw z menu)
Zakaz końca strony (brak) (brak) (brak lub zastosowanie stylu) \nopagebreak (wstaw z menu)
Wyróżnienie znaczenia tekstu (brak) (brak) <em>tekst</em> (widzisz tekst)
<strong>tekst</strong> (widzisz tekst)
<code>tekst</code> (widzisz tekst)
i inne
\emph{tekst} i inne (zastosowanie stylu znakowego)
Atrybuty pisma (brak) (brak) <b>tekst</b> (widzisz tekst)
<i>tekst</i> (widzisz tekst)
<tt>tekst</tt> (widzisz tekst)
i inne
\bf \rm \it \sl \sf \sc \tt i inne (sterowane z menu
lub listy atrybutów)
Indeks górny (brak) (brak) tekst<sup>indeks</sup>
(widzisz tekstindeks)
^{tekst} (w równaniach) lub \textsuperscript{tekst} (sterowane z menu
lub listy atrybutów)
Indeks dolny (brak) (brak) tekst<sub>indeks</sub>
(widzisz tekstindeks)
_{tekst} (w równaniach) lub \textsubscript{tekst} (sterowane z menu
lub listy atrybutów)
Logiczne sterowanie wielkością znaków (brak) (brak) <big>tekst</big> (widzisz tekst)
<small>tekst</small> (widzisz tekst)
\Huge \huge \LARGE \Large \large \normalsize \small \scriptsize \footnotesize \tiny (właściwości pisma w deklaracji stylu)
Określenie kroju pisma (brak) (brak) (definicja stylu) (sterowane z menu)
Określenie absolutnej wielkości znaków (brak) (brak) (definicja stylu) (definicja stylu) (sterowane z menu)
Cudzysłów podwójny "tekst"
lub ,,tekst''
(brak)b &bdquo;tekst&rdquo; (widzisz „tekst”) dwuznaki ,,tekst'' (widzisz „tekst”) (znaki cudzysłowów z listy)
Cudzysłów kątowy >>tekst<< (brak)b &raquo;tekst&laquo; (widzisz »tekst«)c dwuznaki >>tekst<< (widzisz »tekst«) (znaki cudzysłowów z listy)
Łącznik - (znak ASCII) - (znak ASCII) - (znak ASCII) - (znak ASCII) - (znak ASCII)
Pozwolenie na łącznik przy podziale wyrazu (brak) (brak) &shy; (automatyczne dzielenie wyrazów), \dywiz (automatyczne dzielenie wyrazów)
Półpauza -- (brak)b &ndash; (widzisz „–”) -- lub \textendash lub \ppauza (znak z listy)
Pauza --- (brak)b &mdash; (widzisz „—”) --- lub \textemdash lub \pauza (znak z listy)
Wielokropek ... (brak)b &hellip; (widzisz „…”) \ldots (znak z listy)
Uwagi
  1. Mimo że niniejszy zbiór materiałów nie obejmuje nawet podstawowego kursu -a, gorąco zachęcamy do zapoznania się z tym potężnym systemem. Informacje zamieszczone w tabeli mają charakter orientacyjny i nie wystarczą do samodzielnej nauki. Polecenia podane w kilku wariantach na ogół nie są równoważne, tylko zbliżone pod względem sensu.
  2. Niektóre kodowania i zarejestrowane zestawy znaków inne, niż ISO-8859-2, mogą zawierać wymienione symbole. Większość z nich jest obecna np. w zestawie znaków strony kodowej Windows-1250. Strona kodowa IBM-912 jest zgodna z ISO-8859-2, lecz zawiera także dodatkowe znaki pod numerami niewykorzystanymi w standardzie ISO. Są wśród nich również wszystkie wymienione w tabeli znaki typograficzne. Wobec rozpowszechnienia standardu UNICODE szczegółowa znajomość stron kodowych staje się coraz mniej przydatna.
  3. To nie pomyłka, mimo że znak „«” nosi w UNICODE nazwę lewego cudzysłowu kątowego, a znak „»” to prawy cudzysłów kątowy. W typografii można się spotkać z «francuską» lub »niemiecką« tradycją stosowania cudzysłowów kątowych. Nazwy UNICODE wywodzą się z tradycji «francuskiej»; w Polsce dominuje tradycja »niemiecka«.
  4. Nie wszystkie przeglądarki obsługują wszystkie znaki UNICODE. Efekt może zależeć od zestawu fontów dostępnych w systemie.
  5. Wstawianie egzotycznych znaków lub nazw wprost do dokumentu jest niewygodne, niezależnie od tego, czy piszemy bezpośrednio tekst źródłowy ASCII (trzeba pisać długie nazwy jednostek znakowych lub pamętać numery znaków), czy korzystamy z edytora wizualnego lub edytora znakowego UNICODE (trzeba otworzyć jakieś menu i wybrać wstaw/znak/numer/ok albo coś podobnego). Proponuję w kopii roboczej umieszczać -- zamiast półpauzy, --- zamiast pauzy oraz ,, (dwa przecinki) i '' (dwa apostrofy) zamiast cudzysłowów. Te znaki zawsze łatwo wprowadzić z klawiatury. Po zakończeniu pisaniny, kiedy dokument jest gotowy, zamieniamy odpowiednie ciągi znaków: --- na to, co u nas jest pauzą, -- na to, co jest półpauzą (pamiętajmy o kolejności! „--” jest częścią składową „---”) i podobnie ,, na cudzysłów otwierający, a '' na cudzysłów zamykający. Sposób ten sprawdza się w praktyce i nie zniechęca do używania prawidłowych znaków typograficznych.
  6. W dokumentach znakowych ASCII pozostawiamy -- i --- jako myślniki oraz ,, i '' jako cudzysłowy. W dokumentach -a postępujemy podobnie, z tym że dwuznaki te zostaną automatycznie zastąpione właściwymi symbolami.

Przegląd elementów formatowania XHTML

Umieszczone niżej opisy elementów HTML są pomyślane jako podręczne przypomnienie ich składni i znaczenia dla osób nie zamierzających stać się ekspertami tego języka, lecz znających jego podstawowe zasady i pragnących go poprawnie stosować w praktyce. Spodziewam się, że większość uczestników zajęć należy do tej grupy.

Opisy te obejmują bardzo ograniczony (i dodajmy: subiektywny) wybór spośród pełnego repertuaru środków języka HTML zorientowany na odzwierciedlenie budowy logicznej typowego dokumentu i nie mogą zastąpić ani lektury podręcznika, ani doświadczenia płynącego z analizy gotowych przykładów i wykonywania ćwiczeń praktycznych.

Atrybuty elementów mające charakter opcjonalny (tzn. takie, które można zastosować, lecz nie trzeba tego robić) w większości pominąłem włączając w to wiele atrybutów, które można umieścić w opisie rozmaitych elementów, a których znaczenie nie budzi wątpliwości (np. align lub class). Nieliczne atrybuty opcjonalne, które pełnią szczególnie istotną rolę, zostały ujęte w opisach i wyróżnione zmniejszeniem znaków tekstu.

Przegląd zawiera również opisy elementów niepożądanych, których stosowanie utrudnia lub uniemożliwia zarządzanie budową logiczną dokumentu. Opisy tych elementów wyróżniono jasnością tekstu.

Wraz ze standardem HTML 5 język wzbogacił się o nowe znaczniki. W większości nie są one ujęte w poniższym zestawieniu.

Budowa pliku źródłowego

<html> tekst </html>
Element obejmujący cały tekst źródłowy dokumentu.
<head> tekst </head>
Obejmuje obszar nagłówka dokumentu, nie podlegający prezentacji. Ten element umieszcza się w obrębie elementu głównego html, przed elementem body.
<meta name="nazwa" content="informacje" />
Przekazuje klientowi pod nazwą nazwa ciąg znaków zawierający informacje dotyczące dokumentu, ale nie stanowiące jego treści (na przykład identyfikator autora, nazwę zestawu znaków użytego do zapisania pliku źródłowego, słowa kluczowe dotyczące treści itp.). Ten element umieszcza się w obrębie elementu head.
<title> tekst </title>
Ustala, że tekst będzie zewnętrznym tytułem dokumentu, widocznym np. jako nazwa okna przeglądarki. Ten element umieszcza się w obrębie elementu head.
<body> tekst </body>
Obejmuje główny obszar dokumentu, który podlega prezentacji. Ten element umieszcza się w obrębie elementu głównego html, po elemencie head.

Struktura logiczna dokumentu

Elementy wymienione w tym podrozdziale należą do części prezentacyjnej dokumentu. Dlatego powinny być stosowane w obrębie elementu body.

Nagłówki kolejnych poziomów

<h1> tekst </h1>
Rozpoczyna nowy element podziału dokumentu, opatrzony tytułem tekst. Zależnie od objętości tekstu, element h1 stosuje się do całości dokumentu lub do jego pojedynczych rozdziałów.
<h2> tekst </h2>
Rozpoczyna nowy rozdział (a w obszernych dokumentach podrozdział), opatrzony tytułem tekst.
<h3> tekst </h3>
Rozpoczyna nowy podrozdział (a w obszernych dokumentach pod-podrozdział), opatrzony tytułem tekst.
<h4> tekst </h4>
Rozpoczyna nowy podrozdział niższego rzędu, opatrzony tytułem tekst.
<h5> tekst </h5>
Rozpoczyna nowy podrozdział niższego rzędu, opatrzony tytułem tekst.
<h6> tekst </h6>
Rozpoczyna nowy podrozdział niższego rzędu, opatrzony tytułem tekst.

Formowanie bloków tekstu

<p> tekst </p>
Formuje tekst w blok akapitowy. Powinien być używany tylko do tekstu ciągłego.
<pre> tekst </pre>
Formuje tekst w postaci preformatowanej. Bloki preformatowane stosuje się przede wszystkim do przytoczenia zawartości niesformatowanych plików znakowych, zawierających np. dane lub kod źródłowy programu.
<blockquote> tekst </blockquote>
Formuje tekst jako cytat blokowy (specjalny blok, zazwyczaj wcięty obustronnie, służący do przytoczenia obszernego fragmentu cudzego tekstu lub cudzej wypowiedzi).
<div> tekst </div>
Wyróżnia tekst jako blok o niewyspecjalizowanej funkcji (zwykle dla zastosowania stylu).

Wyróżnienie tekstu w wierszu

Grupa znaczników logicznych obejmuje elementy umożliwiające wyróżnianie takich cech tekstu, jak m.in. „nowy termin”, „tekst o szczególnym znaczeniu”, „tytuł przytaczanej książki”, „nazwa zmiennej”. Są to wszystko niezależne do siebie to pojęcia związane z sensem przekazu. Dlatego warto je rozróżniać już na poziomie znakowania. Nie należy też mylić ich znaczenia z pożądanym w danej chwili sposobem przedstawienia tekstu — tym zajmą się automaty formatujące.

<em> tekst </em>
Oznacza nacisk emocjonalny na tekst (zwykle bywa składany odmianą pisma o kontrastującym nachyleniu). Istnieje ważna różnica między wyróżnieniem tekstu związanym z naciskiem emocjonalnym (a więc ze znaczeniem) zwanym emfazą, a wyróżnieniem za pomocą kursywy (a więc związanym z wyglądem). Poza tym w obszarze, w którym użyto odmiany prostej, wyróżnienie znacznikiem emfazy zwykle powoduje „pochylenie” pisma; w obszarze objętym kursywą takie samo wyróżnienie może spowodować „wyprostowanie” znaków.
<strong> tekst </strong>
Wyróżnia szczególną ważność tekstu (zwykle bywa składany pismem pogrubionym).
<q> tekst </q>
Oznacza tekst jako treść cytatu (może się to wiązać z automatycznym zastosowaniem kroju pisma lub cudzysłowów).
<cite> tekst </cite>
Oznacza tekst jako nazwę cytowanego źródła (np. tytuł książki).
<dfn> tekst </dfn>
Oznacza, że tekst jest nowo wprowadzanym (lub definiowanym) pojęciem czy też terminem.
<code> tekst </code>
Oznacza tekst jako fragment programu lub nazwę pliku (zwykle składany pismem o kroju maszyny do pisania).
<var> tekst </var>
Oznacza, że tekst stanowi nazwę lub symbol pewnej zmiennej (matematycznej, fizycznej, informatycznej lub innej).
<samp> tekst </samp>
Oznacza tekst jako próbkę, dosłowny przykład lub inną wartość nie podlegającą interpretacji, np. Zmienna adres może przyjąć wartość ul. Grunwaldzka 51.
<span> tekst </span>
Wyróżnia tekst w ogólny sposób bez wskazania jego konkretnej funkcji (zwykle dla zastosowania stylu).

Rozszerzenia zestawu znaczników

HTML nie zawiera mechanizmu definiowania własnych znaczników. Mimo to możliwe jest poprawne znakowanie logiczne za pomocą klas.

<element class="nazwa">
Atrybut class="nazwa" prawie dowolnego elementu przypisuje obszar elementu do klasy nazwa. Nazwa klasy jest nadawana przez użytkownika. Tę samą klasę należy nadawać zakresom elementów, spełniającym tę samą funkcję w tekście, jeżeli nie da się jej wyrazić za pomocą standardowych znaczników. Jako element najlepiej użyć elementu HTML odpowiadającego choćby w przybliżeniu oznaczanej funkcji; w przypadku braku odpowiedniego kandydata najlepiej zastosować element span w odniesieniu do tekstu umieszczonego w wierszu, zaś element div w odniesieniu do całości bloku. Wyglądem zakresów klas można zarządzać, definiując odpowiadające im style.

Znaki sterujące układem tekstu

<br clear="położenie" />
Wymusza zakończenie wiersza bez kończenia akapitu. Atrybut clear wymusza dodatkowo zakończenie opływania tekstu dokoła ilustracji umieszczonych przy wybranym marginesie bieżącego akapitu (efekt opływania zostanie przewany także w miejscu rozpoczęcia dowolnego elementu, którego styl posiada zdefiniowaną cechę clear).
&nbsp;
Tej jednostki znakowej używa się do oznaczania spacji, które podczas formatowania bloku nie mogą być zastąpione końcami wierszy. Jest ona w pewnym sensie przeciwieństwem elementu br.

Listy i elementy list

<ol type="typ-znacznika" start="pierwszy-numer"> tekst </ol>
Formuje tekst jako listę numerowaną. Atrybut type decyduje o postaci numeracji: liczbowej arabskiej (type="1"), rzymskiej ("i" lub "I") albo literowej ("a" lub "A"). Tekst powinien składać się z elementów li.
<ul type="typ-znacznika"> tekst </ul>
Formuje tekst jako listę nienumerowaną (wypunktowanie). Atrybut type decyduje o kształcie znacznika. Tekst powinien składać się z elementów li.
<li value="n"> tekst </li>
Formuje tekst jako element listy. Powinien występować w obszarze obowiązywania elementu ol lub ul. Znacznik lub numer jest wstawiany automatycznie w postaci ustalonej dla całej listy. Atrybut value="n" nadaje elementowi listy numerowanej numer n (wartość n musi być liczbą całkowitą). Następny element listy będzie nosił numer n+1.
<dl> tekst </dl>
Formuje tekst jako listę definicyjną (słownikową). Tekst powinien składać się z par elementów dtdd.
<dt> tekst </dt>
Formuje tekst jako hasło (definition term) listy słownikowej. Powinien występować w obszarze obowiązywania elementu dl, przed elementem dd.
<dd> tekst </dd>
Formuje tekst jako opis definicyjny (definition description) listy słownikowej. Powinien występować w obszarze obowiązywania elementu dl, za elementem dt.

Zasady numeracji elementów list za pomocą atrybutów start, value i type powoli tracą aktualność. W nowocześniej projektowanych listach postać i wartość znacznika winny być wymuszone zastosowaniem stylu. Na pełną realizację tej idei w programach formatujących musimy jeszcze trochę poczekać

Tabele

<table width="szer" border="szer-linii" rules="typ-siatki"> tekst </table>
Formuje tekst w tabelę. Tekst powinien składać się wyłącznie z elementów tabeli. Szer oznacza szerokość tabeli, a szer-linii — szerokość linii siatki. Możliwe typy-siatki to: all (wszystkie linie), rows (tylko linie rozdzielające wiersze), cols (tylko linie rozdzielające kolumny), groups (tylko linie rozdzielające grupy kolumn i wierszy) lub none (brak linii siatki).
<caption> tekst </caption>
Formuje tekst jako podpis tabeli.
<colgroup> tekst </colgroup>
Definiuje układ grupy kolumn tabeli. Tekst powinien zawierać elementy definiujące układ kolejnych kolumn.
<col span="liczba-kolumn" align="wyrównanie" width="szer" />
Definiuje układ kolumny lub identycznie formatowanych sąsiadujących kolumn. Atrybut align="char" char="." wymusza wyrównanie kolumny liczb względem znaku separatora dziesiętnego (tutaj jest nim kropka). Pozostałe wartości atrybutu align mają standardowe znaczenie.
<thead> tekst </thead>
Formuje tekst jako nagłówek tabeli, który będzie otwierać wydruk każdej części tabeli podzielonej między strony. Tekst powinien składać się z wierszy tabeli.
<tbody> tekst </tbody>
Formuje tekst w grupę wierszy tabeli. Tekst powinien składać się z wierszy tabeli. Jedna tabela może zawierać dowolną liczbę elementów tbody.
<tr align="wyrównanie" valign="wyrównanie-pion"> tekst </tr>
Formuje tekst jako wiersz tabeli. Tekst powinien składać się z komórek tabeli.
<td align="wyrównanie" valign="wyrównanie-pion" colspan="kolumn" rowspan="wierszy"> tekst </td>
Formuje tekst jako zwykłą komórkę tabeli. Komórka może zajmować rozmiar kolumn kolumn w poziomie i wierszy wierszy w pionie.
<th> tekst </th>
Formuje tekst jako komórkę nagłówkową tabeli. Atrybuty mają znaczenie identyczne, jak w elementach td.
<tfoot> tekst </tfoot>
Formuje tekst jako stopkę tabeli, która będzie zamykać wydruk każdej części tabeli podzielonej między strony. Tekst powinien składać się z wierszy tabeli.

Struktura hipertekstowa dokumentu

W tym miejscu wyjątkowo rozdzielam opisy definicji zakładek i odsyłaczy, mimo że formalnie stanowią one tylko opcje elementu a; robię tak ze względu na odmienne funkcje spełniane przez te dwie opcje i na fakt, że jedna z tych funkcji jest już przestarzała.

<a href="adres-URI"> tekst </a>
Opatruje tekst odsyłaczem hipertekstowym do adresu adres-URI.
<element id="nazwa">
Atrybut id="nazwa" prawie dowolnego elementu opatruje obszar elementu etykietą nazwa. Etykietę tę można wykorzystać w odsyłaczach hipertekstowych (w tym samym lub innym dokumencie). Podobną funkcję spełnia przestarzały sposób użycia elementu a: <a name="nazwa">tekst</a>.
<a name="nazwa"> tekst </a>
Opatruje tekst etykietą nazwa, którą można wykorzystać w odsyłaczach hipertekstowych (w tym samym lub innym dokumencie). Technika ta jest przestarzała i nie należy jej używać. Podobny efekt można osiągnąć w bardziej elegancki sposób, nadając atrybut id="nazwa" znacznikowi otwierającemu element obejmujący wybrany fragment dokumentu.

Grafika i ilustracje w dokumencie

<img src="URI-pliku" alt="opis" width="szer" height="wys" align="położenie" />
Wstawia do dokumentu obraz graficzny zapisany w pliku URI-pliku, nadaje mu rozmiary zadane parametrami width i height (o ile je określono). Jeżeli obraz nie jest dostępny, w dokumencie pojawi się opis. Wartości left lub right atrybutu align spowodują „opływanie” tekstu dookoła obrazka, dosuniętego do lewego lub prawego marginesu. Efekt opływania zostanie przerwany w miejscu, w którym umieścimy element wymuszający koniec wiersza w postaci <br align="położenie" />, lub dowolny element, którego styl posiada zdefiniowaną cechę clear.
<object type="typ-danych" data="URI-pliku" width="szer" height="wys" align="położenie">opis</object>
Wstawia do dokumentu obiekt wskazanego typu MIME pobrany z pliku URI-pliku, nadaje mu rozmiary zadane parametrami width i height (o ile je określono). Jeżeli plik nie jest dostępny lub żądanie z innych powodów nie może być zrealizowane, w dokumencie pojawi się opis. Element object jest niezwykle ogólny, zaś wymagania co do sposobu jego interpretacji niezbyt ściśle określone; w kontekście bieżącego kursu znaczenie mają jedynie typy danych: text/plain (tzn. tekst niesformatowany), text/html (tekst sformatowany środkami języka HTML) oraz image/* (czyli obrazy bądź rysunki zapisane w odpowiednim formacie; zamiast gwiazdki należy umieścić nazwę formatu rastrowego gif, jpeg lub png albo formatu wektorowego svg+xml). Wartości left lub right atrybutu align spowodują „opływanie” tekstu dookoła obrazka, dosuniętego do lewego lub prawego marginesu. Efekt opływania zostanie przewany w miejscu, w którym umieścimy element wymuszający koniec wiersza w postaci <br align="położenie" />, lub dowolny element, którego styl posiada zdefiniowaną cechę clear.

Ustalanie sposobu prezentacji

Prezentacja tekstu

Elementów z tej grupy (oprócz dwóch pierwszych) nie powinno się nadużywać. Bardzo często zamiast nich lepiej jest zastosować odpowiedni element znakowania logicznego.

<sub> tekst </sub>
Składa tekst jako indeks dolny (subscript).
<sup> tekst </sup>
Składa tekst jako indeks górny (superscript).
<big> tekst </big>
Składa tekst przy użyciu pisma o znakach większych, niż to obowiązuje w otoczeniu tego elementu.
<small> tekst </small>
Składa tekst przy użyciu pisma o znakach mniejszych, niż to obowiązuje w otoczeniu tego elementu.
<b> tekst </b>
Składa tekst pismem pogrubionym (nie mylić z elementem strong).
<i> tekst </i>
Składa tekst kursywą (nie mylić z elementami znakowania logicznego: cite, dfn, em, q ani var).
<tt> tekst </tt>
Składa tekst pismem maszyny do pisania (nie mylić z elementami code ani pre).
<u> tekst </u>
Składa tekst i podkreśla go. Element ten jest przeznaczony do usunięcia z języka.

Linia pozioma

<hr width="szer" />
Wstawia linię poziomą o szerokości szer.

Bezpośrednie zarządzanie krojami i wielkością pisma

Znaczniki elementu font nie wnoszą żadnej istotnej informacji związanej z budową dokumentu. Te same efekty prezentacyjne można w prostszy i bardziej elastyczny sposób osiągnąć korzystając z arkuszy stylów. Znaczniki bezpośredniego sterowania pismem są wyraźnie przestarzałe i ich używanie świadczy najczęściej o braku umiejętności poprawnego znakowania strukturalnego. W najnowszych specyfikacjach języka XHTML element font już nie występuje.

<font face="nazwa"> tekst </font>
Składa tekst pismem rodziny nazwa (o ile jest ona dostępna).
<font size="stopień"> tekst </font>
Składa tekst pismem wielkości stopień (o ile jest ona dostępna).
<font color="kolor"> tekst </font>
Składa tekst pismem barwy kolor (o ile jest on dostępny).

Arkusze stylów

<style type="text/css"> tekst </style>
Definiuje arkusz stylu typu CSS (kaskadowy arkusz stylu, Cascade Style Sheet), zawierający definicje sposobów formatowania wybranych elementów. Tekst powinien składać się z definicji poszczególnych stylów. Element style powinien wystąpić w obszarze nagłówka (head) dokumentu.
<link rel="stylesheet" type="text/css" href="nazwa" />
Ustanawia odsyłacz do arkusza stylów typu CSS (kaskadowy arkusz stylu, Cascade Style Sheet), umieszczonego w pliku nazwa. Opisy stylów zawarte we wskazanym pliku zostaną zastosowane do prezentacji dokumentu. Element link powinien wystąpić w obszarze nagłówka (head) dokumentu.
* {opis-stylu}
Przypisuje wszystkim elementom styl domyślny.
nazwa-elementu {opis-stylu}
Przypisuje elementowi nazwa-elementu styl domyślny.
nazwa-elementu1 nazwa-elementu2 {opis-stylu}
Przypisuje styl domyślny elementowi nazwa-elementu2 umieszczonemu w obszarze elementu nazwa-elementu1.
nazwa-elementu1>nazwa-elementu2 {opis-stylu}
Przypisuje styl domyślny elementowi nazwa-elementu2 umieszczonemu bezpośrednio w obszarze elementu nazwa-elementu1.
nazwa-elementu1 + nazwa-elementu2 {opis-stylu}
Przypisuje styl domyślny elementowi typu nazwa-elementu2 umieszczonemu bezpośrednio za obszarem elementu nazwa-elementu1.
nazwa-elementu.nazwa-stylu {opis-stylu}
Definiuje klasę stylu noszącą nazwę nazwa-stylu, możliwą do zastosowania w elementach nazwa-elementu przez jawne wskazanie klasy.
.nazwa-stylu {opis-stylu}
Definiuje klasę stylu noszącą nazwę nazwa-stylu, możliwą do zastosowania w dowolnych elementach przez jawne wskazanie klasy.
.nazwa-stylu nazwa-elementu {opis-stylu}
Przypisuje styl domyślny elementowi nazwa-elementu umieszczonemu w obszarze dowolnego elementu, wobec którego zastosowano styl nazwa-stylu.
nazwa-elementu:pseudoelement {content: "zawartość" opis-stylu}
Opisuje styl pseudoelementu o nazwie pseudoelement związanego z elementami nazwa-elementu. Nie można definiować własnych pseudoelementów. Zawartość pseudoelementu before, sformatowana zgodnie z opisem-stylu, jest umieszczana w dokumencie bezpośrednio przed każdym obszarem zastosowania elementu nazwa-elementu, a pseudoelementu after — bezpośrednio za takim obszarem. Inne pseudoelementy nie są dla nas interesujące.
<element class="nazwa-stylu">
Atrybut class dowolnego elementu wskazuje, że obszar jego obowiązywania ma zostać sformatowany zgodnie z wymaganiami stylu nazwa-stylu.
<element style="opis-stylu">
Atrybut style dowolnego elementu zawiera szczegółowy opis właściwości stylu, za którego pomocą element ten ma zostać sformatowany. Mimo, że formalnie atrybut style jest związany z pojęciem stylu, to jego stosowanie zachęca do formatowania wizualnego i dlatego jest niepożądane w dokumentach projektowanych strukturalnie.

Elementy nie należące do HTML i elementy niepożądane

Elementy tu wymienione nie powinny się znaleźć w żadnym poprawnie oznakowanym dokumencie HTML. Ich stosowanie świadczy na ogół o braku umiejętności poprawnego projektowania dokumentu. Ponieważ elementów tych powinno się w ogóle nie używać, podajemy tylko ich nazwy, pomijając szczegółowy opis.

<center>
Nie należy do języka, choć jest interpretowany przez niektóre programy; poprawnym sposobem osiągnięcia równoważnego efektu jest deklaracja stylu wyrównywania bloku.
<blink>
Nie należy do języka, choć jest interpretowany przez niektóre programy; utrudnia czytanie tekstu.
<font>
Przestarzały, usunięty z najnowszych definicji języka; poprawnym sposobem osiągnięcia równoważnego, a nawet lepszego efektu jest deklaracja stylu pisma.
<marquee>
Nie należy do języka, choć jest interpretowany przez niektóre programy; utrudnia czytanie tekstu.
<iframe src="URI-pliku" width="szer" height="wys" align="położenie">opis</iframe>
Wstawia do dokumentu ramkę zawierającą sformatowaną zawartość pliku wskazanego przez URI-pliku. Należy do niektórych wersji języka (np. do XHTML 1.0 i do HTML 5). Równoważny efekt można uzyskać za pomocą elementu object.
<multicol>
Nie należy do języka. Skład wieloszpaltowy jest bardzo przydatny, ale należałoby go deklarować za pośrednictwem stylu, a nie elementu. Właściwości stylów umożliwiające zarządzanie szpaltami zostały włączone do 3. edycji stylów CSS.

Lista elementów nielegalnych i niepożądanych jest o wiele dłuższa. Wymieniłem tylko kilka pozornie najbardziej atrakcyjnych, zatem najchętniej stosowanych przez nieświadomych rzeczy autorów.

Podsumowanie

Tekst źródłowy dokumentu HTML zawiera treść i polecenia formatowania. Oba typy informacji są zapisane znakowo (potrafimy je zapisywać i czytać jako znaki ASCII lub UNICODE). Plik źródłowy HTML jest więc dokumentem znakowym.

W trakcie prezentacji dokumentu polecenia te muszą być zinterpretowane przez przeglądarkę. Dokument HTML w postaci przeznaczonej do czytania nie jest dokumentem znakowym, mimo że został przygotowany na podstawie zawartości pliku znakowego.

Elementy HTML, stosowane w myśl reguł znakowania XML, umożliwiają — choć w ograniczony sposób — nadawanie tekstowi cech wskazujących na rolę, jaką pełni w dokumencie zgodnie z zamiarem autora. Możliwe — i zalecane — jest więc oddzielenie procesu znakowania od procesu określania szczegółów wyglądu oznakowanego tekstu (ten drugi nie należy już do zakresu kompetencji autora, lecz redaktora, nawet jeżeli w danym przypadku jest to ta sama osoba). Znaczy to, że podczas znakowania należy przede wszystkim korzystać ze znaczników strukturalnych i logicznych, a o innych najlepiej zapomnieć. Tak zbudowane dokumenty będą czytelne, a zarazem podatne na zmiany redakcyjne.

Współczesne procesory tekstu mogą odczytywać i interpretować dokumenty HTML. Język HTML stanowi więc sensowny sposób przechowywania i wymiany umiarkowanie skomplikowanych dokumentów o typowej budowie, możliwy do wykorzystania przez większość użytkowników komputerów, niezależnie od stosowanego przez nich oprogramowania.

Tworzenie prawidłowych dokumentów (X)HTML nie jest trudne, lecz wymaga zapoznania się z ogólnymi zasadami budowania i formatowania dokumentu, a także zachowania pewnej dyscypliny. Istnieją środowiska edycyjne przeznaczone specjalnie do tworzenia dokumentów HTML (np. Amaya, SeaMonkey Composer, NVu, Pajączek). Wykorzystanie w tym celu biurowych edytorów wizualnych jest co prawda możliwe, lecz niezbyt skuteczne, gdyż wpływ autora na ostateczną zawartość pliku źródłowego jest ograniczony.

Istotne jest, że reguły znakowania są niezależne od środowisk przygotowywania dokumentów oraz od przeglądarek interpretujących dokumenty. O tym, czy dany dokument jest zbudowany zgodnie z wymaganiami języka, da się rozstrzygnąć na podstawie formalnej procedury. Automaty dokonujące takiej analizy noszą nazwę walidatorów składni. Konsorcjum WWW w swoim serwisie sieciowym umożliwia wszystkim chętnym przeprowadzenie analizy dowolnego dokumentu.

Pytania kontrolne

© Copyright 2001–2010 by Jan Jełowicki, Katedra Matematyki Uniwersytetu Przyrodniczego we Wrocławiu
janj@aqua.up.wroc.pl
http://karnet.up.wroc.pl/~jasj