Блочный элемент внутри ссылки?

Question

[Руслан Кириченко]

Ребята учусь верстке, хорошо изучил html5, css3, и немного js. Вот на ютубе смотрю ролик как верстать макеты правильно. И из видео показано, что ссылка в оборачивается в блок. И внутри ссылки тоже есть блочный элемент. Насколько я помню что ссылка это строчный элемент, и внутри ссылки не должны быть блочные элементы - тогда мы должны сделать ссылку тоже блочной. Но ссылка то не блочная. Обьясните пожалуйста новичку?Да кстати и валидатор не ругается почему то..

<div class="grid__item">
                        <a href="" class="grid__link">
                            <img src="images/chapter/metal-microphone-macro.png" alt="" class="grid__pictures">
                            <div class="grid__overlay">
                                <div class="grid__text">
                                    Микрофоны
                                </div>
                            </div>
                        </a>
                    </div>

а вот с СSS:

.grid__item {
    float: left;
    width: 49.15%;
    margin-right: 1.7%;
    margin-bottom: 1.7%;
    position: relative;
}

.grid__item:nth-of-type(2n) {
    margin-right: 0;
}

.grid__overlay {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.2s;
}

.grid__overlay:hover {
    background: rgba(0, 0, 0, 0.8);
    transition: 0.3s;
    cursor: pointer;
}

.grid__pictures {
    max-width: 100%;
    display: block;
}

.grid__link {
    color: #ffffff;
    text-align: center;
    font-size: 1.8rem;
}

.grid__link:hover {
    font-size: 2rem;
}

.grid__text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 1

[Вадим]

хорошо изучил html5

Нет предела совершенству.

Блочно\строчные элементы больше не существуют как типы в контентной модели. Всё стало сложнее.

Контентная модель:
Оригинал в спецификации: https://html.spec.whatwg.org/#content-models
Перевод: https://html5book.ru/kontentnaya-model-html5/

Коротко: у ссылки сейчас "прозрачная" модель. То есть в неё можно вкладывать всё, что можно вкладывать в её родителя.

Comments

[Rsa97]

То есть в неё можно вкладывать всё, что можно вкладывать в её родителя.

Не всё. В ссылку нельзя вкладывать интерактивные элементы - другие ссылки, поля ввода, видео/аудио с управлением и т.п.

4.6.1 The a element
Content model:
Transparent, but there must be no interactive content descendant.

Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, details, embed, iframe, img, (if the usemap attribute is present), input (if the type attribute is not in the Hidden state), keygen, label, menu, (if the type attribute is in the toolbar state), object, (if the usemap attribute is present), select, textarea, video, (if the controls attribute is present).

[Вадим]

Rsa97, Потому я и скинул и ссылки на спецификацию и озаглавил данные слова пометкой "Коротко". И в контексте вопроса автора это не важно.

[Руслан Кириченко]

Вадим, Спасибо, понял!Видно я старую документацию читал.

[Вадим]

Руслан Кириченко, всегда пожалуйста ;-)

[Rsa97]

Вадим, По вашим ссылкам только общие слова о моделях, но ничего нет конкретно об исключениях для ссылок.

[Вадим]

Rsa97, Я правильно Вас услышал, Вы говорите, что во всей спецификации об этом не говорится?
Например, тут? https://html.spec.whatwg.org/#the-a-element

Answer 2

[Сергей]

Что тебя смущает? Всё содержимое в тэге а ,будет ссылкой...

Comments

[Руслан Кириченко]

да правильно, так там блочные элементы в ссылке.. а ссылка то ведь не блочная?В СSS если посмотреть то блочный элемент картинка.. А разве можно в тег <а> оборачивать блочные елементы?

[Сергей]

Руслан Кириченко, намекну, вставь свой тэг а, со всеми вложенными картинками и дивами, в какой-нибудь большой текст, и посмотри результат
а потом у тэга поиграйся со стилем display и поймешь разницу

[Ankhena]

Сергей,

а потом у тэга поиграйся со стилем display и поймешь разницу

Особенно хорошо и успешно можно играть в эту игру, например, если родитель флекс или грид. Или сама ссылка абсолют..
;)

А главное, вообще не имеет отношения к вопросу что можно или нельзя вкладывать в ссылку.

[Сергей]

Ankhena, автор также спросил нужно ли ссылку делать блочной, если в ней блочные элементы
вот я и посоветовал посмотреть на что влияет "блочность" ссылки
а то что родитель ссылки и ее окружения флекс или грид - это уже дело третье...