Правильный синтаксис HTML для этого блока 'icon'

Question

Хорошо, поэтому я пытаюсь переделать свой веб-сайт, и я хотел спросить, правильный ли это синтаксис HTML, который я использую.

Код HTML выглядит примерно так:

<a href="http://the_url.com" target="_blank">
    <img src="../img/id.png" width="32" height="32" alt="id" />
    <h4>Title</h4>
    <p class="des">Description</p>
</a>

идля CSS я в основном делаю тег для отображения в виде блока.

Это правильное кодирование или я должен переделать его по-другому?Вы можете увидеть пример на http://varemenos.com

Answer 1

В соответствии со спецификацией HTML5 тега <a> этот синтаксис действителен.Это не было в прежних версиях HTML.

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

Answer 2

Этот веб-сайт может вас заинтересовать: W3 validator .

В соответствии с валидатором, ваш веб-сайт действителен в формате HTML5.

Answer 3

Вы используете блочные элементы (h4 и p) внутри встроенного элемента (a).Это не «правильно».

Это можно исправить, добавив правило CSS, чтобы у a было display:block или display: inline-block.