When building a website, links and navigation are two important components that help users move from one page to another. Without good navigation, users may have difficulty exploring the content on our website. In this article, we will discuss how to create links and build simple navigation, as well as best practices to make your website structure user-friendly and SEO-friendly.

Links in HTML

The term link in HTML can be created using the <a> tag, which is short for anchor. The links we define can point to:

Other pages within our website (internal links)
Pages from other websites (external links)
Specific sections within the website on the same page Here is an example of a link declaration in HTML.

<a href="https://nganggurdev.com">Visit me!</a>

Let's try to understand from the example above:

<a> opening tag to create a link
The href attribute determines the destination of the link.
The text between the <a> and </a> tags is the part that users can click on.

Navigation in HTML

Navigation is a set of links used to make it easier for users to explore a website. Generally, navigation is placed at the top of the page and wrapped using semantic elements such as <nav>. Here is an example of simple navigation.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/article">Article</a></li>
    <li><a href="/about-us">About Us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Types of Links in HTML

There are three types of links in HTML, namely Internal Links, External Links, and Anchor Links. Let's discuss each one and look at examples of each of the three types of links.

Internal Link Directs the page we visit at the beginning to another page within the same site.

//link to article page
<a href="/article">Article</a>

External Link Directs to another website.

<a href="https://www.google.com" target="_blank">Visit Google</a>

Anchor Link Directs to a specific element or section on the same page.

<a href="#goIntoSection3">Section 3</a>

<section id="goIntoSection3">
    <p>this is the same page on the section 3</p>
</section>

Best Practice Links and Navigation for SEO

To ensure that your navigation system is search engine friendly (browser) and easy to use, here are some tips you need to know.

Make sure the anchor text is clear and descriptive, not just “Click Here.”
Use the <nav> element to wrap the <a> tag.
Always use internal links to connect content and strengthen the site structure.
Avoid too many links (spam) that are not very important on a single page. Here is an example of navigation implementation in HTML and applying SEO Friendly.

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Learn HTML Bsic: Link and Navigation - NganggurDev</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Newest Article</h2>
        <p>Read more article from us <a href="/blog/html-semantic">here</a>.</p>
      </article>
    </main>

    <footer>
      <p>© 2025 NganggurDev. All rights reserved.</p>
    </footer>
  </body>
</html>

Conclusion

Understanding how links and navigation work in HTML is an important step in building a structured, user-friendly, and SEO-friendly website. That way, your website will be much easier to access, both by users and search engines.

Thankyou, see you in the next article.

Learn HTML for Beginners #4: Link and Navigation

Links in HTML

Navigation in HTML

Types of Links in HTML

Best Practice Links and Navigation for SEO

Conclusion