Атрибут cite тега <ins> — причина вставки фрагмента
Атрибут / параметр cite (від англ. "Cite" - «цитувати, посилатися») вказує адресу ресурсу, що пояснює зміну поточного документа, а саме, додавання нового тексту.
Загальний опис
автор: NagarD
Синтаксис
<ins cite="URL">Атрибут cite може отримувати єдине значення:
-
URL -
URL-адреса на сторінку, яка визначає зміст елемента
<iframe>. Можливі значення:- Абсолютний URL - вказує на інший веб-сайт (наприклад, longdesc=”http://www.example.com/description.txt”).
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, longdesc="description.txt").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Чотири правки поспіль. Перші три показують cite таким, яким його НЕ видно на справжній сторінці: адресу домальовано правилом content: attr(cite), і в третій одразу видно, що там не адреса, а випадковий рядок — браузер про це не скаже. Четверта — те, що варто робити насправді: правка з видимим посиланням на опис змін.
HTML
<p class="head">1. Додано текст, cite веде на опис правки</p>
<p>Тариф на послугу становить
<ins cite="/changes/2026-08-04" datetime="2026-08-04">240 гривень</ins>.</p>
<p class="head">2. Вилучено текст — той самий атрибут у del</p>
<p>Тариф на послугу становить
<del cite="/changes/2026-08-04" datetime="2026-08-04">180 гривень</del>
<ins cite="/changes/2026-08-04">240 гривень</ins>.</p>
<p class="head">3. У cite не адреса — і ніхто про це не скаже</p>
<p>Пункт 4 <ins cite="змінили на нараді">доповнено</ins> новим абзацом.</p>
<p class="head">4. Те, що бачить читач: видиме посилання поруч</p>
<p>Тариф на послугу становить
<ins cite="/changes/2026-08-04" datetime="2026-08-04">240 гривень</ins>
<a class="dzherelo" href="/changes/2026-08-04">чому змінили</a>.</p>
<p class="head">5. Блок усередині ins — так теж можна</p>
<ins class="blok" cite="/changes/2026-08-04">
<h3>Новий розділ</h3>
<p>Цілий блок тексту, доданий однією правкою.</p>
</ins>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
ins {
background: #f3fbf4;
text-decoration-color: #3a9a4f;
}
del {
background: #fff4f4;
text-decoration-color: #d64545;
}
/* цього НЕМАЄ у справжній сторінці — тут ми домальовуємо невидиме */
ins[cite]::after,
del[cite]::after {
content: " [cite: " attr(cite) "]";
color: #c0392b;
font-size: .8em;
white-space: nowrap;
}
ins[datetime]::after {
content: " [cite: " attr(cite) " · " attr(datetime) "]";
}
.dzherelo {
font-size: .9em;
}
.blok {
display: block;
max-width: 520px;
margin-top: 8px;
padding: 8px 12px;
border-left: 4px solid #3a9a4f;
text-decoration: none;
}
.blok h3 {
margin: 0 0 4px;
font-size: 1em;
}
.blok p {
margin: 0;
}Найпростіший приклад використання HTML атрибута cite теґа <ins>
<h3>Приклад використання атрибуту <code>cite</code></h3>
<p>Вдень 27 червня очікується сонячна погода, без опадів буде до <ins cite="https://ua.sinoptik.ua/погода-тернопіль" >+27</ins> <del cite="https://ua.sinoptik.ua/погода-тернопіль">+25</del> градусів тепла.</p>Коментарі
Коментарів ще немає — будьте першим!