Каковы актуальные проблемы не закрытия тегов и атрибутов в HTML

Недавно друг решил не закрывать свои теги или атрибуты в HTML, потому что это не требуется, и он сохранит некоторую пропускную способность и время загрузки. Я сказал ему, что это плохая идея, и быть "лучше безопасным, чем жаль", однако я мог только найти 2 ресурса по этому вопросу:

# 1 хорош, но, по его словам, они не действительно реальные примеры, поэтому я пошел на # 2, но они действительно показывают только <a>, который намного отличается от большинства других тегов/узлы.

Есть ли другой ресурс или тестовые примеры, чтобы лучше указать ваши атрибуты и закрыть теги?

Ответ 1

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

<ul>
    <li>Item
    <li>
    <li>Item
    <li>
    <li>Item
</ul>

<ul>
    <li>Item</li>
    <li></li>
    <li>Item</li>
    <li></li>
    <li>Item</li>
</ul>

Глядя на два в браузере, они выглядят одинаково. Однако, если вы добавите немного CSS, чтобы скрыть пустые:

li:empty { display: none; }

Теперь они не выглядят одинаково, хотя разметка не изменилась с предыдущего примера. Основная причина этого заключается в том, что две версии производят разные деревья DOM, эта версия выполняет итерации по всем узлам в обоих списках и подсчитывает их, затем показывает результаты и список узлов, найденных в предупреждениях. Вы можете видеть, что верхний список содержит 12 узлов DOM, нижний список - 15. Результаты являются по крайней мере согласованным кросс-браузером, и разница в текстовых узлах, которые вы часто пропускаете при написании сценариев в любом случае, но это показывает, что даже если визуальный вывод выглядит одинаково, когда теги закрыты или нет, существуют базовые различия даже в простом примере, как это.

Ответ 2

Не закрывающие теги могут привести к несовместимости браузера и ненадлежащим образом отображаемым страницам. Это само по себе должно быть достаточным основанием для правильного закрытия ваших тегов.

Сохранение полосы пропускания и время загрузки - это ужасное оправдание, если вы спросите меня. Это 2011 год, и даже на dialup несколько байтов, которые вы сохраняете, не закрывая несколько тегов, не будут даже близки к заметным. Однако искаженная страница из-за неправильного рендеринга будет.

Ответ 3

Это просто плохая практика кодирования, на мой взгляд.

Существует два типа программистов: те, кто заботится, и те, которых нет.

Это ленивое программирование, то же самое, что не имеет стандартов кодирования, или не формирует код yout... это похоже на плотника, а не на шлифование краев таблицы, которую вы только что создали.

Большинство браузеров поддерживают его, но некоторые могут жаловаться.

Ответ 4

Не закрывающие теги могут создавать неожиданные пробелы между элементами в разметке.

Рассмотрим следующий пример.

<!-- English quoting rules. -->
<style>
    blockquote > p::before { content: open-quote; }
    blockquote > p::after { content: no-close-quote; }
    blockquote > p:last-of-type::after { content: close-quote; }
</style>

<!-- This is ok. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</blockquote>

<!-- This isn't. There are blank spaces after the last (unclosed) <p> element.
     Thus, the closing quote appears separated with a space from the text. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.
    <p>Lorem ipsum dolor sit amet.
</blockquote>

Ответ 5

Большинство тегов HTML являются контейнерами. Рассмотрим:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section
</section>
Stuff outside a section
<p>
  Other text
</p>

В этом примере "Материал внутри раздела" будет красным, "Материал вне раздела" не красным. В этом примере:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section

Stuff outside a section
<p>
  Other text
</p>

... в этом примере "Материал внутри раздела", "Материал вне раздела", а "Другой текст" ВСЕ будет красным, то есть раздел никогда не заканчивался. Браузер может попытаться предположить, где раздел мог закончиться, но в моем примере выше единственное предположение состоит в том, что раздел продолжается до конца документа, что не является тем, что было предназначено.

Короче говоря, не закрывая HTML-теги, просто делает вас более запутанными для вас, приведет к тому, что страницы будут отображаться непоследовательно из ожиданий и между браузерами, и, как правило, это плохая идея. На самом деле так плохо, что его даже нельзя воспринимать как серьезное предложение. Ваш друг явно не разработал настоящий веб-сайт.

Ответ 6

Вы не можете многое сделать с точки зрения дизайна сайта/макета, если вы не закрываете теги.