Проблемы с вложенными элементами в <a>

Question

Итак, быстрый фон в том, что у меня есть страница с перечнем результатов, и для каждого я отображаю миниатюру (тег изображения), краткое описание (тег абзаца) и заголовок (тег заголовка). Элемент результата ссылается на его брошюру.

Я хочу, чтобы каждый результат (около 100 пикселей в высоту и полную ширину) представлял собой одну ссылку, а не имел бы изображение и заголовок как отдельные ссылки. Это связано как с дизайном, так и с SEO (чтобы иметь 1 ссылку, а не две для данного результата, с помощью контроля внутренних ссылок и количества ссылок на данной странице и т. Д.)

Проблема в том, что html4 и xhtml не допускают вложения заголовков или абзацев в ссылках.

Раньше я справлялся с этим, используя интервалы для заголовка и p, но на этот раз мне нужен заголовок в элементе результата.

Что я хотел бы знать, так это если у кого-то есть способ обойти это, и если нет, то каковы проблемы с несоблюдением стандартов в этом сценарии?

Спасибо Denis

Редактировать: Аплоги, если это не было ясно, надеюсь, это сейчас.

Answer 1

Short: №

Ссылки являются встроенными элементами (они текут как слова в отличие от блочных элементов, которые получают свою собственную строку). Стандарт HTML гласит: встроенные элементы не могут содержать блочные элементы.

Это имеет смысл. Подумайте об этом примере: слово1 БЛОК слово2. Как браузер должен макет BLOCK? Когда он сталкивается с элементом, он пытается заключить слова в как можно меньшее вертикальное пространство. Должен ли он вырваться из слова wrap, а потом вернуться позже? Или рассматривать BLOCK как слово (нарушая контракт, по умолчанию элементы блока получают ширину 100%)?

Тем не менее, большинство браузеров по-прежнему будут отображать это более или менее правильно. Но вы не можете зависеть от этого.

Answer 2

Все элементы: span, a, img header, соответствует xhtml! Вы должны написать закрывающий '/' для тегов без внутренних. например:

<img src="..." /> <!-- closing image -->

Использование:

<a href="..."><img src="..."/></a>