: Is it good for SEO and not bad for user experience to turn headers into links? I have a parent article that talks briefly on child articles, and has this pattern: H1 - Parent Article A small
I have a parent article that talks briefly on child articles, and has this pattern:
H1 - Parent Article
A small introduction
H2 - Sub Article Title 1
Some content
H2 - Sub Article Title 2
Some content
Conclusion
What is the best approach to create links to sub articles if we take into consideration SEO and User experience?
Is it normal/common to turn headers into links?
PS: I want to link to external child articles (another pages), not to internal blocks within the same the pase.
More posts by @Cody1181609
2 Comments
Sorted by latest first Latest Oldest Best
H1 should be the same as the article's title, so it has no sense that H1 becomes a link.
H2 could be marked up as link, but as an anchor, like <h2><a name="h2anchor">text</a></h2>
Then, if you want to make a link / an internal jump to your H2, you link to it with
<a href="#h2anchor">jump to H2</a>
or, in full, absolute address notation:
<a href="http://www.example.com/your-page#h2anchor">jump to H2</a>
Try this format:
<!DOCTYPE HTML>
<html>
<head>
<title>Some page</title>
</head>
<body>
<h1>Major title</h1>
<h2>Table of contents</h2>
<ol>
<li>
<a href="#one">Section One</a><br>
</li>
<li>
<a href="#two">Section Two</a><br>
</li>
<li>
<a href="#three">Section Three</a><br>
</li>
</ul>
<a name="one">
<h3>Section One</h3>
<p>one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one </p>
<p>one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one </p>
<a name="two">
<h3>Section Two</h3>
<p>two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two </p>
<p>two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two </p>
<a name="three">
<h3>Section Three</h3>
<p>three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three </p>
<p>three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three </p>
</body>
</html>
I apologize for a rather unprofessional HTML page, but I need to illustrate something.
I have the major headings at the top so they are easy to see and I also have H1 before H2 since the text in H1 is the most important and H2 complements the title.
I defined the sections in H3 headers and I created links to each section. so that in the table of contents, when someone selects a section, the browser automatically scrolls the screen to the section.
My code is generally valid for HTML 4. For HTML 5 compatibility, you may have to change <a name="whatever"> to either <a ID="whatever"> or just remove <a name="whatever"> and replace it with ID="whatever" and insert that into an H3 tag so that you get for example: <h3 ID="three">Section Three</h3>
I personally would never turn a header into a link because that isn't the purpose of a header. If you want links as large-sized or bolded text, you should try to use cascading stylesheets and apply a style to the text.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.