Składnia XHTML

Składnia XHTML jest zgodna ze składnią XML

XHTML składa się przede wszystkim z tekstu, w który wplecione są znaczniki (inaczej tagi, ang. tags) oznaczające różne elementy języka. Elementy to np. akapity, nagłówki, odnośniki.

Układ tekstu w pliku XHTML (łamanie wierszy, odstępy) nie ma wpływu na to, jak tekst będzie prezentował się w przeglądarce. Wyglądem tekstu steruje się za pomocą odpowiednich elementów XHTML i współpracującego z nim języka CSS.

Znaczniki i elementy Bug w IE

Każdy element zaczyna się i kończy znacznikiem. Między znacznikiem otwierającym, a zamykającym znajduje się zawartość elementu. Element może zawierać tekst oraz inne elementy (dla przykładu akapit może zawierać tekst i odnośniki).

Każdy znacznik otoczony jest nawiasami trójkątnymi (<>). Wielkość liter ma znaczenie (<znacznik> to nie to samo, co <ZnaczNik>), więc w nazwach znaczników i atrybutów należy używać tylko małych liter.

Znacznik otwierający (rozpoczynający) element zaczyna się od nazwy elementu.

 <kot>
 Znacznik otwierający (kot jest odtąd)

Znacznik zamykający (kończący) element przed nazwą ma znak /.

 </kot>
 Znacznik zamykający (dotąd)

 <kot>mysz</kot>
 Element kot zawierający tekst „mysz”.

Jeśli element jest pusty (nie zawiera tekstu ani innych elementów), zapisuje się go tak:

 <kot></kot>
 Pusty element

Można też użyć skróconej składni, która znaczy dokładnie to samo, co powyższa konstrukcja:

 <kot />
 Pusty element — znacznik jednocześnie otwierający i zamykający

Elementy mogą być zagnieżdżone

 <kot><łepek><nosek /></łepek></kot>

ale nie mogą nachodzić na siebie, co oznacza, że element, który był otwarty jako ostatni musi być zamknięty jako pierwszy. Nie można przeplatać ze sobą znaczników.

<kot><pazury><lewa-łapa></pazury></lewa-łapa><prawa-łapa><pazury></prawa-łapa></pazury></kot>
Przeplatanie znaczników jest niedozwolone.
<kot>
 <lewa-łapa>
  <pazury></pazury>
 </lewa-łapa>
 <prawa-łapa>
  <pazury></pazury>
 </prawa-łapa>
</kot>
Poprawna konstrukcja — najpóźniej otwarty element jest zamykany najwcześniej.

Atrybuty

Atrybutów używa się do określenia cech elementu. Definiuje się je tylko w znaczniku otwierającym (w tym w znaczniku określającym pusty element) i dotyczą one całego elementu. Każdy atrybut ma swoją nazwęwartość.

 <kot imie="mrucyfon" />
 Znacznik kot posiadający atrybut imie o wartości mrucyfon

Jeden element może mieć dowolnie dużo atrybutów, ale każdy musi mieć swoją unikalną nazwę. Nie można w jednym znaczniku dwa razy definiować atrybutu o tej samej nazwie:

<kot imie="mruczek" imie="kicius" />
Błędny zapis. 
<kot imiona="mruczek kicius" />
<kot imie="mruczek" drugie-imie="kicius" />
Poprawne zapisy.

Nie może być atrybutu bez wartości. Wartość zawsze musi być ujęta w cudzysłów. Kolejność atrybutów jest bez znaczenia.

Białe znaki

Składnia jest bardzo elastyczna, jeśli chodzi o białe znaki. Można wstawiać spacje, znaki tabulacji, a nawet przejścia do nowej linii w następujących miejscach:

 <znacznik 
 atrybut 
 = 
 "przykładowa
 wartość"
 >
 <inny-znacznik
 />
 </znacznik
 >

Powyższa konstrukcja jest równoważna z:

 <znacznik atrybut="przykładowa wartość"> <inny-znacznik/> </znacznik>

Przykłady:

Element x zawierający dwa puste elementy y oraz tekst:

 <x><y />tekst<y></y></x>

Element x zawierający jeden element y zawierający tekst:

 <x><y>tekst</y></x>

Praktyczny przykład XHTML:

 <h1>Witaj świecie!</h1>
 <p>To jest mój <em>pierwszy</em> fragment HTML.</p>

Encje (ang. entities)

Aby umieścić w tekście znaki <, >, "& tak, aby nie zostały zinterpretowane jako część składni XHTML, należy użyć specjalnego zapisu:

Znak Encja Nazwa Kiedy używać
< &lt; Less than Tam, gdzie mogą wystąpić znaczniki
> &gt; Greater than Do pary z &lt; (opcjonalnie)
" &quot; Quote W treści atrybutów otoczonych cudzysłowem
' &apos; Apostrophe Wystąpienie w treści znaku apostrofu (tylko XHTML i XML)
& &amp; Ampersand Zawsze, gdy chce się wypisać & (również w atrybutach)

Znaki w tekście automatycznie zamienia na encje funkcja PHP htmlspecialchars(), którą ze względów bezpieczeństwa należy używać za każdym razem, gdy wypisuje się tekst na stronie.

Istnieje jeszcze wiele innych encji, ale tylko te są niezbędne. Pozostałe znaki specjalne lepiej przedstawić za pomocą odpowiedniego kodowania znaków.

 <p>Akapit umieszcza się w elemencie &lt;p&gt;</p>

Komentarze

Komentarz zaczyna się od <!--, a kończy na -->. Komentarze mogą być tylko między znacznikami i nie mogą zawierać pary minusów.

Ćwiczenia

Ćwiczenia ze składni XML

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.


Zmodyfikowano: 01.04.2007, 11:16