How to Create Links in HTML

<!DOCTYPE html>
<html>
<head>
  <title>Links Example</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.8; }
    a { color: #2563eb; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .external::after { content: " ↗"; font-size: 0.8em; }
  </style>
</head>
<body>
  <h1>HTML Links</h1>
  
  <h2>Basic Link</h2>
  <a href="https://example.com">Visit Example</a>
  
  <h2>Open in New Tab</h2>
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Open in New Tab
  </a>
  
  <h2>Link to Email</h2>
  <a href="mailto:info@example.com">Send Email</a>
  
  <h2>Link to Phone</h2>
  <a href="tel:+1234567890">Call Us</a>
  
  <h2>Link to Section on Same Page</h2>
  <a href="#section1">Jump to Section 1</a>
  
  <h2 id="section1">Section 1</h2>
  <p>This is section 1 content.</p>
  
  <h2>Link with Image</h2>
  <a href="https://example.com">
    <img src="https://via.placeholder.com/100" alt="Click me" width="100">
  </a>
  
  <h2>Download Link</h2>
  <a href="document.pdf" download>Download PDF</a>
  
  <h2>Link Title (Tooltip)</h2>
  <a href="https://example.com" title="This is a tooltip">
    Hover over me
  </a>
  
  <h2>Bookmark Links</h2>
  <a href="#top">Back to Top</a>
  
  <h2>Styling Links</h2>
  <p>
    <a href="#" class="external">External Link</a>
  </p>
  
  <p id="top">Back at the top!</p>
</body>
</html>