HTML в стороне тег: это нормально использовать для сообщения об ошибке формы?

Question

Итак, у меня есть форма, и у меня будут сообщения об ошибках, связанные с каждым входом / элементом. Я придумал это использование для тега <aside> и мне было интересно, что люди думают:

    <section class="fieldrow" id="rowJobTitle">

        <label for="txtJobTitle" id="lblJobTitle">
            <span>Job title:</span>
        </label>

        <input type="text" id="txtJobTitle" name="txtJobTitle">

        <aside id="errJobTitle" class="errormessage">
            <span role="alert">Please tell us your job title.</span>
        </aside>

    </section>

Тогда я буду использовать CSS, чтобы показать или скрыть ошибки <aside> с небольшим JS, чтобы изменить это.

Я знаю, что мог бы просто использовать span и покончить с этим, но тег span не имеет семантического значения, и вся (короткая и расплывчатая) информация, которую я прочитал на <aside>, кажется, говорит, что нет проблем с этим, но я надеялся, что смогу либо получить какое-то подтверждение, либо кого-то, кто пробовал это раньше и нашел вескую причину не делать этого.

Спасибо, Си.

Answer 1

Тег <aside> поддерживается во всех основных браузерах.

Однако существуют потенциально более изящные способы сделать это, и <aside> не совсем семантически для того, что вы имеете в виду. Из спецификаций HTML5 :

Элемент aside представляет собой раздел страницы, состоящий из контента, который тангенциально связан с контентом вокруг элемента aside, и которыйможно считать отдельным от этого содержания .Такие разделы часто представлены в виде боковых панелей в печатной типографии.

Ваша ошибка на самом деле не отделена от содержимого, поэтому это довольно неуместный выбор.

Вы должны посмотреть, как Twitter Bootstrap допускает встроенные ошибки формы.

Все это говорит о том, что это семантика и, следовательно, по своей сути субъективны.Если это имеет смысл для вас и работает, почему бы не использовать его?

РЕДАКТИРОВАТЬ

После прочтения ссылки Роба, <aside> выглядит даже более неуместным, чем я думал.Поскольку <aside> не является подэлементом <input>, нет никакой причины, по которой парсер мог бы думать, что он связан с этим <input>.Я бы избегал его использования в этом контексте.

MDN дает некоторые варианты использования для этого, а ваши не подходят:

они часто содержат побочные пояснения, такие как определение глоссария, болееслабо связанные вещи, такие как реклама, биография автора или веб-приложения, информация о профиле или ссылки на блог.

Answer 2

Элемент <aside> не поддерживается в IE 8 и более ранних версиях. Это означает, что любые стили, которые вы на него устанавливаете, теряются в этих браузерах. Вы можете частично обойти эту проблему, используя JavaScript-код, который «учит» им элемент, но стоит ли это все? Каков именно ожидаемый выигрыш?

По логике, описанное использование не соответствует семантике HTML5. Описания там нечеткие, но я не думаю, что сообщение об ошибке можно охарактеризовать как тангенциальное , когда оно отображается и актуально; тогда это действительно ключевой контент. Это не отдельный от остального содержимого; вместо этого он выражает жизненно важную информацию об этом.

Реклама будет кандидатом на <aside>, как и анекдот или заметка к истории, или, как правило, контент, который не обязательно каким-либо образом связан с основным контентом.

Я не видел никаких свидетельств того, что какое-либо программное обеспечение, такое как поисковые системы или браузеры или надстройки для браузера, действительно использует разметку <aside>. Просто предположение о том, что может быть сделано.

Я думаю, что в общем дизайне есть фундаментальный недостаток, делающий вопрос о семантике элементов еще более теоретическим. Что происходит, когда CSS или JavaScript отключен? Правильно, пользователь всегда видит сообщение об ошибке, даже если он вообще не вводил данные или все данные введены правильно.

Лучшим подходом, предполагающим, что речь идет об ошибках, обнаруженных в клиентском коде, является сохранение текстов сообщений об ошибках только в строках JavaScript. Когда обнаружена ошибка, добавляется новый элемент или изменяется содержимое существующего элемента, чтобы сделать сообщение об ошибке доступным; и он будет уничтожен, когда ошибка будет исправлена. (Не нужно полагаться на CSS здесь.)

Таким образом, сообщение об ошибке может быть помещено перед полем, справа от него или под ним. Не имеет большого значения, какие элементы вы используете для этого (поисковые системы не увидят его, и вряд ли браузеры будут делать что-то особенное с ним самостоятельно), но <div><strong>...</strong></div>, вероятно, будет хорошим выбором.

Answer 3

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

РЕДАКТИРОВАТЬ: После всех обсуждений я думаю, что нет подходящего, семантического элемента для этого, и лучшим для использования будет общий элемент div. Мы слишком стараемся заставить элемент HTML5.