Html-структура заголовка и автора
Мы с коллегой обсуждаем, на что ни один из нас не может найти ответа где-либо в Интернете.
У меня есть список заголовков статей на домашней странице, а на макете дизайна над заголовком указан автор. Сейчас разметка:
<a href = "">
<h3>Headline 1</h3>
<span>Author Name</span>
</a>
<a href = "">
<h3>Headline 2</h3>
<span>Author Name</span>
</h3>
А затем я использовал бы flexbox css order, чтобы отобразить автора над заголовком. Мне это кажется семантически правильным, но нужно ли это вообще? Есть ли какие-то преимущества или недостатки или вообще не имеет значения, какой порядок в разметке?
Ответы 2
Неважно, какой порядок в разметке. Когда flexbox позволяет вам изменять порядок элементов, чем это разрешено. Что не разрешено, так это наличие h3 внутри элемента a.
Как правило, элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
Встроенные элементы могут содержать только данные или другие встроенные элементы.
Элемент a - это встроенный элемент. Элемент h3 - блочный элемент.
В списке заголовков, связанных с соответствующими статьями, вы не должны использовать элемент заголовка для заголовка. Каждый элемент заголовка создает раздел (с записью в структуре документа), что в таком случае не является оправданным.
Вы можете использовать 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).
Значит, это не повлияет и на пользователей специальных возможностей?