Вложенные ссылки в HTML

Как известно, в спецификации HTML чётко указано, что вложенных ссылок нет и быть не может. Но, буквально на днях, Роман Комаров (разработчик интерфейсов в Яндексе) предложил поистине простой и вполне рабочий вариант решения данной проблемы.

Суть проблемы

Дело в том, что при написании данной конструкции:


<a href="#post">
	Название поста </a><a href="#category">Категория</a><br />
	Анонс поста

Парсер браузера просто «съест» ваш код и на выходе вы получите:


<a href="#post">
	Название поста</a> <a href="#category">Категория</a><br />
	Анонс поста

Что, соответственно, является совсем не тем, чего вы хотели добиться, вкладывая ссылки друг в друга.

Решение проблемы

Чтобы пофиксить данное стандартное поведение браузера (который следует указаниям спецификации), достаточно вложенную ссылку обернуть в тег <object />:


<a href="#post">
	Название поста 
	<object>
		<a href="#category">Категория</a>
	</object><br />
	Анонс поста
</a>

Теперь все работает как надо. За разъяснениями милости прошу в блог Романа.

Поддержка браузерами

Браузер Версия
Internet Explorer 9+
Firefox 4+
Opera 9+
Google Chrome 14+
Safari 5.1+

Источник: https://www.kobzarev.com/makeup/nested-links/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: