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>
.
Здравствуйте!
В обзоре разметки внутренней страницы-каталога «Барбершопа» (макет barbershop-shop.psd) карточки товаров размечаются элементами списка с кучей вложенных span'ов, абзацев и ссылок:
Вопрос: можно ли вместо списка
<ul>
использовать обёртку<div>
, а вместо<li>
—<figure>
следующим образом:Или же это неправильное решение?
И ещё непонятен момент с «...
<a href="#">Купить</a>
». Почему «Купить» здесь — это ссылка, а не кнопка?Заранее благодарю за ответы! :)