Тот же текст для и
Что вы думаете о том, чтобы иметь одинаковый контент для тегов H1 и H2 в статье? Похоже на вброс ключевых слов, верно? Пример:
<h1>Bananas <span>Musa × paradisiaca</span></h1>
<h2>Bananas <span>Musa × paradisiaca</span></h2>
<h2>Description</h2>
<p>Bananas are long and yellow. Bananas are long and yellow.</p>
<h2>Taste</h2>
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>
Как вы думаете, это плохая практика? Так создается графический макет страницы, поэтому заголовок должен повторяться (между ними есть высокое изображение), и мне интересно, не лучше ли было бы сделать разметку примерно такой (в данном случае <p>), но стилизованной так, как это выглядит h2.
Не могли бы вы предложите что-нибудь другое вместо <p>, что лучше подходит для названия, состоящего из 2-3 слов? Это чисто дизайнерская идея, и я бы даже не возражал против того, чтобы поисковые системы не индексировали эту строку.
<h1>Bananas <span>Musa × paradisiaca</span></h1>
<p class="h2">Bananas <span>Musa × paradisiaca</span></p>
<h2>Description</h2>
<p>Bananas are long and yellow. Bananas are long and yellow.</p>
<h2>Taste</h2>
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>
(Span имеет набор display: block, так что он переходит к следующей строке)
2 answers
Не используйте другой элемент заголовка для дублированного содержимого. Заголовки (h1-h6) служат различным целям (создание структуры документа, навигация для пользователей программы чтения с экрана и т.д.). Дублированный заголовок бесполезен и может быть неудобным или приводить к путанице.
Правильный способ - использовать другой элемент и стилизовать его в соответствии с вашим предполагаемым дизайном. Использование p для этого кажется подходящим; в противном случае бессмысленное div.
Чтобы прояснить чтобы этот текст не был частью основного содержания раздела, вы могли бы использовать header элемент для группировки заголовка, дублированного текста заголовка и изображения (при условии, что изображение также является частью заголовка).
Чтобы дать понять, что дублированный текст не имеет отношения к делу и служит только эстетической цели, вы можете использовать роль WAI-ARIA presentation.
Таким образом, ваш раздел будет содержать:
<header>
<h1>Bananas <span>Musa × paradisiaca</span></h1>
<img src="tall-image.png" alt="" />
<p role="presentation">Bananas <span>Musa × paradisiaca</span></p>
</header>
Это действительно похоже на заполнение ключевых слов.
Подумайте о тегах заголовков в качестве оглавления для остального содержимого страницы. При удалении всей остальной информации на странице. Ваши заголовки должны быть читаемы как оглавление.
При просмотре оглавления, в котором ключевые слова используются снова и снова, невозможно определить, какой дополнительный контент должен быть включен в каждый раздел оглавления.