Страницы

HTML-гиперссылка с содержимым, равным адресу

В HTML-файлах нередко возникает потребность в задании самосогласованных ссылок, чьё текстовое содержимое совпадает с адресом, на который она указывает.

<a href='https://wiki.oberon.org/ob/docu'>https://wiki.oberon.org/ob/docu</a>

Вместо нежелательного повторения содержимого в стиле можно указать содержимое для пустых элементов a.

<style>
  a:empty::before { content: attr(href); }
</style>
    
<a href='https://wiki.oberon.org/ob/docu'></a>
Изначально предложенный вариант через особый класс ссылок.
<style>
  a:self::before { content: attr(href); }
</style>
    
<a href='https://wiki.oberon.org/ob/docu' class='self'></a>

Если допустимо использовать JavaScript, то можно добиться наиболее короткой записи гиперссылки в HTML5:

<a>https://wiki.oberon.org/ob/docu</a>

<script>
  for (let a of document.getElementsByTagName('a')) {
    if (!a.href) a.href = a.text;
  }
</script>

3 комментария:

  1. Понравился способ, которым вы придумали это осуществить в имеющемся html/css. Таким образом можно повысить ошибкоустойчивость при правках.
    Самосогласованные - это ваш собственный термин?

    ОтветитьУдалить
    Ответы
    1. Слово "самосогласованность" не придумывал и не подбирал, просто, почувствовал, что его можно применить как и все остальные слова.

      Удалить
    2. Благодаря ИИ оказалось, что можно проще. Можно обойтись без лишнего класса self, если использовать условие empty

      Удалить