Крім тексту, як посилань можна використовувати і малюнки. Зображення в цьому випадку треба помістити між тегами <a>і </a>, як показано в прикладі 1.
Приклад 1. Створення малюнка-посилання
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8">
<title>Посилання</title>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Приклад"></a></p>
</body>
</html>
Атрибут href тега <a> задає шлях до документа, на який вказує посилання, а src тега <img> – шлях до графічного файлу.
Навколо зображення-посилання автоматично додається рамка товщиною один піксель і кольором, що збігається з кольором текстових посилань.
Щоб прибрати рамку, слід у тега <img> встановити атрибут border = “0” (приклад 2).
Приклад 2. Видалення рамки навколо зображення
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8">
<title>Посилання</title>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" border="0" alt="Приклад"></a></p>
</body>
</html>
Можна також скористатися CSS, щоб прибрати рамку для всіх зображень, які є посиланнями. Для цього застосовується стильова властивість border cо значенням none (приклад 3).
Приклад 3. Використання CSS
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8">
<title>Посилання</title>
<style type="text/css">
A IMG { border: none; }
</style>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" alt="Приклад"></a></p>
</body>
</html>
Конструкція A IMG визначає контекст застосування стилів – тільки для тега <img>, який знаходиться всередині контейнера <a>. Тому зображення в подальшому можна використовувати як зазвичай.