✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Альтернативы: <abbr>, <strong>

Тег <dfn> используется для обозначения термина, который впервые встречается (определяется) в тексте документа. Может использоваться в сочетании с тегом <dt>.

Атрибут title — дополнительная информация об элементе.

Тег <dfn> следует использовать только при первом появлении термина.

Примеры использования

Простое определение:

<p>
  <dfn>HTML</dfn> означает HyperText Markup Language.
</p>

Список определений:

<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>Язык разметки гипертекста</dd>
  <dt><dfn>CSS</dfn></dt>
  <dd>Каскадные таблицы стилей</dd>
</dl>

Для чего использовать тег <dfn>

  • Ввести термин в глоссарий или словарь.
  • Указать дополнительную информацию о термине или аббревиатуре.
  • Указать значение технического или специализированного термина.
  • Создать ссылку на термин, используемый во всём документе.
  • Обеспечить контекст для термина, используемого в документе.
  • Указать произношение слова.

Нюансы

Если тег <dfn> использовать неправильно или слишком часто, читатель может запутаться и не понять, какой экземпляр термина является определяющим.

Чем заменить тег

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


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Основное содержимое страницы. Тег body

Основное содержимое страницы. Тег body

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

✔️ Актуальный

🏗️ Семантический

📝 Спецификация

Тег <body> используется для размещения всего содержимого, которое отображается на веб-странице.

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок 1</h1>
    <p>Это параграф.</p>
  </body>
</html>

Атрибуты тега <body>:

  • onbeforeunload — сценарий, который выполнится, когда пользователь соберётся покинуть страницу.
  • onhashchange — сценарий, который выполнится при изменении URL.
  • onmessage — сценарий, который выполнится при получении сообщения от приложения.
  • onoffline — сценарий, который выполнится, когда браузер начнёт работать в автономном режиме.
  • ononline — сценарий для запуска, когда браузер начинает работать в режиме онлайн.
  • onpagehide — сценарий, который выполняется, когда пользователь переходит со страницы.
  • onpageshow — сценарий, который выполняется, когда пользователь переходит на страницу.
  • onunload — сценарий, который выполняется, когда пользователь покидает страницу.
  • onafterprint — сценарий, который выполнится после печати веб-страницы.
  • onbeforeprint — сценарий, который выполнится перед печатью веб-страницы.
  • onlanguagechange — сценарий, который выполнится при изменении языка документа.
  • onmessageerror — сценарий, который выполнится при возникновении ошибки в сообщении, полученном с помощью API Messaging.
  • onpopstate — сценарий, который выполнится при изменении состояния истории браузера.
  • onrejectionhandled — сценарий, который выполнится при обработке отклоненного обещания в объекте Promise.
  • onstorage — сценарий, который выполнится при изменении данных в объекте localStorage или sessionStorage.
  • onunhandledrejection — сценарий, который выполнится при возникновении отклоненного обещания в объекте Promise без обработки.
Читать дальше
  • 13 марта 2024
Жирный текст на сайте. Тег b

Жирный текст на сайте. Тег b

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <b> используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSS.

<p>Сегодня мы <b>не</b> будем работать допоздна!</p>

Сегодня мы не будем работать допоздна!

Читать дальше
  • 2 марта 2024
Контейнер для чего угодно. Тег <div>

Контейнер для чего угодно. Тег <div>

Тег <div> определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

<div class="section">
  <h2>Заголовок секции</h2>
  <p>Какое-нибудь содержимое секции</p>
</div>
Читать дальше
  • 6 октября 2023
Как добавить подпись в HTML. Тег <figcaption>

Как добавить подпись в HTML. Тег <figcaption>

Тег <figcaption> используется для добавления подписи к элементу <figure>. Обычно он размещается после других медиа-элементов, например, после <img>, и содержит описание либо название изображения или другого контента, находящегося внутри <figure>.

<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Описание изображения</figcaption>
</figure>

Устаревший атрибут align — выравнивание подписи относительно элемента <figure>.

Тег <figcaption> может использоваться только внутри элемента <figure>.

Валидный HTML требует, чтобы тег <figcaption> находился после элемента <img> или других медиа-элементов внутри <figure>. Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.

Читать дальше
  • 6 октября 2023
Метаданные HTML-страницы. Тег <meta>

Метаданные HTML-страницы. Тег <meta>

Тег <meta> содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Это описание веб-страницы">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Иван Иванов">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Тег <meta> помещается в <head> HTML-документа.

Атрибуты тега <meta>:

  • charset — кодировка символов в документе.
  • name — имя метаданных.
  • content — значение метаданных.
  • http-equiv — HTTP-заголовок для значения атрибута content.

Атрибут charset должен быть первым атрибутом в теге <meta>, а name и http-equiv нельзя использовать вместе.

Читать дальше
  • 4 октября 2023
Просто кнопка. Тег <button>

Просто кнопка. Тег <button>

Тег <button> создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега <button>:

  • name — имя кнопки.
  • type — тип кнопки, по умолчанию — submit. Атрибут type необходим, если указан атрибут value.
  • value — значение, которое будет отправлено на сервер при нажатии на кнопку.
  • disabled — указывает, что кнопка должна быть отключена.
  • form — одна или несколько форм, к которым принадлежит кнопка.
  • formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
  • formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
  • formmethod — метод HTTP, используемый при отправке данных формы.
  • formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
  • formtarget — указывает, где отображать ответ после отправки формы.
Читать дальше
  • 4 октября 2023
Независимый контент. Тег <article>

Независимый контент. Тег <article>

Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

<article>
  <h2>Заголовок статьи</h2>
  <p>Текст статьи...</p>
</article>

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

Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

Читать дальше
  • 3 октября 2023
Как встроить страницу через <iframe>

Как встроить страницу через <iframe>

Тег <iframe> позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования <iframe>:

<iframe src="https://example.com" width="600" height="400"></iframe>

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

Читать дальше
  • 3 октября 2023
Выпадающий список. Тег <select>

Выпадающий список. Тег <select>

Тег <select> используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.

Все опции списка должны быть обёрнуты в тег <option>.

Атрибуты тега <select>:

  • autocomplete — подсказка для функции автозаполнения формы;
  • disabled — делает элемент неактивным;
  • form — связывает список с формой;
  • multiple — позволяет выбрать несколько опций;
  • name — задает имя элемента, которое будет отправляться на сервер;
  • required — делает элемент обязательным для заполнения;
  • size — задает количество строк в списке.

Атрибуты value в тегах <option> могут быть использованы для отправки значений на сервер.

Читать дальше
  • 1 октября 2023