HTML и XHTML

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих



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

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