How to Add an Internal Hyperlink in HTML: Copy-Paste Examples for Every Case

You don't need to be a developer to add a working hyperlink to a page. You need one tag, a couple of attributes, and to know which of three or four common patterns applies to your situation. This page is a straight reference — copy the code, swap in your own URL or text, done.

What Is an Internal Hyperlink?

An internal hyperlink is a link that points to another page (or another spot) on the same domain. A link from your blog post to your pricing page is internal. A link from your blog post to a news article on another company's site is external. Same HTML tag, different destination — that's the only real difference at the code level.

If you want the SEO reasoning behind when and how much to use internal versus external links, that's covered in depth on our internal and external linking in HTML guide. This page sticks to syntax.

The Basic HTML Anchor Tag, Explained

Anatomy of <a href="">

Every hyperlink in HTML uses the anchor tag: <a>. The link destination goes in the href attribute, and the clickable text goes between the opening and closing tags.

<a href="/pricing/">See our pricing</a>

That's it. "See our pricing" becomes clickable text, and clicking it sends the visitor to /pricing/ on the current domain.

Required vs. optional attributes

• href — required. The destination URL. Without it, the tag isn't a link.
• title — optional. Shows a small tooltip on hover. Doesn't affect rankings; it's a usability nicety.
• target — optional. target="_blank" opens the link in a new tab. Use sparingly — most internal links should stay in the same tab.
• rel — optional for internal links, important for external ones (more below). Tells the browser and search engines how to treat the link.

The full, official attribute list lives in the MDN documentation for the <a> element if you ever need the complete spec.

Internal Hyperlink Examples

Linking to another page on the same site (relative path)

This is the most common internal link. You skip the full domain and just point to the path:

<a href="/blog/how-to-improve-core-web-vitals/">how to improve Core Web Vitals</a>

Or with descriptive anchor text embedded in a sentence:

<p>Slow pages lose rankings — here's <a href="/blog/how-to-improve-core-web-vitals/">how to improve Core Web Vitals</a> on your site.</p>

Linking to a section on the same page (anchor/jump link)

Jump links need two parts: an id on the target element, and a link that points to that id with a # prefix.

<h2 id="faq">FAQ</h2>
<a href="#faq">Jump to FAQ</a>

This is how "table of contents" links work at the top of long articles — each heading gets an id, and each contents-list item links to that id.

Linking with absolute vs. relative URLs — which to use and when

A relative URL is just the path (/blog/post-name/). An absolute URL includes the full domain (https://capraseo.com/blog/post-name/).

<!-- Relative — recommended for internal links -->
<a href="/features/internal-linking-tool/">internal linking tool</a>

<!-- Absolute — also works, more typing -->
<a href="https://capraseo.com/features/internal-linking-tool/">internal linking tool</a>

For links within your own site, relative URLs are simpler to maintain — if you ever migrate domains, relative links keep working without edits. Use absolute URLs only when the link needs to work outside its normal context, like in an RSS feed or an email.

External Hyperlink Example (for contrast)

An external link always uses the full URL, because you're pointing off-domain:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">MDN's anchor tag reference</a>

Adding rel="noopener noreferrer" and when to use nofollow/sponsored

When a link opens in a new tab, add rel="noopener noreferrer" for security and privacy — it stops the new tab from being able to control the original page.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank" rel="noopener noreferrer">MDN's anchor tag reference</a>

Two other rel values matter for SEO on external links, per Google's own documentation on crawlable links:

• rel="nofollow" — tells Google not to pass ranking credit through the link. Use for links you don't personally vouch for.
• rel="sponsored" — use specifically for paid or affiliate links, so it's clear to Google the link was compensated.

Internal links to your own pages should almost never carry nofollow or sponsored — those exist to manage links you don't control, not your own site structure.

Turning an Image Into a Hyperlink

Wrap the <img> tag inside the <a> tag. The whole image becomes clickable:

<a href="/features/backlink-checker/">
<img src="/images/backlink-checker-screenshot.png" alt="CapraSEO backlink checker dashboard">
</a>

Always keep the alt attribute on the image itself — it's what search engines and screen readers read, separate from the link's destination.

Adding These in WordPress (Block Editor vs. Custom HTML Block)

In the standard Block Editor, you don't usually write raw HTML at all: highlight your anchor text, click the link icon (or press Cmd/Ctrl + K), paste the URL, and WordPress writes the <a href=""> tag for you behind the scenes.

You only need to hand-write the tag when:

• You're working inside a Custom HTML block.
• You're editing a theme template or a widget that accepts raw markup.
• You need a specific attribute the visual editor doesn't expose, like a jump link with an id, or rel="noopener noreferrer" on an external link.

In those cases, paste any of the code snippets above directly into the Custom HTML block and swap in your own path and anchor text.

Common Mistakes That Break Internal Links

• Broken relative paths. href="blog/post-name/" (no leading slash) resolves relative to the current page's folder, not your site root — it often points to the wrong place entirely.
• Wrong slashes or typos. hrer="..." or href="//blog//post//" will silently fail or misfire. Copy-paste the URL rather than retyping it.
• Forgetting the trailing slash when your site's URL structure expects one — inconsistent trailing slashes can create duplicate-content confusion for pages that resolve both with and without it.
• Linking to a non-canonical URL. If a page has moved or has a canonical tag pointing elsewhere, link to the canonical version, not an old redirect chain.
• Linking to nothing at all. Pages with zero internal links pointing to them are called orphan pages, and they're effectively invisible to both users and Google's crawler. We cover how to find and fix these in our guide to orphan pages.

FAQ

Does the exact HTML syntax affect SEO rankings?

Not directly. Google's crawler reads the href and the anchor text; it doesn't reward one valid syntax over another. What matters is that the link actually resolves (no broken paths), the anchor text is descriptive, and the destination is a real, canonical page.

How many internal links is too many?

There's no hard cap, but every link should genuinely help the reader get somewhere useful. Cramming a dozen forced links into one paragraph reads as spammy and dilutes the value of each one. Quality and relevance matter more than count — our deeper breakdown of anchor text and link volume lives in the internal and external linking strategy guide.

Do internal links need rel attributes?

Almost never. rel="nofollow" and rel="sponsored" exist to manage links you don't fully vouch for — typically external ones. Internal links are your own site telling itself how it's structured, so they should stay clean and "followed."

Want the Strategy, Not Just the Syntax?

This page covers what the code looks like. If you want to know where to actually place these links — which pages need more internal links, which anchor text to use, and how link equity flows through your site — CapraSEO's internal linking tool reads every page on your domain and suggests the highest-impact links to add, with the anchor text and source page already worked out. No monthly fee, no dashboard to babysit — just pay for the reports and fixes you actually run.