"Таг-суп" в HTML: невалидный и некорректный код веб-страниц

Введение

Синтаксически или структурно некорректный код разметки веб-страницы.

В веб-разработке термин "tag soup" (суп тегов) используется как пренебрежительное обозначение для HTML-кода веб-страницы, содержащего синтаксические или структурные ошибки. Исторически веб-браузеры лояльно относились к ошибкам в синтаксисе и структуре HTML, поэтому у веб-разработчиков не было стимула следовать опубликованным стандартам. В связи с этим существует необходимость в том, чтобы все реализации браузеров предоставляли механизмы для обработки "супа тегов", принимая и исправляя недействительный синтаксис и структуру, где это возможно. HTML-парсер (часть веб-браузера), способный интерпретировать HTML-разметку даже при наличии синтаксических или структурных ошибок, может называться парсером "супа тегов". В настоящее время все основные веб-браузеры оснащены парсером "супа тегов" для интерпретации некорректно сформированного HTML, при этом большинство элементов обработки ошибок стандартизированы. "Суп тегов" включает в себя множество распространенных ошибок при создании веб-страниц, таких как некорректно сформированные HTML-теги, неправильно вложенные HTML-элементы и неэкранированные символьные сущности (особенно амперсанды (&) и знаки меньше (<)). Служба проверки разметки является ресурсом для авторов веб-страниц, позволяющим избежать создания "супа тегов".

Обзор

"Тэг-суп" – термин, используемый для критики различных практик в веб-разработке. Некоторые из них (приблизительно упорядоченные от наиболее серьёзных к наименее серьёзным) включают:

Некорректная разметка, при которой теги неправильно вложены или некорректно закрыты. Например: Это некорректный фрагмент HTML.
Недопустимая структура, при которой элементы вложены неправильно в соответствии с DTD для документа. Примеры включают вложение элемента "ul" непосредственно внутрь другого элемента "ul" для любого из DTD HTML 4.01 или XHTML. Дэн Коннолли приводит в пример использование элемента `<title>` вне секции `<head>`. Использование проприетарных или неопределённых элементов и атрибутов вместо тех, которые определены в рекомендациях W3C. Например, использование элементов Blink или Marquee, которые изначально были нестандартными элементами, поддерживаемыми только браузерами Netscape и Internet Explorer соответственно.

Неисправная разметка

Неправильная разметка, пожалуй, является самой серьезной проблемой при создании веб-страниц. Однако, благодаря повышению уровня образования и доступности информации, а возможно, и с помощью XHTML, проблема неправильной разметки становится менее распространенной. Браузеры, сталкиваясь с некорректной разметкой, вынуждены догадываться о намерениях автора. Им приходится предполагать наличие закрывающих тегов там, где они ожидаются, а затем и соответствующих открывающих тегов. Интерпретация может существенно различаться в разных браузерах. Хотя многие графические веб-редакторы генерируют корректную разметку, автор, пишущий код вручную в текстовом редакторе и тестирующий его только в одном браузере, может легко не заметить такие ошибки. В результате отображение может сильно отличаться в зависимости от браузера, поскольку каждый из них пытается по-своему "исправить" замысел автора и затем применяет стили к этим "исправлениям".

Недействительная структура документа

Недействительная структура документа в данном случае означает использование атрибутов и элементов не по назначению. Например, добавление атрибута "cite" к элементу "cite" является ошибкой, поскольку спецификации HTML и XHTML DTD не определяют значения для этого атрибута в контексте данного элемента. Аналогично, включение элемента "p" внутрь элемента "em" также недопустимо. В связи с тенденцией к разделению некорректной и недействительной разметки, проблемы, связанные с недействительной разметкой, стали рассматриваться как менее критичные. Некоторые предлагают использовать более гибкие модели содержимого, позволяющие авторам создавать HTML-документы (как в HTML, так и в XHTML) с большей свободой. Однако использование недействительной разметки может исказить первоначальный замысел автора, хотя и не в такой степени, как некорректная разметка. Многие графические веб-редакторы по-прежнему генерируют недействительную разметку. Более того, многие профессиональные веб-дизайнеры и разработчики не обращают достаточного внимания на валидность кода. Недействительную разметку можно встретить на множестве сайтов в интернете.

Использование запатентованных/утраченных элементов

В ранние годы развития веб (большая часть 1990-х годов) разработка официальной спецификации HTML становилась все более затруднительной, в сравнении с потребностью дизайнеров в гибкости при создании визуально выразительных макетов. В ответ на это давление производители браузеров в одностороннем порядке добавляли новые проприетарные функции в HTML, которые не соответствовали стандартам того времени. Это приводило к тому, что в HTML появлялись проприетарные элементы, работающие в одних браузерах, но не в других. В некоторой степени эту проблему удалось замедлить благодаря внедрению новых стандартов W3C, таких как CSS, представленный в 1998 году, который обеспечил большую гибкость в оформлении и компоновке веб-страниц без необходимости использования большого количества дополнительных HTML-элементов и атрибутов. Кроме того, в HTML 4 и XHTML 1 многие элементы были либо заменены единой семантической конструкцией (например, элементы `<object>` заменили проприетарные `<applet>` и `<embed>`), либо признаны устаревшими из-за своей презентационной направленности (например, элементы `<s>`, `<strike>` и ``). Тем не менее, разработчики браузеров продолжали добавлять новые элементы в HTML, когда считали это необходимым. Некоторые браузеры включали атрибут `tabindex` в любой элемент. Разработчики WebKit от Apple представили элемент `<canvas>`, версию которого впоследствии переняла Mozilla. В 2004 году Apple, Mozilla и Opera основали WHATWG с целью создания новой версии спецификации HTML, которой бы соответствовало поведение всех браузеров. Это подразумевало изменение спецификации, если это необходимо, для соответствия существующему консенсусу между различными браузерами. Элементы `<canvas>` и `<embed>` впоследствии были стандартизированы WHATWG. Некоторые элементы (включая ``, `` и ``), которые ранее считались презентационными и устаревшими, были включены, но определены в медианезависимом, а не визуальном формате. Версии спецификации WHATWG были опубликованы W3C под названием HTML5. Версии Microsoft Internet Explorer до 9 не отображают XHTML-документы, поданные как application/xhtml+xml. IE9 и более поздние версии соответствуют стандартам. Подробнее об этой проблеме см. в статье XHTML.

In the early age of the web (much of the 1990s), the design of the official HTML specification became increasingly strained, compared to the desire of designers for flexibility in creating visually vibrant designs. In response to this pressure, browser makers unilaterally added new proprietary features to HTML that fell outside the standards at the time. This meant there were proprietary elements in HTML that worked in some browsers, but not in others. To some extent, this problem was slowed by the introduction of new standards by the W3C, such as CSS, introduced in 1998, which helped to provide greater flexibility in the presentation and layout of web pages without the need for large numbers of additional HTML elements and attributes. Moreover, in HTML 4 and XHTML 1, many elements were either superseded by a single semantic construct (such as object elements replacing proprietary applet and embed elements) or deprecated due to being presentational (such as the "s", "strike" and "u" elements). Nevertheless, browser developers continued to introduce new elements to HTML when they perceived a need. Some browsers included tabindex attributes on any element. Developers of Apple's WebKit introduced the canvas element, a version of which was subsequently adopted by Mozilla. In 2004, Apple, Mozilla and Opera founded the WHATWG, with the intent of creating a new version of the HTML specification which all browser behavior would match. This included changing the specification if necessary to match an existing consensus between different browsers. The canvas and embed elements were subsequently standardised by the WHATWG. Certain elements (including b, i and small) which were previously considered presentational and deprecated were included, but defined in a media independent rather than visual manner. Versions of the WHATWG specification were published by the W3C as HTML5. Microsoft Internet Explorer versions before 9 do not display XHTML documents served as application/xhtml+xml. IE9 and later versions are compliant. See also the discussion of this issue in the XHTML article.

HTML5

HTML5 стремится стать наиболее полным решением проблемы "супа тегов" на сегодняшний день, оставаясь при этом максимально совместимым как с устаревшими, так и с будущими стандартами. В отличие от XHTML, который жертвует обратной совместимостью и считает, что парсеры должны стать менее терпимыми к некорректной разметке, HTML5 признает, что большое количество некорректного HTML-кода уже существует и, вероятно, продолжит использоваться, и поэтому спецификация должна быть расширена для обеспечения максимальной совместимости с таким кодом. Таким образом, спецификация HTML5 изменила определение синтаксиса HTML, чтобы учитывать распространенный синтаксис, используемый сегодня, и явно описать, как парсер должен обрабатывать "некорректный код". Обработка некорректного кода теперь включена непосредственно в спецификацию, что, как ожидается, снизит необходимость для будущих HTML-парсеров реализовывать дополнительные, не предусмотренные спецификацией меры для работы с кодом, который они не распознают.

Валидные отклонения от XHTML

В отличие от строгого XHTML, HTML и его предшественник SGML разработаны для написания человеком и уже обладают значительной гибкостью синтаксиса, чтобы уменьшить объем шаблонного кода. Эти различия не делают документ недействительным и, следовательно, не являются "супом из тегов". Приведенные ниже правила применимы как к HTML 4, так и к HTML5, и примеры восходят к первым дням HTML. Некоторые теги, например, часто можно опускать полностью. Закрывающие теги часто можно опускать, поскольку спецификация не допускает вложение некоторых элементов друг в друга. Например, несколько элементов `` можно записать без закрывающих тегов. Несмотря на допустимость таких упущений, для их разбора все равно требуется специальный парсер, знакомый с HTML (в отличие от более строгого XML). Кроме того, инструменты часто "исправляют" подобные структуры. Например, HTML Tidy позволяет опускать необязательные теги, но по умолчанию этого не делает.