: Same text for and What do you think about having the same content for H1 and H2 tag in the article? It seems like keyword stuffing, right? Example: <h1>Bananas <span>Musa ×
What do you think about having the same content for H1 and H2 tag in the article? It seems like keyword stuffing, right? Example:
<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>
Do you think this is a bad practice? This is how graphic layout is made for a page so the title should repeat itself (there is a tall image between them), and I'm wondering if it would be better to have markup something like this (in this case <p>), but styled as so it looks like h2.
Would you suggest something else instead of <p> which better suits a title consisted of a 2-3 words? This is a purely design based idea and I wouldn't even mind telling search engines to not index this line.
<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 has a display: block set so that it goes to next line)
More posts by @Odierno851
1 Comments
Sorted by latest first Latest Oldest Best
Don’t use another heading element for the duplicated content. Headings (h1-h6) serve various purposes (generating the document outline, navigation for screen reader users, etc.). A duplicated heading is useless and can be bothersome or lead to confusion.
Using a different element and styling it according to your intended design is the correct way. Using p for this seems to be appropriate; otherwise the meaningless div.
To make clear that this text is not part of the section’s main content, you could use the header element to group the heading, the duplicated heading text, and the image (assuming that the image is also part of the header).
To make clear that the duplicated text is not relevant, and only serves an aesthetic purpose, you can use the WAI-ARIA presentation role.
So your section would contain:
<header>
<h1>Bananas <span>Musa × paradisiaca</span></h1>
<img src="tall-image.png" alt="" />
<p role="presentation">Bananas <span>Musa × paradisiaca</span></p>
</header>
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.