Как добавить якорный тег <a>в блок HTML? - PullRequest
Новая
       23

Как добавить якорный тег <a>в блок HTML?

2 голосов
/ 10 декабря 2010

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

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>

HTML5 разрешает заключать HTML в якорный тег (я думаю). Смотри ниже 

<a href="goThere.html">
    <div id="clickableLink">
        <h3>Link Heading</h3>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </div>
</a>

Однако мне это кажется неправильным. Как программное обеспечение, такое как программы чтения с экрана, будет описывать ссылку.

Я также рассмотрел следующий трюк CSS. Я изменил HTML, чтобы быть 

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    <a href="goThere.html"></a>
</div>

, а затем использовал CSS для стилизации ссылки, чтобы охватить весь div. Смотрите ниже: 

#clickableLink {
    position: relative;
    width: 100px;
    height: 200px;
    z-index: 0;
}

h3 {
    z-index: 0;
}

img {
    z-index: 0;
}

a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    z-index: 1;
}

Это прекрасно работает во всех браузерах, кроме IE. У кого-нибудь еще есть предложения?

Ответы [ 2 ]

1 голос
/ 10 декабря 2010

Ваш первый подход на самом деле лучший. Чтобы описать вашу ссылку, вы должны использовать атрибуты элемента a, такие как title, alt и, возможно, любую разметку WAI-ARIA, которую вы хотели использовать. В любом случае, это хорошая отраслевая практика, позволяющая оборачивать содержимое в тег a, не беспокоясь о доступности.

0 голосов
/ 10 декабря 2010

То, что позволит старым браузерам правильно его отображать (и убедиться, что оно проверяется), это использовать встроенные элементы внутри встроенного элемента.Другими словами, элементы уровня блока не могут быть размещены внутри встроенных (согласно HTML, а не значениям, которые CSS может дать элементу).Затем вы можете использовать CSS, чтобы заставить span действовать как уровень блока.Таким образом, разметка может быть легко: 

<a href="goThere.html">
    <span id="clickableLink">
        <span class="headerthree">Link Heading</span>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </span>
</a>

Если вы объявите, что A - это уровень блока, вам даже не понадобится диапазон.Проблема в том, что вы теряете SEO в использовании элементов заголовка.Итак ...

Лучше всего, вероятно, оставить его специально для HTML5, как указано выше, даже если это кажется неправильным.Чтобы помочь SEO и читателям экрана, используйте тег заголовка, чтобы «описать» якорь.Код будет проверять просто отлично.Затем убедитесь, что ваш A является display: block, и я думаю, что старых браузеров будет отображать его тоже нормально.

...