Атрибут cite тега <del> — причина видалення фрагмента
автор: с3с
Загальний опис
автор: NagarD
- Нотатка
-
Браузери не відображатимуть значення атрибута
автор: с3сcite, проте воно буде доступне для скриптів та пошукових вистем.
Синтаксис
<del="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 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута cite теґа <del>
<h3>Приклад використання атрибуту <code>cite</code></h3>
<p>Кількість студентів, що навчаються в педагогічному університеті станом на 2019 рік становить <del cite="http://tnpu.edu.ua">4589</del> </del> <ins cite="http://tnpu.edu.ua">5004</ins>. Вибуло <del>240</del> студентів. </p>Спершу правка з cite і datetime — на вигляд це звичайні закреслений і підкреслений текст, атрибути не додають нічого. Далі те саме з правилом content: attr(cite), яке показує приховане значення, і нарешті запис, у якому джерело правки бачить сам читач.
HTML
<p class="head">Як це виглядає звичайно — жодної підказки й жодного посилання</p>
<p>Ціна квитка:
<del cite="/changelog#p12" datetime="2026-08-01">1200 грн</del>
<ins cite="/changelog#p12" datetime="2026-08-01">990 грн</ins>.</p>
<p class="head">Те саме, але з показаним вмістом атрибутів</p>
<p class="reveal">Ціна квитка:
<del cite="/changelog#p12" datetime="2026-08-01">1200 грн</del>
<ins cite="/changelog#p12" datetime="2026-08-01">990 грн</ins>,
а ось <del datetime="2026-08-01">правка без cite</del>.</p>
<p class="head">А так джерело правки бачить читач</p>
<p>Ціна квитка: <del datetime="2026-08-01">1200 грн</del> → 990 грн
(<a href="#changelog">чому змінилася</a>, запис у <cite>Журналі змін</cite> за 1 серпня).</p>CSS
p {
margin: 12px 0;
max-width: 560px;
line-height: 1.9;
}
.head {
margin: 22px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
del {
background: #fdeeee;
}
ins {
background: #f3fbf4;
}
.reveal del,
.reveal ins {
padding: 1px 4px;
border-radius: 3px;
}
.reveal del::after,
.reveal ins::after {
color: #1b4f9c;
font-family: ui-monospace, monospace;
font-size: .85em;
text-decoration: none;
}
.reveal del[cite]::after,
.reveal ins[cite]::after {
content: " [cite=" attr(cite) ", datetime=" attr(datetime) "]";
}
.reveal del:not([cite])::after {
color: #c0392b;
content: " [cite немає, лишилася тільки дата " attr(datetime) "]";
}Коментарі
Коментарів ще немає — будьте першим!