Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Задължителни xHTML елементи 3

Сподели урока

В Интернет има твърде много сайтове, които са изградени с невалиден xHTML код. Грешките в повечето случай остават незабелязани от потребителите, но те се отразяват на бързодействието на сайта, неговата структурата, а понякога и в начина на работа.

Много е важно да разберем, че писането на валиден (и добре структуриран) код не е губене на време, а напротив, увеличаване на достъпността, по-добра съвместимост с бъдещи версии на различните браузъри и е лесен за поддръжка и обновяване.

За да бъде една страница валиден xHTML документ, тя трябва да съдържа няколко задължителни елемента.

Най-важните са:

  • DOCTYPE декларация
  • html
  • head
  • title
  • body

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

  • Всички имена на атрибути трябва да са с малки букви;
  • Стойността на всеки атрибут трябва да бъде в кавички;
  • Забранено е съкратеното изписване на някои атрибути.

Нека разгледаме всяка точка поотделно.

Задължителни елементи в xHTML

DOCTYPE декларация

DOCTYPE не е истински таг, но е важна част от xHTML. Със сигурност ще ми трябва един цял урок, за да опиша всичко свързано с него, но в няколко реда ще се опитам да представя най-важното, което е полезно да се знае.

DOCTYPE всъщност е декларатор, който води до така наречения Document Type Definition (DTD). Самият DTD е идентификатор, който казва на браузъра коя версия на HTML или xHTML използваме за написването на нашата страница.

Използването на правилен DOCTYPE е стандарт, който поставяме в началото на документа (преди отварящия таг <html>). Правилният избор на DOCTYPE ще ни помогне в писането на валиден HTML или xHTML код, за който сме сигурни, че се интерпретира по един и същ начин във всички браузъри.

Със стандартизирането на xHTML 1.0 през 2000 година (да, точно така, xHTML е стандарт вече почти 12 години) се появи нуждата от обновяване на DOCTYPE деклараторите. Те са общо 3 на брой и почти не се различават от тези на предшествениците си (HTML) като всеки от тях има своите предимства и недостатъци. Това са:

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

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

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

Разликите и приликите между отделните DOCTYPE-ове са следните:

xHTML 1.0 Strict

Този DTD съдържа всички HTML елементи и техните атрибути, но не позволява използването на някои остарели HTML елементи. Също така не разрешава използването на фреймове. Структурата на документа трябва да бъде последователна и да отговаря на изискванията за добре форматиран XML.

xHTML 1.0 Transitional

Този DTD съдържа всички HTML елементи и техните атрибути, и позволява използването на някои остарели HTML елементи. Също така не се разрешава използването на фреймове. Структурата на документа трябва да бъде последователна и да отговаря на изискванията на добре форматирания XML.

xHTML 1.0 Frameset

Този DTD е същият като Transitional, но разрешава използването на фреймове в страницата.

В уроците оттук насетне аз ще използвам Strict или Transitional в зависимост от урока и неговите изисквания.

html, head, title, body

Следващите няколко елемента от списъка са минимума HTML елементи, които трябва да присъстват в един xHTML файл, за да се счита за валидна уеб страница.

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Заглавие на страницата</title>
   </head>
   <body>
   </body>
</html>

Отавящия html таг маркира началото на уеб страницата, а затварящия таг маркира края. Всичко поставено между тези два тага се счита като част от уеб страницата. Също така отавящия html таг трябва да съдържа xmlns атрибут, който служи за избягване на конфликт между имената на елементите. В xHTML стойността на този атрибут е винаги http://www.w3.org/1999/xhtml.

Елемента <head>, който се превежда буквално “глава”, е “глава”-та на документа. Информацията, която поставяме в този елемент не е видима от потребителите (освен елемента title), а предоставя допълнителна информация за страницата.

Както виждаш в примера горе, елемента <title> е част от head. Title, който се превежда като “Заглавие”, посочва заглавието на страницата. Това заглавие е видимо в горния ляв ъгъл на браузъра, с който отваряш твоята страница.

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

<body> елемента, който се превежда буквално “Тяло”, е “тяло”-то на документа. Всичко, което поставиш между <body> и </body> е видимо от посетителите на твоята страница.

Ок, смятам, че нещата до тук са ясни. Ако все пак имаш въпроси, използвай фората в края на урока, за да ги зададеш.

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

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

Това правило е доста елементарно и лесно за следване.

В предишната версия на HTML – HTML 4.01, нямаше никакво значение как таговете бяха изписвани. С въвеждането на xHTML обаче това се промени.

Неправилно:
<BODY> , <p> , <IMG>

Правилният формат, който трябва да се използва е
<body> , <p> , <img>

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

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

Какво е атрибут?

Атрибута предоставя допълнителна информация за използвания елемент.

Най-важното, което трябва да знаете за атрибутите е следното:

  • xHTML елементите могат да съдържат атрибути;
  • Атрибутите винаги се поставят в отварящия таг;
  • Атрибутите същеструват под формата на двойки - атрибут="стойност".

Нека разгледаме един пример:

<a href="www.google.bg">Google.bg</a>
<a href='www.google.bg'>Google.bg</a>

В този случай използваме елемента a, за да създадем линк към страницата на Google. Тук href е атрибут на елемента a, а текста поставен в кавички след = е стойността на този атрибут.

Ок, достатъчно разяснения. Обратно към правилото.

Следващия пример ще ти представи накратко всичко казано по-горе.

Грешно:
<a HREF="стойност">Линк</a>
Правилно:
<a href="стойност">Линк</a>
<a href='стойност'>Линк</a>

Стойността на всеки атрибут трябва да бъде в кавички

Всъщност това правило е показано в примера от предходната точка. Задължително трябва да ограждаш стойността на всеки атрибут в двойни - " или еденични - ' кавички.

Забележка Важно е да се отбележи, че еденичните кавички се използват доста рядко, но има случай, в които са изключително полезни. Например, когато самата стойност съдържа двойни кавички - href='xHTML е "умен" език'. В този случай заграждането на цялата стойност в двойни кавички би причинила грешка.

Забранено е съкратеното изписване на някои атрибути

Нека разгледаме един пример:

Грешно:
<input checked>
<input disabled>

Вярно:
<input checked="checked" />
<input disabled="disabled" />

Както виждаш атрибутите и техните стойности са напълно еднакви, но върепки това xHTML изисква пълното им изписване докато при HTML това не беше задължително.

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

Чакането свърши! В следващия урок ще създадеш своята първа уеб страница!

Използвани снимки

Снимка към урока: M Rey Alonso

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

3 страхотни коментара

  1. 1

    Антон
    03 септември 2012 20:33

    Здравей, Джават има ли смисъл да се пише след:

    <html xmlns="http://www.w3.org/1999/xhtml "
    

    това отдолу

    dir="ltr" lang="bg" xml:lang="bg">
    

    Какъв е смисълът на това, при положение, че е зададено вече в:

    <meta name="language" content="bg" />
    

    Поздрави

  2. 2

    Ивайло
    12 октомври 2012 22:56

    Благодаря за уроците.
    Поздрави.

  3. 3

    Джават Ушев (автор)
    13 октомври 2012 20:07

    @Антон: Извинявай за късния отговор. Meta тага, който си използвал, казва на браузъра (предполагам и на търсачките) какъв е езика на страницата. Това lang="bg" xml:lang="bg" според мен е същото, само че написано чрез друг код. Това dir="ltr" служи по скоро на устройствата за четене като им казва как да четат текста. В случая ltr = left to right, което значи от ляво надясно. Надявам се, че ти е станало поне малко по-ясно :)

    @Ивайло: Благодаря за коментара.
    Надявам се да намериш и други полезни уроци :)

Твоят коментар

* - задължителни полета