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

Есть ли разница между следующими блоками кода?

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

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

Я пробовал оба, и оба, кажется, работают, но я спрашиваю на всякий случай, с чем мне нужно быть осторожным?


html quotes
person John    schedule 24.10.2012    source источник
comment
Вероятно, это зависит от того, какой браузер и версию вы используете. (Особенно старые браузеры)   -  person Tim    schedule 25.10.2012
comment
связанные: stackoverflow.com/questions/5398993/   -  person Ciro Santilli 新疆再教育营六四事件ۍ    schedule 18.09.2016

Ответы (6)


arrow_upward
0
arrow_downward

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

Поэтому правильнее брать их в кавычки.

person Davit    schedule 24.10.2012
comment
В версиях HTML (специализированных SGML) версиях до HTML5 оба допустимы. Не существует //ложной валидности// или //истинной валидности//; либо документ действителен в соответствии с его DOCTYPE объявлением, либо нет. Однако это недействительно в XHTML (приложении XML). - person Rainer Rillke; 16.08.2016
comment
Обратите внимание, что отображаемый HTML-код будет включать кавычки - person Aryan Beezadhur; 26.11.2020

arrow_upward
25
arrow_downward

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

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

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

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

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

person Jukka K. Korpela    schedule 24.10.2012

arrow_upward
9
arrow_downward

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

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

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

person j08691    schedule 24.10.2012
comment
Требование кавычек не определяется тем, используется ли строгий или переходный вариант. Это определяется диалектом разметки: HTML или XHTML. - person BoltClock; 08.08.2018

arrow_upward
8
arrow_downward

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

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

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

person Sushanth --    schedule 24.10.2012
comment
Самый простой и лучший ответ. Ощущение, что лучше всегда использовать кавычки, широко распространено в веб-сообществе, но это всего лишь ощущение. Для документов, созданных вручную, это, вероятно, значительно уменьшит количество ошибок, но если кто-то создает автоматический минимизатор HTML, желательно опустить кавычки, где это возможно. - person antonagestam; 03.10.2019

arrow_upward
5
arrow_downward

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

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

person tomo7    schedule 06.03.2014

arrow_upward
4
arrow_downward

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

Имя атрибута, за которым следует ноль или более пробелов, за которым следует один символ U+003D EQUALS SIGN, за которым следует ноль или более пробелов, за которым следует значение атрибута, которое, в дополнение к требованиям, приведенным выше для значений атрибута, не должен содержать буквенных пробелов, любых символов U+0022 QUOTATION MARK (), U+0027 символов АПОСТРОФ ('), U+003D символов ЗНАК РАВНО (=), U+003C символов МЕНЬШЕ, ЧЕМ ЗНАК (‹), U Символы +003E ЗНАК БОЛЬШЕ (›) или символы U+0060 GRAVE ACCENT (`) и не должны быть пустой строкой.

Источник: Спецификация W3 HTML5 — раздел 8.1.2.3. Атрибуты

person georgeawg    schedule 08.08.2018