Урок №33. HTML та XHTML

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. HTML і XHTML

XHTML - це HTML, написаний як XML.


Що таке XHTML?


Чому XHTML?

Багато сторінок в Інтернеті містять "поганий" HTML код. Цей HTML код працює в більшості браузерів (навіть якщо він не відповідає правилам HTML):

Приклад:

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

Сьогоднішній ринок складається з різних технологій браузера. Деякі браузери працюють на комп'ютерах, а деякі веб-браузери працюють на мобільних телефонах або інших невеликих пристроях. Менші пристрої часто не мають ресурсів або потужності для інтерпретації "поганої" розмітки.

XML - це мова розмітки, де документи повинні бути правильно позначені (бути "добре сформованими"). XHTML розроблявся шляхом об'єднання сильних сторін HTML і XML. XHTML є HTML перероблений як XML. Якщо ви хочете вивчати XML, будь ласка, відвідайте і почитайте XML-підручник.


Найважливіші відмінності XHTML від HTML:

Структура XHTML документа

XHTML елементи

XHTML атрибути


<!DOCTYPE ....> обов'язковий

XHTML документ повинен мати оголошення XHTML DOCTYPE.

Елементи <html>, <head>, <title> і <body> також повинні бути присутніми, а атрибут xmlns в <html> повинен вказувати простір імен xml для документа.

Повний список всіх XHTML Doctypes знаходиться в довіднику HTML тегів.

У цьому прикладі показаний документ XHTML з мінімальними необхідними тегами:

Приклад:

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


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

<head>
  <title>Title of document</title>
</head>

<body>
  some content
</body>

</html>

XHTML елементи повинні бути правильно вкладені

В HTML деякі елементи можуть бути неправильно вкладені один в одного, наприклад:

<b><i>This text is bold and italic</b></i>

В XHTML всі елементи повинні бути правильно вкладені один в одного, наприклад:

<b><i>This text is bold and italic</i></b>

XHTML елементи повинні бути завжди закриті

Це неправильно:

<p>This is a paragraph
<p>This is another paragraph

Це правильно:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Порожні елементи також повинні бути закриті

Це неправильно:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

Це правильно:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML елементи повинні бути в нижньому регістрі

Це неправильно:

<BODY>
<P>This is a paragraph</P>
</BODY>

Це правильно:

<body>
<p>This is a paragraph</p>
</body>

Імена XHTML атрибутів повинні бути в нижньому регістрі

Це неправильно:

<table WIDTH="100%">

Це правильно:

<table width="100%">

Значення атрибутів мають бути взяті в лапки

Це неправильно:

<table width=100%>

Це правильно:

<table width="100%">

Мінімізація атрибутів заборонена

Це неправильно:

<input type="checkbox" name="vehicle" value="car" checked />

Це правильно:

<input type="checkbox" name="vehicle" value="car" checked="checked" />

Це неправильно:

<input type="text" name="lastname" disabled />

Це правильно:

<input type="text" name="lastname" disabled="disabled" />

Як конвертувати з HTML в XHTML

  1. Додайте XHTML <!DOCTYPE> до першого рядка кожної сторінки
  2. Додайте атрибут xmlns до html елемента кожної сторінки
  3. Зробіть всі назви елементів буквами нижнього регістру
  4. Закрийте всі порожні елементи
  5. Зробіть всі назви атрибутів буквами нижнього регістру
  6. Візьміть в лапки всі значення атрибутів

Перевірити HTML за допомогою валідатора W3C

Введіть веб-адресу в поле нижче:



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.