Вопросы к разделу «Разметка» на 26 потоке

htmlcss-1__section-2.md

Вопросы к разделу «Разметка»

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.

2. Почему в галерее кнопка «назад» это <button>, а не <a>.

Если коротко, то ссылкой становятся элементы, которые куда-либо ссылаются:

• на другую страницу;
• на какую-то секцию на странице;
• изменение get-параметров страницы.

То есть, по факту происходит физическое изменение ссылки при взаимодействии с элементом.

При клике на кнопку «назад» в галерее нам не нужно переходить на другую страницу или менять положение на странице. Нам всего лишь нужно поменять слайд. В этом случае используется <button>.

@pepelsbey Подскажите пожалуйста, почему в разметке мы оборачиваем изображение в тег p ? В качестве причины указано - "визуальное описание товара", но мне кажется немного непонятное объяснение.

@ZomboBombo, по ТЗ там должна быть кнопка, но мы улучшили её до ссылки, чтобы можно было попасть на страницу товара, если кликнуть правой кнопкой и открыть в отдельной вкладке. Это делать не обязательно.

Должно ли быть всё пространство тега main разделено тегами section, article, aside ? Или допустимо наличие областей, не попадающих в область этих тегов ?

@KBoyarchuk оборачивать картинку в параграф необязательно. С точки зрения вложенности тегов — проблем никаких, картинку дейтвительно можно завернуть в параграф и это будет визуальным описанием товара. Другое дело, что параграф здесь не будет нести особой пользы. Мы пересмотрим эту демку, спасибо.

@shkarov тег main описывает уникальное содержимое страницы, делить его на секции нужно тогда, когда эти секции действительно есть и их можно назвать. Если контент внутри — это одна секция, то её можно опустить. Секции имеющие смысл — это две и больше.