Tekst

W tym rozdziale dowiesz się...

• Jakie są podstawowe modele wyświetlania znaczników HTML?
• W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Jak wyśrodkować lub wyjustować tekst?
• Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką
• Jak zgrupować elementy w blok i ustawić po lewej, po prawej lub wyśrodkować (wycentrować)?
• W jaki sposób ustawić tekst i inne elementy na środku ekranu (wyśrodkowanie, centrowanie)?
• W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?
• Jak nie dopuścić do zawinięcia tekstu na ekranie przeglądarki, czyli sprawić aby cały tekst znajdował się w jednej linijce?
• W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?
• W jaki sposób pochylić tekst na stronie WWW (kursywa)?
• W jaki sposób podkreślić tekst na stronie WWW?
• W jaki sposób przekreślić tekst na stronie WWW?
• Jak wstawić migający tekst (migotanie)?
• Jak wyróżnić tekst na ekranie (emfaza)?
• Jak wstawić indeks górny i dolny przy tekście?
• Jak kontrolować wygląd czcionki (tekstu): wielkość (rozmiar) czcionki, kolor tekstu, rodzaj czcionki (krój czcionki)? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?
• Jak ustalić czcionkę na całego tekstu na stronie WWW?
• Jak pomniejszyć lub powiększyć tekst?
• Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?
• Jak oznaczyć kod komputerowy?
• Jak oznaczyć tekst, który użytkownik powinien wprowadzić z klawiatury?
• Jak wprowadzić efekt dalekopisu?
• Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?
• Jak oznaczyć zmienną lub argument programu?
• Jak powinno się wprowadzać cytaty i odniesienia do źródła?
• Jak wprowadzić dłuższy cytat?
• Jak umieścić na stronie WWW informacje kontatkowe z autorem?
• Jak poinformować użytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i usunięte?
• Jak powinno się oznaczać skróty i akronimy?
• Jak oznaczyć definicję terminu?
• Jak wprowadzić na stronę WWW słownik (listę definicyjną)?
• Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?
• W jaki sposób zrobić listę punków i podpunktów (wykaz)?
• Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?
• Jak obramować tekst?
• W jaki sposób ukryć przed użytkownikiem wybrany tekst?
• Co to znaczy, że kod (X)HTML jest poprawny semantycznie i dlaczego jest to takie ważne?

Wyświetlanie

Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników:

1. w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkami od tej reguły są akapit i adres, które mimo że stanowią elementy blokowe, nie mogą zawierać w sobie dodatkowych bloków - w tym innych akapitów.
2. w linii - elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii - obok siebie. Nie mogą one zawierać w sobie elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst.

O tym, w jaki sposób wyświetlany jest dany znacznik HTML 4.01, możesz dowiedzieć się w rozdziale: Wykaz elementów.

Najczęściej można jednak odgadnąć to intuicyjnie, np. wydaje się logiczne, że tekst pogrubiony musi być wyświetlany w linii, ponieważ gdyby tak nie było, nie można by pogrubić za jednym razem dwóch oddzielnych wyrazów, znajdujących się w tym samym wierszu tekstu, gdyż wtedy wiersz zostałby przełamany na dwie osobne linijki.

Przykład:

To jest akapit (blok z interlinią - podobnie jak tytuł)

Akapit

<p>...</p>

wyświetlanie: w bloku ^* 

Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco różniącej się tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza. Jeżeli przed akapitem lub serią akapitów postawimy znak paragrafu § (w kodzie źródłowym reprezentowany przez znak specjalny §) z ewentualnym numerem porządkowym, to taki fragment tekstu nosi nazwę paragraf. Zwykle odnosi się on do przepisów prawnych.

Stosując akapity możemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia):

1. Wyrównanie do lewej (domyślnie)

   <p align="left">...</p>

   lub

   <p>...</p>

2. Wyrównanie do prawej

   <p align="right">...</p>

3. Wyśrodkowanie

   <p align="center">...</p>

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

   <p align="justify">...</p>

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

* Akapit (paragraf) jest znacznikiem specyficznym - jest wyświetlany w bloku, ale nie może zawierać innych elementów blokowych (włączając w to inne paragrafy). Może natomiast zawierać zwykły tekst oraz elementy wyświetlane w linii.

Przykład:

align="left",
wyrównanie do lewej,
wyrównanie do lewej (align="left"),
(align="left")...

align="right",
wyrównanie do prawej,
wyrównanie do prawej (align="right"),
(align="right")...

align="center",
wyśrodkowanie,
wyśrodkowanie (align="center"),
(align="center")...

justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (align="justify")...

Tytuł

<hn>...</hn>

wyświetlanie: w bloku

Aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi), możesz użyć tej komendy. Istnieje sześć rzędów tytułów. Najwyższym rzędem jest rząd pierwszy: <h1>...</h1>, a najniższym - szósty: <h6>...</h6>. Tytuł wyższego rzędu jest pisany większą czcionką.

Znaczniki tytułów (nagłówków) nie mogą zawierać elementów blokowych.

Tworząc tytuły możesz użyć tych samych sposobów wyrównywania tekstu co w przypadku paragrafów, tzn.:

1. Wyrównanie do lewej (domyślnie)

   <hn align="left">...</hn>

   lub

   <hn>...</hn>

2. Wyrównanie do prawej

   <hn align="right">...</hn>

3. Wyśrodkowanie

   <hn align="center">...</hn>

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

   <hn align="justify">...</hn>

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Prawidłowa kolejność tytułów

Należy dążyć do tego, aby tytuły na stronie były poukładane w odpowiedniej kolejności, odzwierciadlającej podział na działy, rozdziały, podrozdziały, punkty, podpunkty itd. Oznacza to, że każdy element h2 powinien być poprzedzony przynajmniej przez jeden element h1, h3 - przez h2, h4 - przez h3, h5 - przez h4, h6 - przez h5. W innym przypadku mielibyśmy do czynienia z sytuacją podobną do wykazu numerowanego np. od 1.1 zamiast od 1 albo z brakującymi podpunktami, tzn. jak gdyby nastąpiło "przeskoczenie" z punktu nr 1 od razu do 1.1.1 pomijając 1.1.

Przykład:

<h1>1. Dział</h1>
(...)
<h2>1.1. Rozdział</h2>
(...)
<h2>1.2. Rozdział</h2>
(...)
<h3>1.2.1. Podrozdział</h3>
(...)
<h1>2. Dział</h1>
(...)

Dymek narzędziowy

Stosując polecenie: <hn title="Tu podaj opis">...</hn>, możemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") można stosować praktycznie w stosunku do wszystkich znaczników HTML (oprócz: <base />, <basefont />, <head>, <html>, <meta />, <param />, <script>, <title>).

UWAGA!
W treści atrybutu title="..." nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: "

Blok

<div>...</div>

wyświetlanie: w bloku

Polecenie to wydziela większy blok tekstu, przez co możemy nadać mu jakiś rodzaj formatowania:

1. Wyrównanie do lewej (domyślnie)

   <div align="left">...</div>

   lub

   <div>...</div>

2. Wyrównanie do prawej

   <div align="right">...</div>

3. Wyśrodkowanie

   <div align="center">...</div>

4. Justowanie (wyrównanie do obu marginesów jednocześnie)

   <div align="justify">...</div>

W odróżnieniu od paragrafu, blok może zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, należy np. zastosować znacznik <br />).

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Wyśrodkowanie

<center>...</center>

wyświetlanie: w bloku

Polecenie to pozwala wyśrodkować (czyli ustawić na środku ekranu) dowolny element - nie tylko tekst, ale również np. obrazek. Jednym takim znacznikiem można objąć równocześnie kilka elementów. Jego działanie jest analogiczne jak <div align="center">.

Znacznik CENTER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Ten tekst jest wyśrodkowany, podobnie jak ten obrazek:

Koniec linii

<br />

Jest to bardzo przydatny znacznik. Używamy go, gdy chcemy natychmiast zakończyć linię i przejść do następnej (wszystkie normalne znaki końca liniii są ignorowane przez przeglądarkę).

Przykład:

Tu jest pierwsza linia<br />
Tu jest druga linia...<br /><br /><br />


...a tu następna.

Blokada przełamania wiersza

<nobr>...</nobr>

To polecenie wykorzystujemy, gdy zależy nam na zablokowaniu przełamania wiersza, tzn. chcemy aby cały tekst był pisany w jednej linii, niezależnie od jego długości (przeglądarka automatycznie zawija wiersze, które nie mieszczą się na ekranie). Jeśli chcemy odwołać ten efekt przed zamknięciem znacznika (czyli przed pojawieniem się </nobr>), musimy użyć polecenia: <wbr /> (tylko Internet Explorer). Po jego użyciu wiersz zostanie przełamany, chociaż wszystko dzieje się nadal w obrębie znacznika <nobr>...</nobr>.

Polecenie <wbr /> działa tylko wówczas, jeżeli tekst wpisany w ramach <nobr>...</nobr> nie mieści się na ekranie. Natomiast jeśli chcemy natychmiastowo zakończyć linię, należy użyć <br />.

Podczas drukowania strony, tekst który nie został zawinięty, najprawdopodobniej będzie "ucięty"!

Znaczniki NOBR oraz WBR nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Taki sam efekt można uzyskać zamieniając w wybranym tekście wszystkie spacje na znaki: &nbsp; [zobacz: Znaki specjalne]. Nie dotyczy to jednak tekstu, w którym znajdują się: "%" (procent) lub "-" (myślnik) - wtedy linia może zostać przełamana po tych znakach, nawet jeśli nie występuje po nich spacja.

Pogrubienie

<b>...</b>

wyświetlanie: w linii

Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold").

Przykład:

Pochylenie

<i>...</i>

wyświetlanie: w linii

Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").

Przykład:

Podkreślenie

<u>...</u>

wyświetlanie: w linii

Pozwala podkreślić fragment tekstu (ang. "underline").

Znacznik U jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Stosując pewną "sztuczkę", można sprawić, aby kolor linii podkreślenia różnił się od koloru tekstu (nie obsługuje MSIE 5.0):

<u style="color: red"><span style="color: black">To jest czarne podkreślenie czerwoną linią</span></u>

Przykład:

Przekreślenie

<s>...</s>

<strike>...</strike>

wyświetlanie: w linii

Pozwala przekreślić część tekstu.

Znaczniki S oraz STRIKE są zdeprecjonowane przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Stosując pewną "sztuczkę", można sprawić, aby kolor linii przekreślenia różnił się od koloru tekstu (nie obsługuje MSIE 5.0):

<s style="color: red"><span style="color: black">To jest czarne przekreślenie czerwoną linią</span></s>

Przykład:

Migotanie

(tylko Netscape/Mozilla/Firefox i Opera 7.2!)

<blink>...</blink>

Wprowadza na ekran migający tekst.

Znacznik BLINK nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Aby wstawić migający tekst, który działa również w innych przeglądarkach, możesz użyć odpowiedniego skryptu.

Przykład:

Wyróżnienie

wyświetlanie: w linii

1. Zwykłe (emfaza)

   <em>...</em>

2. Mocne (mocna emfaza)

   <strong>...</strong>

Pozwala wyróżnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle wyświetla tekst napisany kursywą, natomiast drugie - pogrubiony. Różnią się one jednak od zwykłego wytłuszczenia i kursywy tym, że dodatkowo niosą ze sobą pewne informacje, co do ważności tekstu. W sytuacjach kiedy szczególnie zależy nam na zwróceniu uwagi czytelnika na jakieś informacje, a nie jedynie na określonym sformatowaniu czcionki, powinniśmy użyć właśnie przedstawionych powyżej znaczników.

Przykład:

<em>To jest tekst wyróżniony</em>

<strong>To jest tekst mocno wyróżniony</strong>

Indeks

wyświetlanie: w linii

1. Indeks górny

   <sup>...</sup>

2. Indeks dolny

   <sub>...</sub>

Umożliwia wprowadzenie indeksów (górnych lub dolnych) przy cyfrach i literach.

Przykład:

indeks^{^górny}

indeks_{_dolny}

Czcionka

<font>...</font>

wyświetlanie: w linii

Znacznik FONT jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Dzięki temu poleceniu, możesz określić wiele parametrów dotyczących pisanego tekstu. Poniżej zostanie przedstawiona ich lista.

Wielkość czcionki

1. Wartość bezwzględna

   <font size="n">...</font>

   gdzie "n" oznacza wielkość pisma (1 - najmniejsza, 7 - największa, 3 - domyślna)

   Przykład:

   Czcionka o rozmiarze 1 (w Internet Explorerze 10 pikseli)
   
   Czcionka o rozmiarze 2 (12 pikseli)
   
   Czcionka o rozmiarze 3 - domyślna (16 pikseli)
   
   Czcionka o rozmiarze 4 (18 pikseli)
   
   Czcionka o rozmiarze 5 (24 piksele)
   
   Czcionka o rozmiarze 6 (32 piksele)
   
   Czcionka o rozmiarze 7 (48 pikseli)

2. Wartość względna

   <font size="+n">...</font>

   lub

   <font size="-n">...</font>

   gdzie "+n" oznacza czcionkę o "n" większą od aktualnej. Natomiast "-n" oznacza czcionkę o "n" mniejszą od bieżącej.

   Przykład:

   To jest czcionka o rozmiarze domyślnym
   
   Czcionka o rozmiarze +1 (3+1=4)
   
   Czcionka o rozmiarze -1 (3-1=2)

Atrybut SIZE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Kolor tekstu

<font color="kolor">...</font>

Atrybut COLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Czcionka koloru "black" Czcionka koloru "silver" Czcionka koloru "gray" Czcionka koloru "white" Czcionka koloru "maroon" Czcionka koloru "red" Czcionka koloru "purple" Czcionka koloru "fuchsia" Czcionka koloru "green" Czcionka koloru "lime" Czcionka koloru "olive" Czcionka koloru "yellow" Czcionka koloru "navy" Czcionka koloru "blue" Czcionka koloru "teal" Czcionka koloru "aqua" Czcionka koloru "#800af0"

Rodzaj czcionki

<font face="rodzaj">...</font>

<font face="rodzaj1, rodzaj2, rodzaj3...">...</font>

Uwaga! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne). Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki. Koniecznie sprawdź rezultat w praktyce!

W przypadku drugiego polecenia zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Jest to lepszy sposób, gdyż pozwala się ubezpieczyć na wypadek nieposiadania jednego rodzaju czcionki przez użytkownika.

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Istnieje technologia, pozwalająca wczytać plik czcionki bezpośrednio z Internetu. Dzięki temu tekst teoretycznie zawsze będzie wyświetlony za pomocą wybranej przez nas czcionki, nawet jeśli użytkownik nie zainstalował jej na własnym komputerze. Niestety technologia ta nie została ujednolicona, a dodatkowo nie wszystkie przeglądarki ją obsługują :-( Aby dowiedzieć się więcej, zobacz: Czcionki osadzone.

Atrybut FACE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

Czcionka bazowa

<basefont size="rozmiar" color="kolor" face="rodzaj" />

Polecenie to pozwala określić parametry czcionki bazowej (domyślnej). Wszystkie atrybuty (size="...", color="...", face="...") mają takie same znaczenie jak w przypadku zwykłych czcionek. Ponieważ element ten nie ma znacznika zamykającego (!), zmienia parametry całego tekstu, znajdującego się poniżej niego, aż do pojawienie się następnego znacznika <basefont />. Zwykle polecenie to umieszcza się na stronie tylko jeden raz - w treści nagłówkowej dokumentu, czyli pomiędzy <head> oraz </head> [zobacz: Ramy dokumentu].

UWAGA!
W poleceniu tym nie należy raczej używać względnych miar wielkości czcionki size="+/-n"

Znacznik BASEFONT jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Czcionka powiększona i pomniejszona

1. Czcionka powiększona

   <big>...</big>

2. Czcionka pomniejszona

   <small>...</small>

wyświetlanie: w linii

Wprowadza tekst napisany powiększoną czcionką (<big>) lub pomniejszoną (<small>). Wpisując powyższe znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.: <big><big>...</big></big>), można zwiększyć lub zmniejszyć rozmiar tekstu o kilka wielkości.

Przykład:

To jest zwykły tekst... a ten tekst jest napisany czcionką powiększoną (big)

To jest zwykły tekst... a ten tekst jest napisany czcionką pomniejszoną (small)

Tekst preformatowany

<pre>...</pre>

wyświetlanie: w bloku

Wprowadza tekst preformatowany, czyli napisany czcionką monotypiczną (o stałej szerokości znaku), który uwzględnia dodatkowe spacje, tabulację i znaki końca linii (nie trzeba stosować znaczników <br />) oraz nie jest automatycznie zawijany. Dzięki niemu możesz np. wkleić na stronę WWW tekst, wprost ze zwykłego edytora, bez stosowania dodatkowych znaczników (niestety informacje dotyczące formatowania zostaną pominięte). Należy jednak przy tym pamiętać, aby tekst nie zawierał znaków: "<" oraz ">" (w zamian używaj: &lt; i &gt;).

Znacznik tekstu preformatowanego nie może zawierać elementów blokowych ani: IMG, OBJECT, BIG, SMALL, SUB, SUP.

Przykład:

Ten tekst jest preformatowny
dlatego możemy używać
	tabulatora,
dodatkowych         spacji
oraz znaków końca linii.

Kod komputerowy

<code>...</code>

wyświetlanie: w linii

Pozwala wprowadzić fragment kodu komputerowego ("wyciąg" z programu lub źródła dokumentu), który jest napisany czcionką monotypiczną (tak jak w przypadku tekstu preformatowanego). Nie uwzględnia on jednak dodatkowych spacji, tabulacji ani znaków końca linii (trzeba używać <br />) oraz jest automatycznie zawijany.

Ponieważ powyższy znacznik nie uznaje znaków końca linii, dodatkowych spacji, a także nie blokuje zawijania tekstu na ekranie, zamiast niego często używa się tekstu preformatowanego.

Przykład:

Klawiatura

<kbd>...</kbd>

wyświetlanie: w linii

Wprowadza na ekran tekst, wskazując, że użytkownik powinien wprowadzić go z klawiatury. Zwykle formatowanie tego elementu jest identyczne jak w przypadku kodu komputerowego.

Przykład:

Dla strony głównej serwisu internetowego należy utworzyć plik i nadać mu nazwę: <kbd>index.html</kbd>

Dalekopis

<tt>...</tt>

wyświetlanie: w linii

Pozwala wprowadzić do dokumentu tekst, napisany czcionką monotypiczną, czyli o stałej szerokości znaku (efekt dalekopisu). Zwykle działa analogicznie jak <code>.

Przykład:

Przykład

<samp>...</samp>

wyświetlanie: w linii

Pozwala wprowadzić do dokumentu tekst, będący przykładem wyniku wygenerowanego przez program, skrypt itp. Zwykle działa analogicznie jak <code>.

Przykład:

Zmienna

<var>...</var>

wyświetlanie: w linii

Wprowadza na ekran zmienną (matematyczną lub języka programowania), która zostaje wyróżniona, najczęściej poprzez pochylenie tekstu.

Przykład:

Cytat

wyświetlanie: w linii

1. Odniesienie do źródła

   <cite>...</cite>

   Zwykle jest napisany kursywą. Można w nim umieścić np. imię i nazwisko autora, którego cytujemy (ale nie sam cytat!) albo tytuł książki, do której się odnosimy.

2. Krótki cytat

   <q>...</q>

   Przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu (Internet Explorer 7.0 ani wcześniejsze wersje tego nie robią, natomiast w MSIE 8.0 wszystko jest już w porządku, ale tylko w trybie Standards Compliance), dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie. Umieszcza się w nim treść krótkich cytatów, które nie zawierają żadnych akapitów. Jeśli chcemy zacytować dłuższy fragment tekstu z kilkoma paragrafami, powinniśmy wykorzystać znacznik <blockquote>...</blockquote>.

Przykład:

<cite>Albert Einstein</cite> powiedział:
<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.</q>

Albert Einstein powiedział: Dwie rzeczy nie mają granic: wszechświat i ludzka głupota.

Więcej informacji znajduje się w opracowaniu
<cite>[HTML 4.01 Specification]</cite>

Więcej informacji znajduje się w opracowaniu [HTML 4.01 Specification]

Blok cytowany

<blockquote>...</blockquote>

wyświetlanie: w bloku

Wprowadza blok cytowany, którego możemy użyć np. gdy powołujemy się na jakieś źródła. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Można go używać do zacytowania jakiegoś większego fragmentu, który ciągnie się przez wiele linijek. (zobacz także: Cytat).

UWAGA!
W Strict DTD tekst zawarty w bloku cytowanym, powinien być objęty również innym znacznikiem blokowym, jak np. paragrafem (<blockquote><p>...</p></blockquote>).

Przykład:

To jest blok cytowany.
Używamy go gdy powołujemy się na jakieś źródła, cytujemy czyjąś wypowiedź...
Wszystkie wiersze w tym bloku rozpoczynają się tabulatorem.

Korzystając z atrybutu cite="...", można podać adres źródła, które cytujemy:

<blockquote cite="http://www.w3.org/">
<p>The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.</p>
</blockquote>

Adres

<address>...</address>

wyświetlanie: w bloku ^* 

Wprowadza blok informacji kontaktowych z autorem. Może to być np. adres e-mail lub zwykły adres pocztowy - o ile należy do autora artykułu. Nie należy stosować tego elementu do tworzenia listy adresów w formie książki adresowej.

Blok taki nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. W przeglądarkach najczęściej jest automatycznie napisany czcionką pochyłą.

* Znacznik ADDRESS nie może zawierać elementów blokowych.

Przykład:

Zmiany

1. Treść wstawiona

   <ins>opis</ins>

2. Treść usunięta

   <del>opis</del>

Pozwala podać informację o wprowadzonych na stronie zmianach. Jeśli ostatnio dodane zostały jakieś nowe rozdziały, aby o tym zakomunikować, opis tych zmian można wpisać do znacznika <ins> (taki tekst może zostać automatycznie podkreślony). Natomiast do znacznika <del> wpisujemy opis usuniętych rozdziałów, które nie są już dostępne (zwykle tekst przekreślony).

Przykład:

W tym tygodniu został dodany rozdział, dotyczący obliczania przybliżonych rozwiązań równań różniczkowych metodą Runge-Kutty drugiego rzędu ;-)

Rozdział o trójwymiarowych całkach krzywoliniowych, nie jest już dostępny ;-)

Skrót

wyświetlanie: w linii

1. Zwykły skrót

   <abbr>...</abbr>

2. Akronim

   <acronym>...</acronym>

Znacznik <abbr> pozwala oznaczyć wpisaną formę skróconą jak np.: "inż.", "prof.". Natomiast <acronym> wskazuje na akronim (skrótowiec), czyli wyraz utworzony z pierwszych liter lub pierwszych zgłosek (najczęściej sylab) kilku wyrazów będących zwykle jakąś nazwą, np.: "WWW" (World Wide Web). Akronim od skrótu najłatwiej można odróżnić po tym, że w języku polskim po skrócie stawiamy kropkę, chyba że kończy się ostatnią literą pełnego wyrazu (jak "nr" - numer). Ponadto skróty raczej nie są tworzone od nazw własnych, a podczas czytania tekstu na głos, zwykle rozwija się je do pełnej formy - inaczej niż akronimy, które najczęściej literujemy (AGD - czyt. a-gie-de), a jeśli zawierają samogłoski pomiędzy spółgłoskami - płynnie odczytujemy, jakby były jednym słowem (OBOP - czyt. obop). Zdarzają się również akronimy grupowe - tzw. sylabowce - składające się zwykle z pierwszych sylab kolejnych słów (Pafawag - czyt. pafawag) oraz mieszane - hybrydowe (PZMot - czyt. pe-zet-mot). Wbrew pojawiającym się czasem opiniom, również HTML jest akronimem.

Dla obu tych znaczników zaleca się podać również pełną formę skrótu przy użyciu atrybutu title="...". Dodatkowo, jeżeli jest to nazwa obcojęzyczna, dobrze jest to oznaczyć, za pomocą atrybutu lang="..." [zobacz: Języki]. Przeglądarki takie jak Opera 12- czy Firefox wyświetlą tego typu skróty podkreślone linią przerywaną, wskazując, że po wskazaniu ich myszką, pojawi się dymek z ich pełnym rozwinięciem (przeglądarka Chrome, MSIE 7.0 ani wcześniejsze wersje niestety tego nie robią, a ponadto do wersji 6.0 - włącznie - dla znacznika <abbr> w ogóle nie wyświetla dymku z opisem).

Przykład:

<abbr title="profesor">prof.</abbr>
<acronym lang="en" title="World Wide Web">WWW</acronym>

prof. WWW

Definicja

<dfn>...</dfn>

wyświetlanie: w linii

Wprowadza definicję jakiegoś terminu, która zwykle jest napisana kursywą. (zobacz także: Słownik). Znacznikiem tym powinien być objęty tylko definiowany termin, a nie cała treść definicji.

Przykład:

<dfn>Atrybut</dfn> to wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).

Słownik

<dl>
<dt>Pierwszy termin</dt><dd>Definicja pierwszego terminu</dd>
<dt>Drugi termin</dt><dd>Definicja drugiego terminu</dd>
<dt>Trzeci termin</dt><dd>Definicja trzeciego terminu</dd>
</dl>

wyświetlanie: w bloku

Polecenie tworzy tzw. listę definicyjną, która jest przydatna, gdy piszemy słownik, w którym znajdują się pewne wyrazy i ich objaśnienia. Objaśnienia są zwykle przesunięte bardziej w prawo, dzięki czemu lista staje się czytelniejsza. (Zobacz także: Definicja).

Innym zastosowaniem listy definicyjnej może być zapisywanie dialogów (rozmowy): do znacznika <dt> wpisujemy imię osoby mówiącej, a do <dd> słowa które mówi.

Zwracam uwagę, że w obrębie słownika tekst i inne elementy można wstawiać tylko wewnątrz znaczników terminów i definicji, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:

<dl>
Słownik...
<dt>Termin</dt>
<br />
<dd>Definicja</dd>
<br />
</dl>

Termin definicji (DT) nie może zawierać elementów blokowych.

Przykład:

Atrybut

Wartość powiązana z elementem, składająca się z nazwy i związanej wartości (tekstowej).

HTML (Hypertext Markup Language)

Język znacznikowy służący do tworzenia stron WWW.

Zawartość

Treść związana z elementem w dokumencie źródłowym.

Możliwe jest również tworzenie słownika, w którym pojedyncze pojęcia mają kilka znaczeń albo kilka pojęć oznacza to samo:

Zamek

Urządzenie do zamykania drzwi za pomocą klucza.

Zapięcie wszywane do odzieży.

Warowna budowla mieszkalna.

Auto

Samochód

Dwuśladowy pojazd mechaniczny napędzany silnikiem.

<dl>
<dt>Zamek</dt>
<dd>Urządzenie do zamykania drzwi za pomocą klucza.</dd>
<dd>Zapięcie wszywane do odzieży.</dd>
<dd>Warowna budowla mieszkalna.</dd>
<dt>Auto</dt>
<dt>Samochód</dt>
<dd>Dwuśladowy pojazd mechaniczny napędzany silnikiem.</dd>
</dl>

Wykaz

(lista wyliczeniowa)

wyświetlanie: w bloku

Wypunktowanie (podstawowy) - lista nieuporządkowana

<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

Zwracam uwagę, że w obrębie wykazu tekst i inne elementy można wstawiać tylko wewnątrz znaczników punktów wykazu, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy:

<ul>
Wykaz...
<li>Punkt pierwszy</li>
<br />
<li>Punkt drugi</li>
<br />
</ul>

Przykład:

• Punkt pierwszy
• Punkt drugi
• Punkt trzeci

Wypunktowanie - różne typy

<ul type="rodzaj">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

Atrybut TYPE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

• disc (domyślny)

• circle

• square

Wykaz numerowany (podstawowy) - lista uporządkowana

<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Przykład:

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Wykaz numerowany - różne typy

<ol type="rodzaj numeracji">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Atrybut TYPE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

<ol type="1"> (domyślny)

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

<ol type="I">

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

<ol type="i">

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

<ol type="A">

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

<ol type="a">

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Wykaz numerowany z podaniem początkowego numeru

<ol start="n">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Wartość atrybutu START zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Atrybut START jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Zmiana numerowania "w trakcie"

<ol>
<li>Punkt pierwszy</li>
<li value="n">Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Wartość atrybutu VALUE zawsze musi być liczbą, nawet jeśli numerowanie następuje według liter!

Atrybut VALUE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Edytory (X)HTML posiadają często specjalny generator wykazów, który może ułatwić pracę.

Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu:

<ul style="color: red">
<li><span style="color: black">Punkt pierwszy</span></li>
<li><span style="color: black">Punkt drugi</span></li>
<li><span style="color: black">Punkt trzeci</span></li>
</ul>

• Punkt pierwszy
• Punkt drugi
• Punkt trzeci

Dotyczy to wszystkich typów wykazu:

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

1. Punkt pierwszy
2. Punkt drugi
3. Punkt trzeci

Możliwe jest również określenie innego koloru dla każdego punktu wykazu:

<ul>
<li style="color: red"><span style="color: black">Punkt pierwszy</span></li>
<li style="color: green"><span style="color: black">Punkt drugi</span></li>
<li style="color: blue"><span style="color: black">Punkt trzeci</span></li>
</ul>

• Punkt pierwszy
• Punkt drugi
• Punkt trzeci

Na koniec ważna wskazówka. Często może się zdarzyć tak, że chcemy umieścić wykaz wewnątrz paragrafu. Efekt będzie prawdopodobnie inny niż oczekiwaliśmy. Paragraf nie jest zwykłym elementem blokowym, ponieważ nie może zawierać innych elementów blokowych (m.in. wykazów). Zakończy się on po napotkaniu pierwszego elementu blokowego, nawet przed znacznikiem zamykającym </p>. W języku HTML nie jest to błąd, natomiast w XHTML już tak.

Przykład:

Po wpisaniu:

<p align="center">
Tu rozpoczyna się paragraf...
<ul>
<li>Punkt pierwszy wykazu</li>
<li>Punkt drugi wykazu...</li>
</ul>
...tu powinien skończyć się paragraf.
</p>

otrzymamy:

Tu rozpoczyna się paragraf...

• Punkt pierwszy wykazu
• Punkt drugi wykazu...

...tu powinien skończyć się paragraf.

Jak widać paragraf zakończył się przed wykazem, ponieważ ostatnia linijka nie została ustawiona na środku (tak jak pierwsza). Aby to zmienić, należy rozpocząć nowy paragraf tuż za wykazem i określić dla niego odpowiednie atrybuty lub ewentualnie zamiast paragrafu użyć bloku.

Zagnieżdżanie wykazów

1. Wypunktowanie (podstawowy)

   <ul>
   <li>Punkt pierwszy
   	<ul>
   	<li>Punkt 1.1
   		<ul>
   		<li>Punkt 1.1.1</li>
   		<li>Punkt 1.1.2</li>
   		</ul>
   	</li>
   	<li>Punkt 1.2</li>
   	</ul>
   </li>
   <li>Punkt drugi</li>
   </ul>

2. Numerowanie

   <ol>
   <li>Punkt pierwszy
   	<ol>
   	<li>Punkt 1.1
   		<ol>
   		<li>Punkt 1.1.1</li>
   		<li>Punkt 1.1.2</li>
   		</ol>
   	</li>
   	<li>Punkt 1.2</li>
   	</ol>
   </li>
   <li>Punkt drugi</li>
   </ol>

3. Wykaz mieszany - połączenie obu powyższych

Dzięki możliwości zagnieżdżania wykazów, można stworzyć listę punktów wraz z podpunktami. Podpunkty będą przesunięte bardziej w prawo w stosunku do punktów nadrzędnych, dzięki czemu wykaz będzie wyglądał bardziej czytelnie i estetycznie.

Zauważ, że w składni powyższych poleceń, wykazy bardziej zagnieżdżone są przesunięte w prawo - im bardziej podrzędny wykaz, tym większe jest wcięcie. Nie jest to konieczne, ale bardzo ułatwia zorientowanie się, na którym stopniu zagnieżdżenia aktualnie jesteśmy. Dlatego polecam używanie takiego sposobu wpisywania. Dobrze jest również na samym początku zamykać wszystkie znaczniki <ul>, <ol> oraz <li> (większość edytorów (X)HTML i tak robi to automatycznie), a dopiero potem wpisywać do nich wykazy podrzędne. Dzięki temu unikniemy błędnego wyświetlania, spowodowanego zapomnieniem zamknięcia znacznika.

Kod wykazów podrzędnych wpisuje się wewnątrz znacznika <li>...</li> wybranego punku wykazu nadrzędnego. Pomiędzy dwoma punktami wykazu, tzn. między znacznikami </li> a <li> nie można się znaleźć żaden kod ani tekst, ponieważ jest to błędem!

Przykład:

Wypunktowanie:

• Punkt pierwszy
  • Punkt 1.1
    • Punkt 1.1.1
    • Punkt 1.1.2
  • Punkt 1.2
• Punkt drugi

Numerowanie:

1. Punkt pierwszy
   1. Punkt 1.1
      1. Punkt 1.1.1
      2. Punkt 1.1.2
   2. Punkt 1.2
2. Punkt drugi

Wykaz mieszany:

1. Punkt pierwszy
   1. Punkt I.1
      1. Punkt I.1.a
         • Punkt I.1.a.(1)
         • Punkt I.1.a.(2)
      2. Punkt I.1.b
   2. Punkt I.2
2. Punkt drugi

A oto co należy wpisać, aby otrzymać ostatni wykaz:

<ol type="I">
<li>Punkt pierwszy
	<ol type="1">
	<li>Punkt I.1
		<ol type="a">
		<li>Punkt I.1.a
			<ul type="disc">
			<li>Punkt I.1.a.(1)</li>
			<li>Punkt I.1.a.(2)</li>
			</ul>
		</li>
		<li>Punkt I.1.b</li>
		</ol>
	</li>
	<li>Punkt I.2</li>
	</ol>
</li>
<li>Punkt drugi</li>
</ol>

Pozioma linia

<hr />

Polecenie to pozwala narysować na ekranie poziomą linię. Może ona np. rozdzielać kolejne rozdziały, które różnią się tematycznie, przez co strona staje się bardziej czytelna i przejrzysta.

Wygląd poziomej linii może się różnić w zależności od przeglądarki.

1. Zwykła (domyślnie)

   <hr />

   Przykład:

   Przykład

2. Pozbawiona cieniowania

   <hr noshade="noshade" />

   Atrybut NOSHADE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   Przykład

3. O określonej grubości

   <hr size="y" />

   gdzie "y" oznacza grubość linii (w pikselach).

   Atrybut SIZE jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   Przykład

4. O określonej długości

   <hr width="x" />

   lub

   <hr width="x%" />

   gdzie "x" oznacza długość linii w pikselach, natomiast "x%" oznacza długość linii w procentach ekranu.

   Atrybut WIDTH jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   Przykład

5. O określonym kolorze

   <hr color="kolor" />

   gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

   Atrybut COLOR nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   Przykład

6. O określonym ustawieniu

   <hr align="rodzaj" />

   gdzie jako "rodzaj" należy wpisać:

   • "center" - wyśrodkowanie
   • "left" - ustawienie po lewej
   • "right" - ustawienie po prawej

   Określenie ustawienie ma sens tylko wtedy, gdy jednocześnie podamy długość linii - atrybut width="..." (mniejszy od 100%).

   Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

   Przykład:

   Przykład

Obramowanie

<fieldset>...</fieldset>

Wprowadza obramowanie wokół wybranego fragmentu tekstu.

Prawdziwe zastosowanie znacznika <fieldset> to grupowanie pól formularza.

Wygląd obramowania może się różnić w zależności od przeglądarki.

Przykład:

Polecenie to często stosuje się wraz z: <legend>...</legend>, co pozwala podać tytuł ramki. Po wpisaniu:

<fieldset>
<legend>Opis</legend>
Jakiś tekst
</fieldset>

otrzymamy:

UWAGA! Znacznik <legend>...</legend> (tytuł ramki) musi znajdować się bezpośrednio po znaczniku otwierającym <fieldset>

Komentarz

<!-- Treść komentarza -->

Często zdarza się, że autor dla swojej wygody chciałby umieścić na stronie pewien tekst, który nie będzie widoczny dla normalnych użytkowników. Dzięki temu mógłby zaznaczyć ważne elementy strony lub wprowadzić inne informacje, które nie muszą być wyświetlane na ekranie, ponieważ mogłyby spowodować zaciemnienie właściwej treści.

Do wprowadzenia tekstu, który jest niewidoczny na ekranie, ale istnieje w źródle dokumentu, służy właśnie komentarz. Cały tekst który zostanie do niego wpisany będzie zignorowany przez przeglądarkę, ale może przechowywać ważne informacje dla autora strony (np. prawa autorskie). Oczywiście wewnątrz komentarza zwykłe znaczniki nie są interpretowane (chociaż można je tam wpisać). Komentarz może być wieloliniowy tzn., że może ciągnąć się przez wiele linijek, np.:

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

<!-- zewnętrzny <!-- komentarz wewnętrzny --> zewnętrzny -->

Częstym zastosowaniem komentarza jest również objęcie nim bloku kodu (razem ze znacznikami), który zdecydowaliśmy się chwilowo usunąć ze strony, ale zamierzamy go jeszcze kiedyś (niedługo) wykorzystać. Zaletą takiego sposobu, w stosunku do zwyczajnego usunięcia tekstu z kodu źródłowego strony, jest to, że za jakiś czas możemy ponownie wstawić taki fragment, usuwając tylko znaki komentarza - nie musimy wtedy wpisywać całego kodu od początku:

<!--<p>
Ten fragment pokazuje przykład,
w jaki sposób można używać <b>komentarz HTML</b>...
</p>-->

Należy jednak pamiętać, aby nie obejmować w ten sposób przesadnie długich fragmentów strony, ponieważ niezależnie od tego, że nie są one widoczne na ekranie, to nadal figurują w kodzie źródłowym i spowalniają wczytywanie. Nie są natomiast wczytywane obrazki i inne osadzone pliki. Ponadto trzeba uważać, aby wybrany fragment nie zawierał wstawionych wcześniej komentarzy, ponieważ spowodowałoby to zagnieżdżenie, co jest niedozwolone:

<!--<p>
Ten fragment pokazuje przykład,
w jaki sposób nie można używać <b>komentarza HTML</b>...
<!-- Ten komentarz jest niedozwolony -->
Ciąg dalszy...
</p>-->

Kod poprawny semantycznie

Patrząc na liczbę znaczników, służących do formatowania tekstu na ekranie przeglądarki internetowej, można się zastanawiać: po co jest ich aż tyle? Jaki był sens wprowadzania znacznika <strong>...</strong> (mocne wyróżnienie), skoro właściwie zwykle jest on wyświetlany tak samo jak <b>...</b> (pogrubienie)? Czy nie lepiej tworzyć akapity za pomocą podwójnych znaczników <br /> zamiast <p>...</p>? Czy to aby nie jest pomyłka organizacji W3C, że wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt można uzyskać dobierając odpowiednią czcionkę za pomocą znacznika <font>...</font>?

Otóż na pewno nie jest to pomyłka. W języku (X)HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

1. Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie), U (podkreślenie), S i STRIKE (przekreślenie), FONT (czcionka), BASEFONT (czcionka bazowa), BIG (czcionka powiększona) SMALL (czcionka pomniejszona). Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. Innymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony.
2. Znaczniki semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.: Hn (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), ACRONYM (akronim), DFN (definicja). Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>...</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze zmienionym na czerwono kolorem.

W przypadku znaczników semantycznych to nie sposób formatowania jest najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code> daje do zrozumienia, że jest to fragment kodu komputerowego - np. jakiegoś programu. <acronym>...</acronym> i <abbr>...</abbr> to wspólnie z <q>...</q> i <cite>...</cite> jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje.

Komu to jest potrzebne?

Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób.

Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które odczytują treść stron WWW na głos. Używane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie będzie wiedzieć, że gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast używany syntezator mowy, kiedy natrafi na znacznik <strong>...</strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na nie natrafią, mogą odczytać ich pełną nazwę, a nie literować. Oczywiście najpierw trzeba poinformować syntezator, że dany wyraz jest skrótem lub akronimem, a nie jakąś specjalną nazwą, którą używasz w swoim tekście. Jeżeli używasz skrótów lub akronimów, które są dość mało znane, zalecane jest dodanie atrybutu title="...", w którym można umieścić pełne rozwinięcie nazwy. Wyeliminuje to konieczność domyślania się rozwinięcia przez syntezator i ewentualnych pomyłek (jeden akronim może mieć zupełnie różne rozwinięcia w różnych dziedzinach wiedzy). Ważne jest również, aby prawidłowo odróżniać akronimy (<acronym>...</acronym>) od zwykłych skrótów (<abbr>...</abbr>), ponieważ może to mieć wpływ na sposób ich odczytania przez syntezator mowy - skróty zwykle rozwija się do pełnej formy, podczas gdy akronimy literuje.

Jeżeli nie sądzisz, aby Twoja strona mogła być kiedykolwiek odwiedzona przez osobę niewidomą (nigdy tego nie zakładaj, bo możesz się bardzo zdziwić!), na pewno nie możesz zlekceważyć, że właściwe oznaczanie tekstu za pomocą znaczników semantycznych ma niebagatelne znaczenie dla robotów wyszukiwarek sieciowych. Są to aplikacje, które przez cały czas szukają nowych stron w Internecie i sprawdzają, czy stare się nie zmieniły. Za pomocą specjalnego algorytmu informatycznego przetwarzającego treść odwiedzanych stron, zapisują linki do nich w bazie danych przyporządkowując je do odpowiednich słów kluczowych (haseł). Z tej bazy danych korzystają następnie wyszukiwarki sieciowe, takie jak Google, kiedy użytkownicy przeszukują Internet za ich pośrednictwem. Aby serwis WWW mógł być popularny, konieczne jest takie zbudowanie treści, aby była ona przyjazna dla robotów wyszukiwarek, ponieważ inaczej trudno go będzie komukolwiek odszukać. Może to zabrzmi dziwnie, ale można powiedzieć, że roboty wyszukiwarek są "niewidome"! Dlatego na pewno docenią, że chcesz im pomóc w prawidłowym zaindeksowaniu (zapisaniu informacji o stronie w bazie danych) swojej strony. Mogą się odwdzięczyć oczywiście wyższą pozycją na liście wyszukiwania, co bezpośrednio wpłynie na popularność serwisu WWW.

Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów użyjesz znaczników <h1>...</h1> - <h6>...</h6>, czy może <font size="7">...</font> - <font size="1">...</font>. Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic wspólnego z zawartością rozdziału, co może mieć miejsce dla elementu FONT. Tak na marginesie: wiele osób próbuje oszukać wyszukiwarki, umieszczając na stronie tytuły w taki sposób: <h1><font size="1">...</font></h1>. Powoduje to wstawienie tytułu pierwszego rzędu (czyli najważniejszego dla wyszukiwarek) miniaturową czcionką. W tym przypadku efekt jednak może być odwrotny, ponieważ wyszukiwarki już dawno uodporniły się na takie sztuczki. W skrajnym przypadku taka strona może zostać zupełnie usunięta z wyszukiwarki!

Podsumowanie

Zrozumienie istoty poprawności semantycznej kodu (X)HTML jest niezwykle ważne. Niejednokrotnie można w ten sposób odróżnić osobę doświadczoną od nowicjusza. Stosuj znaczniki formatujące tylko wtedy, gdy obejmowany nimi tekst nie niesie ze sobą jakiegoś specjalnego znaczenia, a zależy Ci natomiast na tym, aby w każdych warunkach był wyświetlony tak, jak to przewidziałeś. Znaczniki semantyczne należy używać wszędzie tam, gdzie chcemy wskazać specjalne znaczenie obejmowanego nimi tekstu i jest to dla nas ważniejsze, niż jednoznaczne określenie jego wyglądu. Szczególnie przyswój sobie przeznaczenie następujących znaczników: Hn (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ABBR (skrót), ACRONYM (akronim).

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.

• Nagłówek i treść
• Odsyłacze

• Do góry
• Strona główna