ISSN 1312-0379
За сайта | Карта на сайта | Контакт | F.A.Q.

Главна > Статии > Код

Направи го XHTML. От Георги Варзоновцев.

Спомням си преди как преди години се бях озовал в един чат заедно с уеб дизайнер от Великобритания. Когато го попитах какво прави, той ми отговори, че учи XHTML. Аз дотогава бях чувал тази абревиатура само няколко пъти и си нямах и представа какво означава. И разбира се веднага му изсмях, когато заяви, че това е нещото, което ще измести традиционния HTML само след няколко години.

Е, тези няколко години минаха и думите му се сбъднаха. Единственото, което можем да направим сега е да съжаляваме за пропуснатото време и веднага да започнем да наваксваме.

Какво е XHTML?

Самата абревиатура идва от Extensible HyperText Markup Language (ще рече разтегнат, разширен HTML).

Всъщност всички знаете какво е HTML - основният език в Мрежата. Но от доста време насам W3C препоръчва използването не на HTML, а на XHTML. XHTML е хибриден език базиран на XML. Това означава, че макар да изгежда и работи като HTML, основните принципи, върху които е изграден са тези на XML.

(XML (Extensible Markup Language) е супер езикът, чрез който програмистите могат да разработват други езици и специализирани приложения. XHTML е един такъв език. Програмистите вече използват XML, когато създават бази данни и каталози. Освен това XML е основа за такива протоколи като Scalable Vector Graphics (SVG), Synchronized Multimedia Integration Language (SMIL), Wireless Markup Language (WML) и Platform for Privacy Preferences (P3P).)

Правилата на XHTML

Преминаването от HTML към XHTML не е никак трудно особено ако от много време работите с HTML. Просто трябва да се следват няколко правила:

Началото е важно - DOCTYPE & Namespace

В началото на всеки HTML документ стои таг с описание на вида на документа - DOCTYPE. Той указва на браузърите правилата, според които трябва да показват вашия документ. В старите браузъри този таг нямаше значение, но в последните версии (от 5.х нагоре) това вече не е така. Особено що се отнася до XHTML. Ето защо всички страници трябва да започват със следния таг:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Този таг стои в самото начало на XHTML документа - преди <HEAD> тага. Вижте сорса (IE: View -> Source; Netscape: View -> Page Source) на тази страница, за да се запознаете с правилната употреба на този таг.

Освен него в началото на документа се добавя и следния ред:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

xml:lang и lang елементите се отнасят до езика на документа. В случая той ще бъде възприеман като английски. Ако искате езикът да бъде например български този ред ще изглежда така:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" lang="bg">

Както може би забелязахте разглеждайки кода на тази страница първият ред е следният

<?xml version="1.0" encoding="utf-8"?>

Този пролог е част от спецификацията на езика XML и чрез него се означава, че даденият документ е XML съвместим. Това създава проблеми с някои браузъри, които нямат никаква XML съвместимост, но техният дял е твърде малък, за да се притеснявате.

Осен това този пролог е важен за документите, които са на език различен от английския, т.е. за много от страниците, които създаваме тук в България. Чрез него се определя каква кодова таблица да се използва. Ако наистина не искате да го използвате можете да прибегнете до добрия стар начин за определяне на кодовата таблица за текущия документ, чрез META таг:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Пишете всички тагове с малки букви

За разлика от HTML, XML прави разлика между главни и малки букви. Всички тагове и атрибути в XHTML трябва да се изписват с малки букви.

Ето защо ако ред във вашия стар доумент би могъл да изглежда така:

<TITLE>GROOVE MANIFESTO</TITLE>

То във валидния XHTML документ той трябва задължително да бъде преобразуван така:

<title>GROOVE MANIFESTO</title>

По същия начин <P> става <p>, <BODY> става <body> и т.н.

Всички променливи трябва да са в кавички

В HTML нямаше значение дали ще напишем border=0 или border="0". В XHTML кавичките са абсолютно задължителни.

Затваряйте всички тагове

Досега повечето браузъри толерираха мързела. Можехме да отваряме колкото си искаме <p> и <li> тагове без да ги затваряме съответно с </p> и </li>. Но това не важи за XHTML.

Всеки таг трябва да бъде затворен:

<p>This is valid XHTML.</p>
<p>I close my tags after opening them.</p>

Затваряйте и "празните" тагове

"Празни" тагове са тези, които нямат затварящ таг. Това са например <img> и <br> таговете. В XHTML дори и те трябва да се затварят. Това става като се добавя наклонена черта по този начин:

<br />

<img src="mypic.gif" />

Важно е да се отбележи, че преди тази наколонена черта има и празен интервал. Той се добавя, за да не предизвиква объркаване в по-старите браузъри.

Прескачащи се тагове

Ако си мислите, че няма никакво значение ако напишете:

<p>Имало едно време голям и <strong>лош вълк.</p></strong>

мога да ви уверя, че според XHTML дълбоко се лъжете. Таговете в XHTML не могат да се "прескачат". Ето защо в XHTML документа единствено правилно ще е ако напишете следното:

<p>Имало едно време голям и <strong>лош вълк</strong>.</p>

Структурата е важна

Дотук разгледахме формалната страна на прехода към XHTML. За да бъде съвеста ни чиста обаче, трябва да вникнем навътре в нещата - в същността на XHTML.

XHTML насърчава създаването на логична структура на документите. Под логична структура се разбира употребата на правилните тагове за определянето на функциите на отделните структурни елементи - заглавия, параграфи, списъци и т.н.

Казано с други думи - когато пишете текст, който ще бъде публикуван в мрежата (или пък когато конвертирате съществуващи текстови документи в уеб страници) - мислете си като за обикновен план.

<h1>Моята тема</h1>

<p>Встъпителен текст</p>

<h2>Подточка</h2>

<p>Съответстващ текст</p>

Много пъти съм виждал как се използват <FONT> тагове или CSS стилове (напр. <p class="heading"), за да се определи външния вид на заглавието. Освен това много дизайнери, когато искат да увеличат размера на шрифта просто го форматират като заглавие, въпреки че съответният текст не е заглавие. Всичко това е погрешно.

По същата логика ако досега сте правили това...

първо <br />
второ <br />
трето <br />

...сега би трябвало да използвате за същата цел номериран или обикновен списък:

<ol>
<li>първо</li>
<li>второ</li>
<li>трето</li>
</ol>

XHTML насърчава дори още по-голямо разделяне на съдържанието от оформлението. Ето защо трябва да използвате преди всичко стилове, за да оформяте външния вид на съдържанието, вместо да разчитате на структурните тагове на XHTML.

По този въпрос можете да научите повече от тези статии:

По дяволите развалените барузъри от Джефри Зелдман
Едно пътешествие от трикове към стандарти от Джефри Зелдман
CSS - пълно ръководство

Валидност на документите

Както в реалния живот не можем сами да си издаваме паспорти и да печатаме пари, така и XHTML документите ви трябва да бъдат проверени (валидирани) от World Wide Web Consortium. За целта просто запомнете следния адрес:

validator.w3.org

Проверявайте всеки документ за валидност и поправяйте грешките докато е време. (За целта са създадени някои удобни програми, но за това друг път.)

Ползата от XHTML

Както видяхме, преходът от HTML към XHTML е нещо съвсем лесно. Но всичко това не е самоцелно упражнение, а има следните големи преимущества:

Безболезнен преход към по-напреднала технология
Мрежата върви към XML, технология разширяваща възможностите на разработчиците многократно. Създаването на валидни и добре оформени XHTML страници е най-лесният начин да се започне този преход. Единственото условие е да научите онези прости правила, които разгледахме по-горе.
По-чист, по-логичен код
XHTML създава единство в структурата на различните документи. Правилата на XHTML възстановява структурната цялост на документите, която до този момент беше дълбоко пренебрегвана. Това е важно, когато се работи с много файлове принадлежащи на един по-голям сайт, защото улеснява многократно работата във всички аспекти (създаване, поддръжка, подмяна, търсене и т.н.). Освен това в резултат размерът на страниците ви (в КВ) намалява и съответно времето за тяхното зареждане, което също е много важно.
Работа с множества усторйства и платформи
За разлика от старите HTML страници, валидните и добре оформени XHTML страници лесно могат да бъдат показвани от мобилни телефони, устройства с безжичен достъп, Брайлови четци и други устройства за достъп към Интернет. Освен това тези страници ще разботят във всички браузъри, независимо от версията и производителя им.
По-голяма достъпност
XHTML страниците се създават по строги правила и принципи, които допринасят за увеличаването на достъпността на тези страници (достъпност за хора с физически недостатъци, които стават все повече в Мрежата).

Заключение

След всичко това нямам какво да добавя. Доказателството, че XHTML не е трудно нещо е сайтът, който гледате в момента.