У меня есть страница, на которой я собираюсь перечислить несколько ссылок на сайты, которые давно исчезли, но могут храниться в архивах или иным образом идентифицироваться по их старым URL-адресам. Есть ли способ выразить эту идею в HTML?
4 ответа
Я рекомендую элемент <s>. В спецификации HTML5 говорится: / а>
Элемент s представляет содержимое, которое больше не является точным или более не актуальным.
Так ты мог бы сделать
<s class="dead-link">http://example.com/dead-link</s>
По умолчанию текст обычно зачеркивается, поэтому, если вы этого не хотите, добавьте CSS к эффекту
s.dead-link { text-decoration: none }
Таким образом, вы можете добавить элемент <a> вокруг элемента <s>, если у вас есть ссылка на заархивированную копию страницы, и таким образом отличить старый URL от ссылка на архив, которая есть.
Или, если у вас нет ссылки на архивную копию, вы можете опустить элемент <a> и все же выразить мнение, что URL-адрес больше не является точным.
s означает такую вещь в соответствии с черновиком HTML5, все существующие рекомендации HTML определяют это просто как чрезмерное зачеркивание (физическая разметка). Таким образом, HTML5 просто пытается сохранить этот элемент, присвоив ему «семантическое» значение. Нет никаких доказательств того, что браузеры или поисковые системы рассматривали его в соответствии с таким значением. И логически говоря, если вы используете его для мертвых ссылок, вы должны обернуть элемент a внутри s, а не наоборот. Это ссылка, а не текст ссылки, которая «больше не является точной».
HTML не имеет встроенной разметки для этой цели.
Обычно я обновляю ссылку либо на локальное зеркало, либо на обратную машину.
Вы можете использовать {{X0 }} атрибут:
Скрытый атрибут - это логический атрибут. Если указано на элемент, это означает, что элемента еще нет или больше нет , непосредственно имеет отношение к текущему состоянию страницы или к тому, что она используется для объявления контента, который будет повторно использоваться другими частями страницы как в отличие от прямого доступа пользователя.
(Акцент мой)
В своей таблице стилей вы должны отобразить их, потому что по умолчанию они будут скрыты.
<a class="dead-link" hidden href="//example.com">Link</a>
.dead-link {
display: inline;
}
onclick="return false" на тот случай, если URL-адрес был переназначен во что-то вредоносное или нерелевантное.
Этот ответ распространяется на ответ Ориола, в котором используется HTML-атрибут hidden.
Атрибут hidden
Скрытый атрибут - это логический атрибут. Если указано в элементе, это означает, что элемент еще не имеет или больше не имеет прямого отношения к текущему состоянию страницы или что он используется для объявления содержимого, которое будет повторно использоваться другими частями. страницы, в отличие от прямого доступа пользователя.
Прежде всего, атрибут hidden отсутствует в спецификации HTML401. Он впервые появляется в Рекомендации кандидата HTML5. Это означает, что любой документ HTML, в котором используется этот атрибут, должен включать в себя HTML5 doctype:
<!doctype html>
Атрибут hidden затем можно использовать следующим образом:
<a href="http://example.com" hidden> ... </a>
Браузеры обрабатывают атрибут hidden с помощью CSS, не делая ничего, кроме установки для него display: none. Если вы посмотрите эту демонстрацию JSFiddle (в которой используется только указанная выше разметка ), вы должны увидеть, что элемент <a> не отображается на панели результатов.
Стилизация мертвой ссылки
Мы можем переопределить это с помощью нашего собственного CSS. Это можно сделать разными способами, однако, поскольку вы приняли ответ Алохси, в котором используется HTML-код {{X0} } Я предполагаю, что вы хотите, чтобы ссылка отображалась с проходящей через нее линией. Для этого мы можем использовать свойство CSS text-decoration, в частности, ориентируясь на атрибут hidden:
a[hidden] {
color: inherit; /* Inherit the color from the parent. */
display: inline; /* Make the link visible. */
text-decoration: line-through; /* Put a line throguh it. */
}
Обратите внимание, как я также присвоил свойству color значение inherit - это заменяет цвет ссылки по умолчанию на цвет родителя. Это используется для того, чтобы ссылка отображалась как обычный текст в своем контейнере.
Обработка мертвой ссылки
В идеале мы должны сделать еще один шаг вперед, предотвратив переход пользователя по URL-адресу, указанному в неработающей ссылке. Это мера безопасности в случае, если URL-адрес был перенаправлен на что-то другое; в конце концов, вы не захотите рисковать тем, что контент на вашем веб-сайте будет ссылаться на что-то вредоносное.
Как предложил ответ Квентина, вы можете указать ссылку на локальное зеркало или Интернет-архив, однако это может не всегда работать, поскольку у вас может не быть локального зеркала, и в архиве могут не быть результатов для этой страницы.
Я думаю, что есть несколько вариантов, которые могут хорошо подойти:
Вариант 1. Блокировка открытия ссылки
Если мы введем некоторый JavaScript, мы можем заблокировать открытие нашей ссылки, просто добавив атрибут onclick в нашу разметку:
<a href="http://example.com" hidden onclick="return false"> ... </a>
Теперь, когда пользователь нажимает на ссылку, ничего не происходит. Однако на самом деле это не позволяет пользователю узнать, что происходит, поэтому вместо этого мы можем превратить его в функцию JavaScript, которая спрашивает пользователя, хотят ли они перейти по ссылке:
<a href="http://example.com" hidden onclick="return deadLink(this)"> ... </a>
function deadLink(obj, event) {
var
// Get the URL from the link
href = obj.href,
// Set the message we want to display to the user
message = "This link no longer points to the page it was originally" +
"intended for.\n\n" + href + "\n\n" +
"Do you want to follow the link anyway?";
/* Pass the message into a confirmation dialog to determine
* whether the user wants to follow the link or not. */
return confirm(message);
}
Это представляет пользователю следующий диалог:
Нажатие «ОК» приведет к тому, что функция confirm() вернет true, сообщая браузеру, что нужно перейти по ссылке. Нажатие «Отмена» вернет false, предотвращая открытие ссылки.
Проблема с этим подходом в том, что он не будет работать для пользователей, у которых отключен JavaScript. Поэтому мы можем захотеть заняться чем-нибудь еще ...
Вариант 2. Создание отдельной страницы с мертвыми ссылками на собственном веб-сайте.
Лучшим вариантом может быть создание новой страницы с "мертвой ссылкой" на вашем веб-сайте, которая могла бы:
- Сообщите пользователю, что такое неработающая ссылка.
- Позвольте пользователю скопировать URL-адрес в свой буфер обмена.
- Предоставьте пользователю параметры для загрузки страницы, например, ссылку на локальное зеркало или Интернет-архив, как указано выше.
<a href="http://example.org/dead-link?url=http://example.com" hidden> ... </a>
Здесь http://example.org/dead-link - это ваша страница с "мертвой ссылкой", созданная на вашем собственном веб-сайте, а http://example.com - это мертвый URL-адрес, который мы передаем на страницу через строку запроса url.