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

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

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

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

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

10 голосов | спросил Oscar Godson 19 PM00000090000003731 2011, 21:42:37

6 ответов


0

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

ответил robertc 21 AM00000030000004631 2011, 03:32:46
0

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

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

ответил Jared Ng 19 PM00000090000002931 2011, 21:47:29
0

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

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

<!-- 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>
ответил alecov 30 J0000006Europe/Moscow 2016, 23:15:52
0

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

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

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

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

ответил c0deNinja 19 PM00000090000001031 2011, 21:48:10
0

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

ответил Chris Baker 19 PM00000090000005131 2011, 21:55:51
0

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

ответил Matt K 19 PM00000090000004631 2011, 21:49:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132