1. Как используется бинарный атрибут hidden?
Всем HTML-элементам может быть установлен атрибут hidden
. Атрибут hidden
позволяет скрыть элемент со страницы, причем элемент перестает занимать место в интерфейсе.
Сам атрибут логический, это значит, что он может иметь два состояния - включен или выключен:
<div hidden></div>
- элемент скрыт<div></div>
- элемент не скрыт
Обычно состоянием видимости элемента управляют с помощью CSS. Для этого используют свойство display
со значением none
.
Но есть один момент, который вы должны учитывать.
.show {
display: block;
}
<div class="show" hidden>Я скрытый или нет?</div>
В этом случае .show
будет показан, так как приоритет у CSS.
Используйте атрибут hidden
правильно
Атрибут не нужно использовать на тех частях сайта, которые пользователь точно не должен получить. Например, у вас есть текст с данными о счёте клиента, но его можно увидеть только после регистрации. Если вы скроете счёт с помощью hidden, то доступ к нему всё равно останется. Мы лишь скрываем его визуально, а сам счёт остаётся в коде и получается, что доступ есть у любого пользователя.
Не нужно скрывать заголовки(label, h1-h6 и другие) с помощью hidden
, так вы прячете заголовки от скринридеров. Для этого создали специальный css-класс, с которым вы можете познакомиться в нашей статье.
Не скрывайте поля форм с помощью этого атрибута, ведь данные формы всё равно будут отправляться. Для этого есть более подходящий атрибут disabled
.
Если коротко, то ссылкой становятся элементы, которые куда-либо ссылаются:
- на другую страницу;
- на какую-то секцию на странице;
- изменение get-параметров страницы.
То есть, по факту происходит физическое изменение ссылки при взаимодействии с элементом.
При клике на кнопку «назад» в галерее нам не нужно переходить на другую страницу или менять положение на странице. Нам всего лишь нужно поменять слайд. В этом случае используется <button>
.
@ZomboBombo, попробуйте, когда спрашиваете «а может так?» аргументировать, почему так лучше, чем предложенное решение. Тогда вам самим будет становиться понятнее, чем это лучше. А может быть чем хуже.
Можно всё, что не противоречит критериям :) Но список здесь подходит логически, ведь здесь перечисление товаров.
Почитайте спецификацию, где описан элемент
<figure>
, он не самостоятельный, он подходит как иллюстрация к каком-то контенту (картинки, графики, код). Плюс<figcaption>
— это подпись к картинке, а вы её используете как название товара. То, что вы используете заголовок, ухудшает доступность такого интерфейса. Об этом подробнее будет в 4 разделе про доступность.Потому, что это ссылка, которая ведёт на страницу товара, а не добавляет в корзину.