Главная / Верстка / Теги html / details тег html

details тег html


12.07.2013 21:462233

Описание

Тег details используется в html для хранения информации , которую можно скрыть или показать по требованию пользователя.  Действие данного html-тега напоминает раскрывающееся по клику меню .

Очень хорошо данный тег подходит для создания интерактивных виджетов , которые пользователь может открывать и закрывать сам на свое усмотрение. Также внутрь можно вставлять различный контент.

По умолчанию содержимое тега не отображается , для изменения статуса применяется атрибут open , который показывает/скрывает информацию внутри тега.

Присутствие атрибута open подразумевает что при просмотре информация находящаяся внутри тега details будет видна сразу. Если же вы хотите чтобы информация была скрыта , и открывалась по клику , используйте тогда тег <details> без атрибута open!

Совет по использованию тега <details>:

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

А нам , допустим , для того чтобы привлечь внимание , нужно определенное слово.  Например : Изучить HTML5 онлайн

Вот тут нам как раз и пригодится тег <summary> , который используется для указания заголовков для видимых частей тега details , при нажатии на который  можно  просмотреть / скрыть детали.

Атрибуты

АТРИБУТ ЗНАЧЕНИЕ ОПИСАНИЕ
open open определяет показаны детали или скрыты 

Пример

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Тег details</title>
</head>

<body>

<details>
<h1>HTML5-это технологии будущего</h1>
<p>Все больше пользователей ищут информацию , хотят изучить нововведения . Так чем же так приглянулся html5
тем кто сегодня разрабатывает браузеры , разработчикам веб-приложений , вебмастерам и целым корпорациям
- "акулам www" которые диктуют стандарты , моду , правила всем нам ?</p>
</details>Теперь добавим тег summary который обозначит заголовок для тега details:
<details>
<summary>Об html5</summary>
<p>Все больше пользователей ищут информацию , хотят изучить нововведения . Так чем же так приглянулся html5
тем кто сегодня разрабатывает браузеры , разработчикам веб-приложений , вебмастерам и целым корпорациям
- "акулам www" которые диктуют стандарты , моду , правила всем нам ?</p>
</details>И напоследок все то же самое но с открытым списком с помощью атрибута open:
<details open="open">
<summary>Об html5</summary>
<p>Все больше пользователей ищут информацию , хотят изучить нововведения . Так чем же так приглянулся html5
тем кто сегодня разрабатывает браузеры , разработчикам веб-приложений , вебмастерам и целым корпорациям
- "акулам www" которые диктуют стандарты , моду , правила всем нам ?</p>
</details>

</body>

</html>

 

 


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
<details open="open">...</details> обязателен

Браузеры поддерживающие <details>

Element
<details> 12.0 Not supported 49.0 6.0 15.0


Details , Html , Тег , Тег Details





«details тег html» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям