Тег ins: | HTML | WebReference

Leave a Comment / Разное / By /

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

Элемент <ins> (от англ. insert — вставить) предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

Браузеры обычно помечают текст в контейнере <ins> как подчёркнутый.

Синтаксис

<ins>Текст</ins>

Закрывающий тег

Обязателен.

Атрибуты

cite
Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime
Дата и время редактирования текста.

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

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>INS</title> </head> <body> <p>Заметим, что схожий результат с Firefox показывает и браузер Opera, но, как видно на рис.  1, в последующих версиях <del>этот недостаток был устранен</del> <ins>подход разработчиков этого браузера был изменен</ins>.</p> </body> </html>

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью <ins>

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

41213.511
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Продвинутая семантика и доступность

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

— HTML — Дока

  1. Кратко
  2. Как пишется
  3. Как понять
  4. Атрибуты
  5. На практике
    1. Иван Ельцов советует

Кратко

Секция статьи «Кратко»

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

Как пишется

Секция статьи «Как пишется»
<h5>Список дел</h5><ul>  <li>Помыть посуду</li>  <li>Полить цветы</li>  <li><ins>Погулять с собакой</ins></li>  <li><ins>Пропылесосить комнату</ins></li></ul>
          <h5>Список дел</h5>
<ul>
  <li>Помыть посуду</li>
  <li>Полить цветы</li>
  <li><ins>Погулять с собакой</ins></li>
  <li><ins>Пропылесосить комнату</ins></li>
</ul>
Открыть демо в новой вкладке

Как понять

Секция статьи «Как понять»

По умолчанию браузеры применяют к <ins> подчёркивание с помощью text-decoration: underline. Такого же эффекта можно добиться, используя тег <u> или просто применив к тексту text-decoration: underline. Однако <ins> стоит использовать в том случае, когда нужно подчеркнуть, что какой-то контент был добавлен и это важно. Хоть визуально отличий не будет, но это поможет, например, пользователям скринридеров.

Атрибуты

Секция статьи «Атрибуты»

Помимо глобальных атрибутов у <ins> есть специфические:

  • cite позволяет сослаться на информацию о правке;
  • datetime позволяет указать время правки.

Оба атрибута необязательные и помогают уточнить правку.

<h5>Сдача проекта</h5><ul>  <li>    <del>      Созвониться с подрядчиком по поводу актов    </del>  </li>  <li>    <ins cite="https://our-cool-customers.com/reports/upload">      Выгрузить отчёт в сервис заказчика    </ins>  </li>  <li>    <ins datetime="2021-12-21T15:00Z">      Ещё раз позвонить подрядчику и напомнить про акты    </ins>  </li></ul>
          <h5>Сдача проекта</h5>
<ul>
  <li>
    <del>
      Созвониться с подрядчиком по поводу актов
    </del>
  </li>
  <li>
    <ins cite="https://our-cool-customers.
 
 com/reports/upload">
      Выгрузить отчёт в сервис заказчика
    </ins>
  </li>
  <li>
    <ins datetime="2021-12-21T15:00Z">
      Ещё раз позвонить подрядчику и напомнить про акты
    </ins>
  </li>
</ul>

По умолчанию значения атрибутов невидимы для пользователя, но можно автоматически выводить их при помощи скриптов. Например, мы можем добавлять для всех новых пунктов дату и время добавления, это будет выглядеть примерно так:

Открыть демо в новой вкладке

На практике

Секция статьи «На практике»

Иван Ельцов советует

Секция статьи «Иван Ельцов советует»

<ins> часто используется вместе с <del> в кодовых базах для отображения изменений в коде. Например, при просмотре изменений в пулреквесте в GitHub мы видим список изменений примерно так:

<pre>  body {    font-size: 16px;    <del>color: black;</del>    <ins>color: white;</ins>  }</pre>
          
 <pre>
  body {
    font-size: 16px;
    <del>color: black;</del>
    <ins>color: white;</ins>
  }
</pre>
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<del>

alt + ←

→

<kbd>

alt + →

HTML-тег ins

❮ Назад Полный справочник HTML Далее ❯


Пример

Текст с удаленной частью и новой вставленной частью:

Мой любимый цвет синий красный!

Попробуйте сами »

Определение и использование

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

Совет:

Также обратите внимание на тег для разметки удаленного текста.

Поддержка браузера

Элемент
Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
ссылка URL-адрес Указывает URL-адрес документа, который объясняет причину, по которой текст был вставлен/изменен
дата-время ГГГГ-ММ-ДДTчч:мм:ссTZD Указывает дату и время вставки/изменения текста

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Используйте CSS для стилей и :





Мой любимый цвет синий красный!


Попробуйте сами »

Связанные страницы

Ссылка HTML DOM: Ins Object

Настройки CSS по умолчанию

следующие значения по умолчанию:

Пример

ins {
  text-decoration: underline;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Следующая ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

52 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


1 Top2 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Тег HTML »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее

Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: Руководство для начинающих
Что делает HTML-тег ?
Элемент используется для идентификации текста, вставленного в документ. Он часто сочетается с элементом , который идентифицирует удаленный текст, замененный текстом, содержащимся в элементе .
Дисплей
встроенный
Использование
семантический | textual

Пример кода 

 
Билеты на мероприятие стоят 5$ 10$.

Билеты на мероприятие стоят 5$ 10$.

Прозрачное обновление текста

В идеале страница с определенным URL-адресом будет существовать вечно. Но, естественно, информация меняется. В ответ на изменение информации у вас как веб-издателя есть три варианта действий:

  • Изменить содержимое без подтверждения
  • Не изменять содержимое
  • Изменить содержимое прозрачно часть контента является новой, не оригинальной для страницы, когда она была впервые опубликована. Это можно использовать для коротких встроенных исправлений…

     Ужин состоится в 7:30 8:00.

    Ужин состоится в 7:30 8:00.

    Или для более крупного обновления или исправления.

     
    Исправление: в этой истории изначально сообщалось, что Авраам Линкольн был убит в битве с динозаврами во время путешествия во времени. Это не точно. На самом деле это динозавры, а не Линкольн путешествовали во времени.
    Исправление: В этой истории первоначально сообщалось, что Авраам Линкольн был убит в битве с динозаврами во время путешествия во времени. Это не точно. На самом деле именно динозавры, а не Линкольн, путешествовали во времени.

    Теоретически также нет причин, по которым пара элементов и не может быть вложена внутрь другого элемента . (Хотя вы, возможно, не хотите заходить слишком далеко.)

     
      
    Исправление: в этой истории первоначально сообщалось, что Авраам Линкольн был убит в битве с динозаврами во время путешествия во времени. . Это не точно. На самом деле это динозавры, а не Линкольн путешествовали во времени.
     
    Исправление: недавнее обновление этой истории подразумевало, что Авраам Линкольн был убит путешествующими во времени динозаврами. Ни история, ни обновление не дали понять, что это лишь одна из нескольких теорий, рассматриваемых в настоящее время.  Точные обстоятельства остаются загадкой.

    Исправление: В этой истории изначально сообщалось, что Авраам Линкольн был убит в битве с динозаврами во время путешествия во времени. Это не точно. На самом деле именно динозавры, а не Линкольн, путешествовали во времени. Исправление: Недавнее обновление этой истории подразумевало, что Авраам Линкольн был убит путешествующими во времени динозаврами. Ни история, ни обновление не дали понять, что это лишь одна из нескольких теорий, рассматриваемых в настоящее время. Точные обстоятельства остаются загадкой.

    Подсказка: У WordPress (на котором работает этот сайт, а также 25% сайтов в Интернете) возникают проблемы с вставкой и удалением элементов, содержащих несколько абзацев. Это связано с их автоматической вставкой элементов абзаца. Если вам нужно отобразить несколько абзацев удаленного или вставленного текста в WordPress, лучше всего разместить отдельный элемент вставки или удаления внутри каждого элемента абзаца, а не вокруг него.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *