Что делать, если надо вставить блочный тег в строчный?

Question

[KononovD]

Здравствуйте!
Пока учился верстать набрел на слова, что нельзя вкладывать блочные элементы в строчные, подумал "ну, в принципе, логично" и учился дальше. Прошел год, сижу на работе, верстаю магазин. Пришло время карточек товаров и тут неожиданность: По клику на карточку надо отправлять человека на страницу этого товара. Все бы ничего, но писать что-то типо

<article className="product-card">
    <a href={ link } >
        <div className="какие-то еще классы">
        </div>
    </a>
</article>

и потом делать <a> блочным через css - нет особого желания.
Ловить клик на карточку и делать ридерект из js - тоже выглядит костыльно. Может есть какие-то легальные и семантические решения?
Спасибо

Comments

[Rustam Bainazarov]

Вот как вы сделали, так и делайте дальше. Через CSS спокойно ссылкам можно поставить хоть display: flex;

[KononovD]

Рустам Байназаров, это касается только ссылок? или я легально могу делать блочными всякие span'ы, i, em, b, strong, sub, sup?

[Rustam Bainazarov]

KononovD, если этого требует верстка — да, именно так.

[KononovD]

Рустам Байназаров, справедливо ли это в обратную сторону? Семантичны ли будут строчные header, footer, main, figure, ect.?

[Rustam Bainazarov]

KononovD, семантика не связана с CSS. Да скринридеры а целом считывают разметку, а не стили (но они учитывают скрытые с помощью display: none элементы).

Поэтому — да, справедливо.

[KononovD]

Рустам Байназаров, окей, спасибо)

Answer 1

[nvdfxx]

делать <a> блочным через css - нет особого желания

Шо за глупости, так и нужно делать

Answer 2

[Алекс Глебов]

у ссылки прозрачная модель контента
в нее можно положить все то, что можно положить в её родителя, кроме интерактивного содержимого (других ссылок, кнопок, элементов форм, видео/аудио).

И нет в html5 никаких строчных и блочных тегов, читай спеку.

Comments

[KononovD]

И нет в html5 никаких строчных и блочных тегов, читай спеку.

в чем тогда разница между дивом и спаном? кроме того, что у одного d-block, у другого d-inline ,соответственно?

и можно еще какую-то статейку по поводу

у ссылки прозрачная модель контента

, пожалуйста?

[Алекс Глебов]

KononovD,

в чем тогда разница между дивом и спаном? кроме того, что у одного d-block, у другого d-inline ,соответственно?

div поточный, а span фразовый. Первый нужен для формирования потока страницы, второй для оформления текста и всяких мелочей.

и можно еще какую-то статейку по поводу

офф спека
https://www.w3.org/TR/html52/textlevel-semantics.h...
joxi.ru/bmo07Ykt3eNa72

вот есть перевод
https://webgyry.info/home/html5/spec_html5/
Тебе нужно почитать про контентные модели
в спеке указано для каждого элемента к какой группе он относится и элементы каких групп в него можно вкладывать

[KononovD]

Алекс Глебов, спасибо

[KononovD]

Алекс Глебов,
а как тогда быть в этом случае?
в тз говорится "по нажатию на любом месте карточки - пользователь переходит на страницу товара"
но тут так же есть и кнопки, которые интерактивные элементы, а как вы говорили выше:

в нее можно положить все то, что можно положить в её родителя, кроме интерактивного содержимого (других ссылок, кнопок, элементов форм, видео/аудио).

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

[Алекс Глебов]

KononovD, как вариант карточку оставить дивом, задать курсор поинтер и повешать onclick='window.location.href="/product"'
Для доступности ссылкой на страницу товара заголовок можно сделать.

Answer 3

[Алексей Непомнящий]

Может чего то не понимаю , а в чём проблема присвоить .product-card a {display: block;} ?

Answer 4

[Lord_Dantes]

Так и нужно. Ссылке делать дисплей блок.