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

Question

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

1. http://css -tricks.com /13286-problem-with-unquoted-attribute /
2. http://www.cs.tut.fi/~jkorpela/qattr.html

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

Есть ли другой ресурс или контрольные примеры для более веских причин дляпроцитируйте свои атрибуты и закройте теги?

Answer 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. Результаты, по крайней мере, одинаковы для разных браузеров, и разница заключается в текстовых узлах, которые вы все равно будете часто пропускать при написании сценариев, но это показывает, что даже есливизуальный вывод выглядит одинаково, когда теги закрыты или нет, даже в примере, таком простом, есть основные отличия.

Answer 2

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

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

Answer 3

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

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

<!-- 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>

Answer 4

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

Есть два типа программистов;те, которые заботятся, и те, которые не заботятся.

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

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

Answer 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-тегов только делает вещи более запутанными для вас, приводит к непоследовательности рендеринга страниц в зависимости от ожиданий и между браузерами, и это, как правило, плохая идея.Настолько плохо, что даже не стоит воспринимать это как серьезное предложение.Ваш друг явно никогда не разрабатывал настоящий веб-сайт.

Answer 6

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