A | A | A

PODSTAWY KODOWANIA XHTML

Poprawne kodowanie pozwala na łatwiejsze odbieranie treści strony zarówno użytkownikom jak i silnikom wyszukiwarek. Treść jest bardziej przyswajalna jeśli podzielona jest na mniejsze fragmenty, takie jak nagłówki, paragrafy, listy wypunktowane itp. Wszystkie te znaczniki jak i ich atrybuty powinny być zakodowane przy użyciu przejrzystej i dobrze sformatowanej składni.

Nagłówki

Używane są do nadania tytułów odpowiednim fragmentom tekstu. Nagłówki w XHTML mają przedział od <h1> do <h6>, gdzie <h1> jest najważniejszym, głównym tytułem a kolejne są podtytułami o coraz niższej wadze. Strona internetowa powinna rozpoczynać się od nagłówka <h1> po którym następują kolejne z niższych poziomów.

Nagłówki - przykład kodu i podgląd w przeglądarce

Listy

W języku XHTML dostępne są trzy rodzaje list: wypunktowane (<ul>), numerowane (<ol>) oraz listy definicji (<dl>). Listy wypunktowane powinny być używane aby wyświetlić elementy, które nie muszą być zorganizowane w określonej kolejności, np. lista dostępnych kolorów. Elementy listy będą wyświetlone ze znacznikiem (czarnym punktem) z lewej strony. Indywidualny element listy definiowany jest przy użyciu znacznika <li>.

Lista wypunktowana - przykład kodu i podgląd w przeglądarce

List numerowanych należy używać w przypadku gdy elementy listy powinny pojawić się w pewnej kolejności, np. instrukcje krok po kroku. Podobnie jak w przypadku listy wypunktowanej indywidualny element listy tworzy się za pomocą znacznika <li>, lecz obok każdego elementu pojawi się odpowiadający mu numer.

Lista numerowana - przykład kodu i podgląd w przeglądarce

Listy definicji stosuje się w przypadku gdy podawane są terminy wraz z ich objaśnieniami. Listy te różnią się od poprzednich tym, że pojedynczy element listy składa się z dwóch części: wyrażenia (<dt>) oraz opisu (<dd>).

Lista definicji - przykład kodu i podgląd w przeglądarce

Zagnieżdżanie list – istnieje możliwość tworzenia podlist poprzez umieszczenie elementu listy wewnątrz innej listy. W ten sposób tworzone są najczęściej wielopoziomowe nawigacje stron internetowych.

Zagnieżdżanie list - przykład kodu i podgląd w przeglądarce

Tabele

Tabele stosowane są do prezentacji danych tabularycznych i składają się z kolumn i wierszy. Istnieje klika znaczników pozwalających poprawnie zdefiniować tabelę w języku XHTML:

  • <table> - tworzy tabelę
  • <caption> - zapewnia opis zawartości tabeli
  • <tr> - rozpoczyna nowy wiersz
  • <th> - rozpoczyna komórkę tabeli zawierającą nagłówek kolumny
  • <td> - rozpoczyna komórkę tabeli zawierającą dane
Tabela - przykład kodu i podgląd w przeglądarce

Obrazy

Zadaniem znacznika <img /> jest dołączenie obrazu/grafiki do strony WWW. Zgodnie z wymaganiami specyfikacji XHTML każdy znacznik obrazu musi zawierać atrybut alt – alternatywny tekst dla obrazu. Atrybut ten powinien zawierać zwięzły opis zawartości obrazu. Tekst ten wyświetlany jest na stronie podczas gdy obraz jest niedostępny, użytkownik zablokował w przeglądarce wyświetlanie obrazów lub użytkownik z upośledzeniem wzroku korzysta ze specjalnej przeglądarki odczytującej na głos zawartość dokumentu. Tekst ten jest również brany pod uwagę przez wyszukiwarki internetowe. Wskazane jest także, aby znacznik obrazu zawierał atrybuty width i height (szerokość i wysokość). Własności te można przypisać obrazom za pomocą kaskadowych styli CSS ale spowoduje to nieco dłuższe ładowanie strony w przeglądarce.

Obraz - przykład kodu i podgląd w przeglądarce

Przedstawione wyżej znaczniki XHTML są jednymi z ważniejszych lecz są tylko namiastką wszystkich dostępnych tagów. Opisanie całego spektrum języka mogłoby stanowić oddzielny temat rozważań. Kilka wymienionych przykładów ma na celu zilustrowanie największego atutu XHTML a mianowicie faktu, że może on przekazać nie tylko dane ale także informacje na temat tych danych. Wyświetlenie treści za pomocą znaczników określających jej znaczenie oznacza semantyczność kodu. Inaczej mówiąc tagi języka XHTML pozwalają nie tylko na wyświetlenie treści ale także nadanie jej pewnego rodzaju etykiet. To z kolei zwiększa szanse na poprawne zrozumienie treści nie tylko przez użytkownika ale także przez maszyny. Aby osiągnąć poprawność semantyczną kodu należy podejść logicznie do programowania strony. Jeśli wyświetlany jest tytuł – należy użyć znacznika <h…>. W przypadku paragrafu – znacznika <p>. Gdy na stronie cytowany jest fragment czyjejś wypowiedzi zaleca się użycie znacznika <blockquote> itd. Elementy użyte w ten sposób nadadzą treści znaczenie a także stworzą solidną strukturę dokumentu.

Dobry, poprawnie semantycznie kod ma wiele zalet. Jest dużo łatwiejszy w utrzymaniu i rozbudowywaniu. Będzie zrozumiały dla innych programistów – w chwili programowania i w przyszłości. Kod semantyczny jest przyjazny dla silników wyszukiwarek a strony o poprawnej strukturze wyświetlane są na lepszych pozycjach w listach wyników. Semantyczne programowanie ma jeszcze dodatkową, prawdopodobnie najważniejszą, zaletę – zwiększa dostępność dokumentu.


Skocz do góry strony ↑