HTML структура заголовка и автора

Question

Мой коллега и я ведем дискуссию о том, что ни один из нас не может найти ответ где-либо в Интернете.

У меня есть список заголовков статей на главной странице, а у макета дизайна автор выше заголовка. Прямо сейчас разметка:

<a href="">
<h3>Headline 1</h3>
<span>Author Name</span>
</a>

<a href="">
<h3>Headline 2</h3>
<span>Author Name</span>
</h3>

И тогда я бы использовал flexbox css для отображения автора над заголовком. Мне кажется, это правильно с точки зрения семантики, но нужно ли это вообще? Есть ли какие-либо преимущества или недостатки или не имеет значения, какой порядок в разметке?

Answer 1

В списке заголовков, связанных с соответствующими статьями, не следует использовать элемент заголовка для заголовка. Каждый элемент заголовка создает раздел (с записью в схеме документа), что в таком случае не гарантируется.

Вы можете использовать элемент cite для имени автора и / или заголовка.

Если элемент заголовка не используется, независимо от того, семантически ли вы используете порядок автора-заголовок или заголовок-автор. Пойдите с тем, что более понятно для ваших пользователей.

Однако, поскольку у вас больше нет элемента уровня блока (h3), вы должны ввести некую пунктуацию (например, : или ()), чтобы уточнить, где находится автор / заголовок начинается, или вы можете разместить имя автора за пределами ссылки.

Демонстрируется несколько разных опций:

<!-- 'cite' element only for the headline -->

<cite><a href="">Headline</a></cite> (Author)
Author: <cite><a href="">Headline</a></cite>

<a href=""><cite>Headline</cite> (Author)</a>
<a href="">Author: <cite>Headline</cite></a>

<!-- one 'cite' element for both -->

<cite><a href="">Headline</a> (Author)</cite>
<cite>Author: <a href="">Headline</a></cite>

<cite><a href="">Headline (Author)</a></cite>
<cite><a href="">Author: Headline</a></cite>

<!-- two 'cite' elements -->

<cite><a href="">Headline</a></cite> (<cite>Author</cite>)
<cite>Author</cite>: <cite><a href="">Headline</a></cite>

<a href=""><cite>Headline</cite> (<cite>Author</cite>)</a>
<a href=""><cite>Author</cite>: <cite>Headline</cite></a>

---

Если вы сохраните h3 и не будете использовать элемент содержимого секционирования (например, article), порядок HTML имеет значение. Элемент заголовка устанавливает область действия для всего, что следует за (до тех пор, пока не достигнет заголовка более высокого уровня или уровня того же уровня), поэтому начало ссылки и имя автора (если используется заголовок автора заказа), не будет частью этого заголовка и его имплицитного раздела. Вместо этого они будут частью предыдущего раздела (то есть автор статьи 2 будет частью раздела статьи 1).

Answer 2

Неважно, какой порядок в разметке. Когда flexbox позволяет изменить порядок элементов, чем это разрешено. Недопустимо иметь h3 внутри a элемента.

Как правило, элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.

Встроенные элементы могут содержать только данные или другие встроенные элементы.

Элемент a является встроенным элементом. Элемент h3 является блочным элементом.