Правильное построение html ссылки с картинкой

Самая простая конструкция обычной ссылки:

<a href="/images/favicon.png">фавикон<a/>

Результат - фавикон

Пропишем свойство "title", для поисковиков, при наведении выводится поясняющая надпись (безболезненно улучшает ключевую массу на странице):

<a href="/images/favicon.png " title="иконка сайта">фавикон<a/>

Результат фавикон- наведите мышку на ссылку.

Вставим картинку в ссылку:

<a href="/images/favicon.png " title="иконка сайта"><img src="/images/favicon.png"/><a/>

Результат -

Прописываем свойство "alt", для увеличения ключевой массы + если картинки отключены будет ее словесное описание:

    <a href="/images/favicon.png" title="иконка сайта">
    <img src="/images/favicon.png" alt="здесь должна быть иконка для сайта"/>
    <a/>

Результат: здесь должна быть иконка для сайта, если картинка не загрузилась: здесь должна быть иконка для сайта

Попробуем прописать свойство "alt" в тег <a> и посмотрим что измениться:

<a href="/images/favicon.png" title="иконка сайта" alt="здесь должна быть иконка для сайта"> 
<img src="/images/favicon.png" />
<a/>

Результат: , если картинка не загрузилась:

Делаем вывод что свойство "alt" надо прописывать только внутри тега <img>

Зато, насколько мне известно, свойство "title" можно прописать и там и там. Проверим.

В прошлых вариантах мы посмотрели в теле ссылки - свойство работает.

Теперь сделаем его в теле картинки -

<a href="/images/favicon.png"><img src="/images/favicon.png" title="иконка сайта"></a>

Результат - работает.

Как сделать так чтобы ссылка открывалась в новой вкладке - свойство "target"

Уделите внимание данной возможности, она увеличивает время нахождения пользователя на сайте, а следовательно улучшает поведенческие факторы.

<a href="/images/favicon.png " title="иконка сайта" target="_blank">фавикон</a>

Результат - фавикон нажмите и у вас откроется новая вкладка с иконкой.

Как сделать так чтобы все ссылки на сайте автоматически открывались в новых вкладках:

Для этого нужно всего-лишь в секции head страницы прописать следующее:

<head>
<base target='_blank' />

Кстати, про тег base

У него есть еще атрибут href, который указывает, какой полный адрес будет использоваться, если в теле документа применяется относительный адрес.

Например, если указать такое значение для href:

<head>
<base href="//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/">//www.mysite/myResources/" />

То все относительные пути в теле страницы, наподобие:

<img src="images/polezniy.gif">

будут расцениваться как:

">

Подведем итоги:

Правильная ссылка выглядит:

<a href="/images/favicon.png " title="иконка сайта">фавикон<a/>

Правильная ссылка картинкой:

    <a href="/images/favicon.png" title="иконка сайта">
    <img src="/images/favicon.png" alt="здесь должна быть иконка для сайта"/>
    <a/>