Можно ли вкладывать тег a в a?

Question

[Ankozar]

Сервер мне отдаёт json с массивом, каждый элемент которого - вот такая разметка:

<a class='piece_of_news pon0' href='https://depkult.admtyumen.ru/OIGV/culture/news/more_news.htm?id=11890568@egNews'>
    <p class='news_title title0'>Тюменцы выразят любовь к родному краю в новом конкурсе
    </p>
         <div class='news_image_div image_div0'>
              <img class='news_image image0' src='https://depkult.admtyumen.ru/images/thumbnails/300_200/t_1204985438_body.jpg'>
         </div>
    <p class='news_source source0'>
           <a href='https://depkult.admtyumen.ru/OIGV/culture/news/news.htm' class='source_url'> Источник: Департамент культуры Тюменской области 
           </a>
    </p>
    <p class='news_date date0'>19-01-2021</p>
</a>

Для удобства поставил абзацы, а так всё в одну строку.

При этом в браузере отображается вот так:


То есть, он первый тег a закрывает перед вторым. Результат:



А если элемент .source_url меняю на, например, p, то отображается норм:



Все элементы в первом блоке a. Результат:



Вопрос: a в a вообще вкладывать нельзя? Или как быть в этом случае?

Мне нужно чтобы заголовок, картинка и дата вели на страницу с новостью, а название источника вело на страницу с новостной лентой источника. То есть, на разные страницы. Но при этом желательно чтобы всё это было в одном блоке.

Comments

[Ankhena]

Вопрос: a в a вообще вкладывать нельзя?

Вообще-вообще нельзя. Об этом написано в спецификации и это говорит валидатор.

Или как быть в этом случае?

Не вкладывать ссылки в ссылки.
Оберните заголовок с картинкой в ссылку, дату в ссылку и источник в свою ссылку.

Но при этом желательно чтобы всё это было в одном блоке.

И сложите это в один блок, li (если это список новостей) или article.

Answer 1

[Rsa97]

В элемент <a> нельзя вкладывать интерактивные элементы (<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>).
Повесьте на вложенный элемент обработчик события click и выполняйте переход средствами JavaScript.

Answer 2

[Steppp]

Когда что то сверсткал, копируй сюда Валидатор и чекай код на ошибки

Comments

[Ankozar]

Спасибо