Семантично ли е използването на HTML етикет за обвиване на елементи?

Обмислям да използвам label за обвиване на етикети h3 и p. Според мен това има смисъл, тъй като етикетът има заглавие и описание и двете са свързани с входа. Въпреки това не мога да намеря информация в спецификацията дали това може да се направи.

Ето един пример:

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

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

Ако не е, някой има ли по-добро предложение?


validation html semantics
person Adam Hughes    schedule 24.04.2015    source източник
comment
Валидира ли се в W3C Валидатор?   -  person Lee    schedule 24.04.2015
comment
Не смесвайте валидността със семантиката. Те са различни неща.   -  person Quentin    schedule 24.04.2015
comment
Наистина - и преди да можете да говорите за семантика, първо трябва да се уверите, че въпросният фрагмент е валиден. В този случай това просто не е валидно.   -  person BoltClock    schedule 24.04.2015

Отговори (5)


arrow_upward
6
arrow_downward

Поставянето на следния код в 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 не е разрешен като дете на етикет на елемент в този контекст.

Така че този код е доста невалиден.

Бих казал също, че това е семантично „невалидно“ (или най-малкото странно), защото мисля, че етикетът е описание на полето за въвеждане, а заглавието не се побира там.

person Siguza    schedule 24.04.2015

arrow_upward
1
arrow_downward

Според W3c те предлагат да не се използва блоков елемент вътре във вграден елемент. Тъй като етикетът е вграден елемент, а заглавията и параграфите са блокови елементи.

person Shariq Ansari    schedule 24.04.2015
comment
Това не са „предложения“, а правила. И между другото, HTML5 вече не прави разлика между вградено или блокирано, но вместо това въведе няколко категории на съдържанието: w3.org/TR/html5/dom.html#kinds-of-content - person CBroe; 24.04.2015

arrow_upward
1
arrow_downward

Звучи сякаш се опитвате да репликирате fieldset и 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" />

person Kevin Suttle    schedule 25.07.2017

arrow_upward
0
arrow_downward

Ако се опитвате да потвърдите своя HTML/CSS и други кодове, има страхотен и официален уебсайт за това:

W3C Валидатор

Можете да проверите само като посочите адреса на уебсайта си или копирате и поставите изходния код.

Освен предпочитанията на всеки човек, вие ще имате увереността да бъдете тествани от „линийката“ (не знам как да го кажа), когато говорите за WWW.

person Bladepianist    schedule 24.04.2015

arrow_upward
0
arrow_downward

Тази връзка трябва да ви опише защо не трябва да пишете така.

Можете да използвате <span class="labelHead"></span> <span class="labelDescription"></span> вътре в маркера етикет, но не бих го препоръчал.

Най-добре би било да напишете <h3>...</h3><label for="...">...</label><input...

С изключение на екранни четци, роботи и подобни, атрибутът for се използва само за да направи текста да може да се кликва, за да се фокусира върху полето за въвеждане, нали?

person SebHallin    schedule 24.04.2015