Атрибут HTML с/без кавычек

Есть ли разница между

<iframe src="www.example.com" width=100%></iframe>

и

<iframe src="www.example.com" width="100%"></iframe>

Я пробовал и то и другое, и оба, похоже, работают, но я прошу на всякий случай, что мне нужно быть осторожным (например, единицы, отличные от% и т.д.).

Ответ 1

Это все об истинной достоверности разметки HTML. Это для чего W3C (Консорциум WWW). Многие вещи могут работать в HTML, но они должны быть проверены, чтобы быть более тщательно распознанными веб-браузером. Вы даже можете опускать теги <html> и </html> в начале и в конце, но это не рекомендуется вообще, никто не делает этого и считается "плохим кодом".

Следовательно, более целесообразно помещать их в кавычки.

Ответ 2

Нет никакой практической разницы, кроме

  • если вы проверяете свою страницу, кавычки могут или не могут быть необходимо избегать сообщений об ошибках, в зависимости от используемого типа doctype
  • если вы обслуживаете страницу с типом содержимого XML для браузеров ( редко и редко бывает полезным), тогда нужны котировки - иначе страница вообще не отображается, просто сообщение об ошибке
  • Если страница обрабатывается иным способом с помощью инструментов XML, необходимы кавычки.

В противном случае кавычки действительно понадобятся только в том случае, если значение атрибута содержит пробел, разрыв строки, кавычку Ascii ("), апостроф Ascii ('), серьезный акцент (`), знак равенства ( =), меньше знака (<) или больше знака ( > ). Таким образом, style = width:20em будет работать (хотя его можно считать несколько неясным), тогда как style = width: 20em не будет - из-за пространства, вам нужно написать style = "width: 20em".

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

Совершенно независимо от этого, src="www.example.com" означает относительную ссылку URL, а не то, что люди ожидают. Вероятно, вы имели в виду src="http://www.example.com".

Ответ 3

Согласно W3C существует четыре типа синтаксиса атрибутов:

  1. синтаксис пустого атрибута
  2. Синтаксис значения атрибута без кавычек
  3. синтаксис значения атрибута в одинарных кавычках
  4. синтаксис значений атрибутов в двойных кавычках

Это действительно относится к HTML5, однако при ссылке на & lt; HTML5 W3C говорит, что кавычки (одинарные или двойные) требуются в зависимости от используемого типа документа (например, строгий, переходный и т.д.).

Ответ 4

Это от Google - лучшие практики - "Минимизировать размер полезной нагрузки" https://developers.google.com/speed/docs/best-practices/payload (мой акцент)

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

Ответ 5

Нет, оба одинаковы..

В HTML 5 кавычки вокруг атрибутов просто необязательны. (если в значении нет пробелов или специальных символов)

Но я считаю, что лучше заключать их в цитаты.

Ответ 6

  Синтаксис значения без кавычек

Имя атрибута, за которым следуют ноль или более пробелов, за которым следует один символ U + 003D EQUALS SIGN, за которым следуют ноль или более пробелов, после которых следует значение атрибута, которое, в дополнение к требованиям, приведенным выше для значений атрибута, не должно содержать буквенных пробелов, любых символов U + 0022 QUOTATION MARK ("), символов U + 0027 APOSTROPHE ('), символов U + 003D EQUALS SIGN (=), символов U + 003C LESS-THAN SIGN (& lt;), U + 003E символов БОЛЬШОГО ЗНАКА (>) или U + 0060 GRAVE ACCENT символов ('), и не должно быть пустой строкой.

— W3 HTML5 Specification - sec 8.1.2.3. Attributes

Ответ 7

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