Język (X)HTML (w wersji Transitional) jest bardzo tolerancyjny. Można stosować znaczniki z różnych wersji języka, można też znaczniki przeznaczone do jednych celów używać do zupełnie innych i odwrotnie. W każdym z tych przypadków powstanie strona wyglądająca poprawnie. Z wierzchu nie widać różnicy :-) Tak jeszcze kilka lat temu wyglądało 99,9% stron :-) Dziś już trudno uznać je za nowoczesne, choć ciągle jeszcze są twórcy, którzy piszą w ten posób. Nie jest to korzystne.
Język (X)HTML dzieli się na kilka typów. Ja używam najczęściej XHTML 1.0 :-) Innym popularnym jest HTML 4.01. XHTML rozpoczyna się deklaracją doctype, która wygląda mniej więcej w taki sposób:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ta deklaracja determinuje, jakich znaczników będę używał. Warto zapoznać się ze specyfikacją danego języka. Np. xhtml 1.0 charakteryzuje się tym, że wszystkie znaczniki piszemy małą literą (np. <p>, nie: <P>). Wszystkie znaczniki są domknięte i nie zazębiają się (np. <p><span><strong>tekst</strong></span></p>, nie: <p><span><strong>tekst</p></span>, <br />, nie: <br>). Itd.
Jeśli popełnimy tutaj błędy - jeśli piszemy w języku typu Transitional - strona będzie wyglądać dobrze. Transitional jest wersją przejściową i pobłażliwą. Warto jednak trzymać się ściśle znaczników właściwych dla konkretnego języka. Można zadeklarować typ Strict - wówczas w przypadku błędów strona po prostu wyświetli się źle.
Inną sprawą jest używanie znaczników zgodnie z ich przeznaczeniem
Kiedyś popularne były strony z layoutem opartym na tabelach. Znacznie lepszym rozwiązaniem - w dodatku zgodnym ze standardami - jest korzystanie raczej ze struktury blokowej. Taka strona opiera się na znacznikach <div>. Działąją one nieco inaczej, ale można się przyzwyczaić. Tabele też można stosować, ale tylko do treści tabelarycznych. Są to takie, które po obróceniu o 90 st. nie stracą sensu :-)
Innym znacznikiem, często ignorowanym przez twórców, są znaczniki listy <ul> <ol> <li>. Warto je stosować we wszystkich wyliczeniach, a także w przypadku menu strony (czy to poziomego czy pionowego).
Kolejny taki znacznik, to znacznik nagłówka <h1><h2><h3><h4><h5><h6>. Owszem, tekst można pisać nie używając takich znaczników, paragrafy oddzielając <br />, nagłówki tworząc pogrubiając i powiększając zwykły tekst. Pociąga to za sobą szereg mankamentów. Jednym z nich jest gorsza pozycja w przeglądarce. Roboty skanujące gubią się, nie rozpoznając prawidłowo poszczególnych elementów strony. Źle charakteryzując treść. Dość wspomnieć, że słowa zawarte wewnątrz znacznika nagłówka są traktowane jako ważniejsze.
Oddzielenie warstwy prezentacyjnej od kodu strony
Jest to zasada, która nabiera znaczenia i przyjdzie czas, kiedy język wymusi na nas jej stosowanie. Kod strony powinien być w maksymalny sposób oczyszczony z informacji, które mówią o wyglądzie. Lepiej odzywczaić się od znaczników typu <FONT><B><I><U> itd. Wkrótce zresztą prawdopodobnie znikną one z języka. Warto zastosować osobny plik stylów, a w znacznikach, które chcemy zmienić, umieścić odpowiednie klasy i idenfyfikatory.
Idealny dokument to taki, który bez swojego pliku CSS ma formę czystego niesformatowanego tekstu. Czasem ten ideał nie jest prosty, ale warto spróbować zrobić jak najwięcej, aby się do niego zbliżyć podczas tworzenia swojego dokumentu. Tyczy to zresztą wszystkich zasad, nadmienionych w tym wpisie :-)
W własnego warszatu przyznam, że ja niekiedy umieszczam informacje o stylach w nagłówku. Nieraz bezpośrednio w znacznikach. Niekiedy jest mi tak wygodniej i myślę, że na krótszą metę nie jest to błąd (zwłaszcza, jeśli cała strona składa się z jednego lub kilku plików). Jednak tworząc od podstaw dużą stronę, warto wszystko od razu przenieść do pliku css.
Niektóre zalety stosowania standardów
- większa szansa, że przyszłe wersje przeglądarek będą poprawnie wyświetlać stronę
- zbliżenie wyglądu strony w poszczególnych przeglądarkach
- łatwiejsza optymalizacja SEO
- lepsza obługa strony przez urządzenia wspomagające (np. dla osób niepełnosprawnych)
- ładniejszy i bardziej przejrzysty kod strony (lepiej się w nim połapią osoby, które będą z niego korzystać oprócz nas)
- krótszy czas generowania strony
- mniejszy rozmiar strony
- bardziej jednorodna strona, możliwość wieloktronego odnoszenia się do tych samych stylów