Какая разница в визуализации между тегом span и label?

Question

Итак, я понимаю функциональное различие между тегами span и label ... однако кажется, что между тегами также есть разница в визуализации, и я не могу понять, что это такое? Кто-нибудь знает разницу в визуализации между span и label? Спасибо

Answer 1

Помимо стилей рендеринга по умолчанию (в некоторых браузерах метка иногда выделяется полужирным шрифтом), важным отличием является то, что метка, которую предполагается связать с полем формы (input, select и т. Д.) Для LABEL, что это за поле. Следовательно, это «для» атрибута. Это не должно использоваться ни для чего, кроме этого. Это особенно важно в отношении доступности программ чтения с экрана, поскольку они ожидают, что эта ссылка существует.

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

PS: Пусть гнев Грейскулла найдет вас, если я когда-нибудь поймаю вас, используя вкладку ярлыка, просто чтобы сделать текст жирным или что-то в этом роде. Повторяйте за мной: «нет поля ввода, нет метки».

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

Answer 2

Я не вижу никакой разницы в рендеринге со стандартными таблицами стилей в IE, Firefox, Opera или Chrome. Возможно, браузер выберет визуализацию по-другому, но вряд ли это будет существенная разница.

Основным преимуществом метки является то, что вы можете связать ее с другим элементом управления формы (с помощью содержимого или атрибута for). Это может иметь преимущества доступности. В частности, в типичном графическом браузере вы можете щелкнуть метку, чтобы сфокусировать связанный элемент управления (и отметьте его для флажков / радиомодулей, что удобно, так как в противном случае это довольно маленькая цель для удара). Это воспроизводит установленное поведение виджета формы ОС.