Загрузка...

HTML XHTML

Ранее SSE учил открывать EventSource и получать односторонний текстовый поток с сервера — живые обновления, не история синтаксиса. Этот урок оставляет стримы и закрывает опциональный исторический трек XHTML: HTML под правилами XML. Практика — что было строже, что изменил HTML5, какие привычки помогают — без XML-схем.

Зачем XHTML в курсе HTML

Новички видят «XHTML Strict» и думают, что надо переписать каждую страницу. Нет — HTML5 mainstream-цель. Старая строгость объясняет lowercase, кавычки и
. После server push здесь разделение — правила и история разметки, не realtime API.

Прямой ответ

1) XHTML = HTML как XML. 2) Классические привычки: lowercase, кавычки, явные пустые элементы. 3) Современное: HTML5 с <!DOCTYPE html>. 4) Аккуратная разметка всё ещё важна. 5) Новые проекты: паттерны HTML5. 6) Переводите старые советы XHTML в практику HTML5.

📊 HTML5 vs classic XHTML habits

Topic HTML5 (this course) XHTML-style strictness
Doctype <!DOCTYPE html> Older XHTML DOCTYPE lines
Empty elements <br> / <img> fine Often <br /> / <img … />
Attribute quotes Strongly recommended Required in XHTML
Element case Lowercase by convention Lowercase required in XHTML
Error recovery Forgiving HTML parsers XML rules were stricter
This course depth Required (daily practice) History + habits to recognize
Not this lesson Full CSS layout course XML schemas / MIME product design

Крошечный контраст пустого тега

Тот же смысл, два стиля. Браузеры принимают оба в типичном HTML5; слэш — признак материалов эпохи XHTML.

Empty tag contrast HTML5 vs XHTML-looking

html
<!-- HTML5-friendly empty tags -->
<p>Line one<br>Line two</p>
<img src="photo.jpg" alt="Demo photo">

<!-- XHTML-looking empty-element form -->
<p>Line one<br />Line two</p>
<img src="photo.jpg" alt="Demo photo" />

Читаем контраст

  • br и br / — перенос строки в повседневном HTML5
  • / был синтаксисом пустого элемента в XHTML-письме
  • Кавычки у src/alt — хорошая привычка HTML5 и обязательны в XHTML
  • Lowercase подходит обоим
  • Не SSE — нет EventSource
  • Не меняйте MIME из‑за одного br /
  • Держите интро маленьким

Крошечная корректная мини-страница

Короткий документ с привычками обеих эпох: doctype, charset, кавычки, закрытые элементы. Оставайтесь на doctype HTML5.

Tiny well-formed HTML5 mini page

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Well-formed mini page</title>
</head>
<body>
<h1>Clean markup still helps</h1>
<p>Quoted attributes and closed tags keep the tree clear.</p>
<img src="photo.jpg" alt="A demo photo">
</body>
</html>

Читаем мини-страницу

  • <!DOCTYPE html> отмечает HTML5
  • lang, charset и кавычки — устойчивые привычки
  • Закрывайте не-void элементы
  • alt — доступность
  • Не связано с SSE
  • Маппите привычки старых туториалов; HTML5 для нового
  • Дальше часто CSS

Выбор HTML5, привычек XHTML или старых туториалов

  • Новая страница курса: HTML5 + чистые привычки
  • Книга XHTML Strict 2005: переведите правила; оставьте HTML5
  • Видите br /: стиль эпохи XHTML
  • Живой server push: был SSE
  • Off-thread compute: были Workers
  • XML-схемы / application/xhtml+xml: за пределами intro

Практика — сравните, оставьте HTML5, разделите эпохи

  1. Прочитайте контраст пустого тега.
  2. Просмотрите таблицу привычек.
  3. Подтвердите doctype HTML5.
  4. Предложение: SSE стримит события; XHTML — история разметки.
  5. Предложение: новые проекты новичков нацелены на HTML5.
  6. Опционально: почистите сниппет кавычками.
  7. Заметка: закрывает очередь HTML rewrite.

Лёгкие ошибки

  • Слепо форсировать полный XHTML MIME/XML
  • Считать снисходительность HTML5 лицензией на плохую разметку
  • Смешивать эпохи без style guide
  • Путать с SSE
  • Верить, что каждый сайт должен быть XHTML Strict
  • Копировать старый XHTML doctype в новый проект
  • Думать, что кавычки «только для XHTML»

Итог

  • XHTML был HTML под более строгими XML-подобными правилами
  • HTML5 с <!DOCTYPE html> — современный default
  • Lowercase, кавычки и ясные теги всё ещё помогают
  • Переводите старые туториалы XHTML
  • SSE был live push; этот урок — история разметки
  • Очередь HTML rewrite заканчивается здесь — дальше часто CSS

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху