Временное скрытие содержимого

Сворачивание и разворачивание текста.

В HTML5 есть возможность добавлять элементы, которые возможно скрыть. Так называемые спойлеры. Пример, который мы рассмотрим ниже, иллюстрирует способ определения четкой семантической структуры для решения привычных задач, где возможно применения JavaScript.

Задание 1.

Создать сворачиваемый и разворачиваемые текст (спойлер) с помощью средств HTML5. Будьте внимательны, данные элементы отображаются корректно только в браузере Google Chrome.

Для того, чтобы решить эту задачу необходимо воспользоваться элементом <details>, поместив весь контент внутри данного элемента. С помощью элемента <summary> можно создать специальную область, так называемый фокус, благодаря которому текст будет разворачиваться. Таким образом, <summary> обладает управления сворачивания и разворачивания текста содержимого в <details>

Рисунок 1 – листинг кода к заданию 1.

Обратите внимание, что в <details> заключено следующим элементом <summary>, а далее размещено все содержимое контента.

Рисунок 2 – отображение файла в Google Chrome

Как видите, все отображается корректно, при нажатии на специальный значок нам выпадает вся вложенная информация. Однако, в Mozilla отображение не корректно:

Рисунок 3 – отображение файла в Mozilla

Таким образом, Вы наглядно убедились в том, что отображается данное задание корректно только в Google Chrome.

Задание 2 (самостоятельно)

Измените элемент <details> на <details open> объясните, что происходит в таком положении и какие изменения происходят.

Работа со списками.

В HTML5 есть свои приемы, которые позволяют решать стандартные задачи со списками.

Задание 1.

Необходимо, чтобы список начинался не с 1, а с 5 элемента.

Для решения данной задачи необходимо воспользоваться специальным служебным словом Start.

Рисунок 4 – листинг кода к заданию

Рисунок 5 – отображение в браузере.

Ранее атрибут start использовался исключительно в качестве презентационного. Однако, в HTML5 данный элемент стал играть роль управляющего нумерацией.

Задание 2.

Отобразить нумерацию списка в обратном порядке. Для этого есть специальный атрибут под название reversed.

Рисунок 5 – листинг кода к заданию

Рисунок 6 – результат работы данного атрибута в браузере

Задание 3.

Необходимо создать список с одинаковыми номерами. Для этого использовать атрибут value.

Рисунок 7 – листинг кода задания

Рисунок 8 – отображение в браузере

Таким образом, атрибут value позволяет выставить порядковый номер списка в зависимости от того, что было изначально задано по условиям. Удобно применять для рейтингов, когда, допустим разные люди занимают одинаковое место.

Временное скрытие содержимого.

Допустим, иногда существует нужда скрывать текст для не авторизованных пользователей. Именно в таких случаях используется атрибут hidden. Согласно спецификации HTML5 атрибут hidden должен применяться только для несуществующего или недоступного для данного пользователя контента. Тем не менее и объектная модель, и поисковые системы могут считывать текст, заключенный в данном атрибуте.

Данный элемент использовать нежелательно, лучше прописать в css display:none и visibility:hidden. Hidden необходимо использовать для добавления семантики.

Задание 1.

Скрыть текст с использование hidden.

Рисунок 9 – листинг кода задания

Рисунок 10 – отображение в браузере.

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

Рисунок 11 – исходный код страницы