Использует HTML-метку, чтобы обернуть элементы семантикой?

Я рассматриваю возможность использования label для обертывания h3 и тега p. На мой взгляд, это имеет смысл, поскольку метка имеет заголовок и описание, и оба относятся к входу. Однако я не могу найти какую-либо информацию в спецификации о том, можно ли это сделать.Использует HTML-метку, чтобы обернуть элементы семантикой?

Вот пример:

<label for="test1"> 
    <h3>Label Heading</h3> 
    <p>Label Description</p> 
</label> 

<input id="test1" name="test" type="radio"/>

Если это не кто-нибудь есть лучшее предложение?

источник

2015-04-24 Adam Hughes

проверить ли в W3C Validator? – Lee

Не сминайте срок действия семантики. Это разные вещи. – Quentin

Действительно - и прежде чем вы сможете поговорить о семантике, вам нужно сначала убедиться, что данный фрагмент действителен. В этом случае это просто недействительно. – BoltClock

вставив следующий код в W3 HTML Validator дает две ошибки

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 
     <label for="test1"> 
      <h3>Label Heading</h3> 
      <p>Label Description</p> 
     </label> 
     <input id="test1" name="test" type="radio"/> 
    </body> 
</html>

Элемент h3 не допускается в качестве дочернего элемента этикетки в этом контексте.

Элемент p не разрешен как дочерний элемент метки элемента в этом контексте.

Так что этот код является скорее недействительным.

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

источник

2015-04-24 10:51:32 Siguza

Если вы пытаетесь подтвердить свой HTML/CSS и другие код, есть большой и официальный сайт для этого:

W3C Validator

Вы можете проверить, просто указав свой адрес веб-сайта или скопировать-вставить исходный код.

Помимо предпочтений каждого человека, вы получите гарантию на проверку «правителем» (не знаете, как это сказать) при разговоре о WWW.

источник

2015-04-24 10:51:07 Bladepianist

В соответствии с W3c они предлагают не использовать элемент блока внутри встроенного элемента. Поскольку метка является встроенным элементом, а заголовки и абзацы являются блочными элементами.

источник

2015-04-24 10:55:54

Это не «предложения», они _rules_. И, кстати, HTML5 не просто дифференцирует внутристрочный или блок больше, но вместо этого ввел несколько контента _categories_: http://www.w3.org/TR/html5/dom.html#kinds-of-content – CBroe

This link должен описать вам, почему вы не должны так писать.

Вы можете использовать <span class="labelHead"></span> <span class="labelDescription"></span> внутри ярлыка-метки, но я бы не рекомендовал его.

Лучшим было бы написать <h3>...</h3><label for="...">...</label><input...

За исключением экранов-считывателей, роботов и т. Д., Атрибут for используется только для того, чтобы сделать текст доступным для фокусировки на поле ввода, не так ли?

источник

2015-04-24 11:00:34 SebHallin

Похоже, вы пытаетесь реплицировать fieldset and legend на основе ввода.

Что вы, возможно, хотите, это aria-describedby.

<label for="emailInput" id="email-address-label" aria-describedby="email-address-label-description">Email</label> 
 
<span class="label-description" id="email-address-label-description">This will also be your login username</span> 
 
<input type="email" id="emailInput" autocapitalize="none" spellcheck="off" autocomplete="email" inputmode="email" />

источник

2017-07-25 14:07:26

Использует HTML-метку, чтобы обернуть элементы семантикой?

ответ

Смежные вопросы