HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Links & Navigation

Hyperlinks are the glue that holds the Web together, allowing users to navigate from page to page.

The Anchor Tag `<a>`

Links are created using the anchor tag. The most important attribute is href (Hypertext Reference), which indicates the link's destination.

Types of Links

Absolute Links: Point to external websites (e.g., https://google.com).
Relative Links: Point to pages within your own website (e.g., /about.html).
ID Links: Point to a specific section on the same page (e.g., #contact-section).
Email Links: Open the user's email client (e.g., mailto:admin@example.com).

Use target="_blank" to open the link in a new tab.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #fff; }
    
    /* Navigation Bar Styling */
    .navbar {
      background-color: #333;
      overflow: hidden;
      border-radius: 5px;
      margin-bottom: 30px;
    }
    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      font-weight: bold;
      transition: background 0.3s;
    }
    .navbar a:hover {
      background-color: #e34c26;
      color: white;
    }
    
    /* Standard Link Styling */
    .content-link {
      color: #2980b9;
      text-decoration: none;
      border-bottom: 1px dotted #2980b9;
      font-size: 1.2em;
    }
    .content-link:hover {
      color: #e34c26;
      border-bottom: 1px solid #e34c26;
    }
    
    /* Button Link Styling */
    .btn-link {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 24px;
      background: #27ae60;
      color: white;
      text-decoration: none;
      border-radius: 30px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#about">About Us</a>
    <a href="#services">Services</a>
    <a href="mailto:contact@website.com">Email Us</a>
  </div>

<h2>Different Link Styles</h2>
  <p>Here is an example of an <a href="https://wikipedia.org" target="_blank" class="content-link">External Link opening in a new tab</a>.</p>
  
  <p>You can also style an anchor tag to look exactly like a button using CSS padding and background colors:</p>
  
  <a href="#" class="btn-link">I am an &lt;a&gt; tag styled as a Button!</a>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Links & Navigation

Links & Navigation

The Anchor Tag <a>

Types of Links

Try It Yourself

Topics

The Anchor Tag `<a>`