Справочник HTML на D

Тег <data>

Тег <data> содержит данные в формате, понятном человеку, а в его атрибуте value — в формате, понятном машинам. К примеру, это может быть код товара, который машина обработает и покажет пользователю соответствующий товар.

Если контент связан со временем или датой, то нужно использовать тег <time>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<data value="10">Десять</data>

Тег <datalist>

Тег <datalist> предназначен для создания списка вариантов ввода, которые можно выбрать для заполнения текстового поля. Изначально этот список скрыт и становится доступным при наведении на поле курсора.

В основном для создания вариантов выбора опций используют тег <option>. Тег <datalist> не будет работать, если между элементами <input> и <datalist> будет любой другой элемент c атрибутом id.

Атрибуты

Атрибут id — он связывает список <datalist> с текстовым полем, а его значение должно совпадать со значением атрибута list элемента <input>.

Пример

<p>Выберите себе хобби из списка:</p>
<input list="hobby">
  <datalist id="hobby">
    <option value="Скейтборд">
    <option value="Гольф">
    <option value="Домино">
  </datalist>

Результат

Тег <dd>

Тег <dd> — один из трёх элементов списка описаний, наряду с <dl> и <dt>, где

Допускается несколько терминов с общим описанием, так же как и один термин может иметь несколько описаний.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Герои «Книги джунглей» Киплинга</p>
<dl>
  <dt>Шер-хан:</dt>
    <dd>Злой бенгальский тигр.</dd>
  <dt>Табаки:</dt>
    <dd>Верный сподвижник Шер-хана.</dd>
  <dt>Маугли:</dt>
    <dd>Вопитанник волчьей стаи.</dd>
    <dd>Борец за справедливость в джунглях.</dd>
</dl>

Результат

Тег <del>

Тегом <del> помечают текст, который был удалён в новой версии документа, что позволяет фиксировать изменения в документе. Браузеры помечают текст в теге <del> как перечёркнутый.

<del> противоположен по значению тегу <ins>, которым помечают добавленный текст.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<ul>
    <li><del>Покрасить балкон.</del></li>
    <li>Полить кактусы.</li>
    <li><ins>Заказать пиццу.</ins></li>
</ul>

Результат

Тег <details>

Тег <details> используют для создания блока с раскрывающимся контентом, или «аккордеона», на чистом HTML.

По умолчанию содержимое блока скрыто, а вместо него браузер выводит надпись «Сведения», клик по которой раскрывает или прячет содержимое элемента. Эту надпись можно заменить на свою, если добавить заголовок <summary>.

Разрешается вкладывать <details> в <details>.

Атрибуты

Пример

<details>
   <summary>Открыть</summary>
     <p>Вот аккордеон и раскрылся!</p>
</details>

Результат

Тег <dfn>

Тегом <dfn> выделяют новые и малознакомые термины, обычно при их первом упоминании в тексте. Браузеры отображают содержимое <dfn> курсивом.

Определение термина задают в атрибуте title, а если у <dfn> есть вложенный тег <abbr>, для расшифровки аббревиатуры, то с помощью атрибута title в теге <abbr>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>А цена ему была: не дороже <dfn title="Три копейки">алтына</dfn>.</p>

Результат

Тег <dialog>

Тег <dialog> создаёт всплывающее диалоговое окно. Используется, например, для формы входа на сайт. По умолчанию содержимое окна скрыто от пользователя, но его можно отобразить через атрибут open или с помощью JavaScript.

Для открытия окна используют метод show(). А метод showModal() открывает модальное окно, это когда все остальные элементы на странице блокируются, а кнопки не работают до тех пор, пока диалоговое окно не будет закрыто.

Для закрытия окна в коде применяют метод close(), как в примере.

Атрибуты

Для элемента доступны глобальные атрибуты.

Синтаксис

<dialog open>..</dialog>

Пример

<button type="button" onclick="window.myDialog.show()">Открыть окно</button>
<dialog id="myDialog">
<p>Диалоговое окно!</p>
<button type="button" onclick="window.myDialog.close()">Закрыть окно</button>
</dialog>

Результат

Тег <div>

Тег <div> — блочный элемент, с его помощью группируют элементы, чтобы задать им стили визуального оформления. Для этого используют атрибуты class и id, и свойства CSS.

Атрибуты

Для элемента доступны глобальные атрибуты.

Синтаксис

<div>..</div>

Тег <dl>

Тег <dl> — один из трёх элементов списка описаний, наряду с <dt> и <dd>, где

В теге <dl> допускаются несколько терминов с общим описанием, так же как и один термин может иметь несколько описаний.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Список терминов из «Джентельменов удачи»</p>
<dl>
  <dt>Редиска:</dt>
    <dd>нехороший человек.</dd>
  <dt>Моргала выколю</dt>
  <dt>Пасть порву:</dt>
    <dd>угрозы.</dd>
  <dt>Фуфло толкать:</dt>
    <dd>обманывать.</dd>
</dl>

Результат

Тег <dt>

Тег <dt> — один из трёх элементов списка описаний, наряду с <dl> и <dd>, где

Допускается несколько терминов с общим описанием, так же как и один термин может иметь несколько описаний.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Герои «Книги джунглей» Киплинга</p>
<dl>
  <dt>Шер-хан:</dt>
    <dd>Злой бенгальский тигр.</dd>
  <dt>Табаки:</dt>
    <dd>Верный сподвижник Шер-хана.</dd>
  <dt>Маугли:</dt>
    <dd>Вопитанник волчьей стаи.</dd>
    <dd>Борец за справедливость в джунглях.</dd>
</dl>

Результат