XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).
Kilka różnic pomiędzy HTML a XHTML 1.0 nazwy znaczników i atrybutów, oraz wartości atrybutów wyliczeniowych w XHTML piszemy tylko małymi literami
Kilka różnic pomiędzy HTML a XHTML wszystkie znaczniki w języku XHTML muszą zostać zamknięte. Dlatego znaczniki elementów takich jak img, br, hr, meta, które w HTML nie posiadały znacznika zamykającego, należy zakończyć znakami />. Dodatkowo, aby zapewnić zgodność z przeglądarkami HTML, znaki /> należy poprzedzić spacją. Przykład: <img src= obrazek.png /> Pozostałe elementy muszą posiadać znacznik zamykający, nazwet jeśli ich zawartość jest pusta: <strong></strong> <div></div> Zasada ta dotyczy również elementów, dla których znacznik zamykający w HTML był opcjonalny, czyli p oraz li.
Kilka różnic pomiędzy HTML a XHTML Wartości atrybutów znaczników w XHTML należy zawsze otoczyć cudzysłowami lub apostrofami: <td colspan= 3 rowspan= 2 id= pozycja5 > W HTML dopuszczalne było opuszczenie cudzysłowów: <td colspan=3 rowspan=2 id=pozycja5>
Kilka różnic pomiędzy HTML a XHTML W HTML atrybuty logiczne nie musiały mieć nadanej wartości: <option value= 7 selected>niedziela</option> W XHTML wszystkie atrybuty muszą mieć nadaną wartość: <option value= 7 selected= selected >niedziela</option> <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <frame noresize="noresize" />
Kilka różnic pomiędzy HTML a XHTML W języku HTML istniały dwa atrybuty służące do identyfikacji elementu: id oraz name. W XHTML poprawny jest tylkoatrybut id.
Kilka różnic pomiędzy HTML a XHTML Jeśli zawarte wewnątrz dokumentu arkusze stylów lub skrypty zawierają znaki & lub <, zawartość elementów style i script należy umieścić w sekcji CDATA <style type="text/css"><![cdata[ arkusz stylów ]]></style> alternatywnie można użyć zewnętrznego arkusza stylów / skryptu (jest to rozwiązanie bezpieczne, gdyż przeglądarki mogą nie obsługiwać takiego kodu jak powyższy)
Kilka różnic pomiędzy HTML a XHTML Nagłówek dla XHTML 1.0 w wersji strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
Kilka różnic pomiędzy HTML a XHTML Dokumenty w języku XHTML muszą być składniowo poprawne, żeby mogły być wyświetlone. Jeśli w pliku XHTML znajdzie się choć jeden błąd składni, przeglądarka wyświetli informację o błędzie.
język dokumentu HTML XHTML 1.0 XHTML 1.1 XHTML 2.0 text/html text/html, application/xhtml+xml application/xhtml+xml application/xhtml+xml
Semantyczność kodu XHTML semantyka, semazjologia nauka o znaczeniu i zmianach znaczeń wyrazów; (s. logiczna) nauka o stosunkach między wyrażeniami, o stosunku wyrażeń do oznaczanych przedmiotów i stosunku wyrażeń do mówiącego podmiotu. (słownik wyrazów obcych i zwrotów obcojęzycznych Władysława Kopalińskiego)
Idealnie semantyczny kod XHTML powinien spełniać poniższe trzy warunki (Gajda): 1) dostarczenie wszystkich danych dokumentu XHTML w postaci tekstowej 2) rezygnacja z umieszczenia w dokumencie elementów i znaczników pełniących funkcję wyłącznie reprezentacyjną. 3) Identyfikatory i nazwy klas odnoszą się do spełnianych przez nie funkcji w dokumencie, a nie do wyglądu strony Semantyczność kodu możemy też krótko określić jako wykorzystanie elementów HTML zgodnie z ich przeznaczeniem. (www.browsehappy.pl)
<div id= header >nagłówek</div> <ul id= menu > <li><a href= dokument1.php >dokument1</a></li> <li><a href= dokument2.php >dokument2</a></li> <li><a href= dokument3.php >dokument3</a></li> </ul> <div id= content >treść dokumentu</div> <div id= footer >stopka</div>
menu <ul> <li> <a href= link1.php > link1</a> </li> <li> <a href= link1.php > link1</a> </li> <li> <a href= link1.php > link1</a> </li> </ul>
Panel nawigacyjny <p> Jesteś w <a href="link1.html">link1</a> > <a href="link2.html">link2</a> </p>
listing <div class="listing"> <pre> for ($x=0; $x<=$y; $x+=2) { print ( $x<br /> ); } </pre> <p>listing 1. pętla for</p> </div>
- wstawki kodu można objąć znacznikami pre - logo możemy umieścić w tle elementu div
stopka <div id= stopka > <p>akapit1</p> <p>akapit2</p> </div>
elementy tekstowe umieszczone wewnątrz akapitu takie jak nazwy plików, zmiennych, wyrażenia matematyczne, nazwy programów, nazwy opcji, skróty klawiszowe czy tytuły książek możemy objąć znacznikami span: <span class= math > (2x+7)dx</span> <span class= file >plik.pas</span>
dialog <ol> <li> <cite>watson</cite> <blockquote><p>to on!</p></blockquote> </li> <li> <cite>holmes</cite> <blockquote><p>halo! Stop!</p></blockquote> </li> </ol>
bibliografia <ol> <li> <cite>pozycja 1</cite> </li> <li> <cite>pozycja 2</cite> </li> </ol>
ilustracja <div class="compaundimg"> <img src="img.jpg" alt="rysunek" /> <hn>rys. 1.</hn> <p>podpis rysunku</p> </div>
Przygotowane głównie na podstawie materiałów Włodzimierza Gajdy dostępnych na stronie www.gajdaw.pl