Syntax
<a href="url">Link Text</a>Examples
Basic Links
Different types of basic hyperlinks including external, internal, and email links.
<!-- External website -->
<a href="https://www.example.com">Visit Example</a>
<!-- Internal page -->
<a href="/about.html">About Us</a>
<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>Link Targets
Controlling how links open using the target attribute for different behaviors.
<!-- Opens in new tab -->
<a href="https://www.example.com" target="_blank">New Tab</a>
<!-- Opens in same tab (default) -->
<a href="https://www.example.com" target="_self">Same Tab</a>
<!-- With security attributes -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Secure External Link</a>Anchor Navigation
Creating jump links that navigate to specific sections within the same page.
<!-- Navigation menu -->
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<!-- Target sections -->
<section id="section1">
<h2>Section 1</h2>
<p>Content here...</p>
<a href="#top">Back to Top</a>
</section>Styled Button Links
Transforming links into button-like elements using CSS styling for better visual hierarchy.
<a href="/signup" style="display: inline-block; background: #007bff; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: bold;">Sign Up Now</a>
<a href="/learn-more" style="display: inline-block; background: transparent; color: #007bff; padding: 12px 24px; text-decoration: none; border: 2px solid #007bff; border-radius: 6px; font-weight: bold;">Learn More</a>Attributes
- href (URL): Specifies the destination URL or anchor
- target (string): Where to open the link (_blank, _self, _parent, _top)
- rel (string): Relationship between current and linked document
- download (string): Prompts download instead of navigation
- title (string): Tooltip text shown on hover
Best practices
- Always use descriptive link text - avoid "click here" or "read more" without context
- Add rel="noopener noreferrer" when using target="_blank" for security
- Use meaningful title attributes to provide additional context for users
- Ensure links have sufficient color contrast and are distinguishable from regular text
- Test keyboard navigation - links should be accessible via Tab key
- Consider adding visual indicators for external links or downloads
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
HTML Forms
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<details>, <summary>
The <details> element creates a native, collapsible disclosure widget — content that can be toggled open or closed by the user without any JavaScript. The <summary> element inside it defines the always-visible heading that acts as the toggle control. This is the standard way to build FAQ accordions or collapsible sections without hand-rolling the interaction logic.<dialog>
The <dialog> element represents a native modal or non-modal dialog box, such as a confirmation prompt, settings panel, or alert. It comes with built-in modal behavior (via the showModal() JavaScript method) including a backdrop and focus trapping, removing the need to hand-build accessible modal logic from scratch.<progress>, <meter>
These two elements display quantities visually without needing custom-built progress bars. <progress> represents the completion progress of a task, like a file upload or multi-step form. <meter> represents a scalar value within a known range, like disk usage or a rating — it is for measuring a static value, not tracking progress toward completion.
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<details>, <summary>
The <details> element creates a native, collapsible disclosure widget — content that can be toggled open or closed by the user without any JavaScript. The <summary> element inside it defines the always-visible heading that acts as the toggle control. This is the standard way to build FAQ accordions or collapsible sections without hand-rolling the interaction logic.<dialog>
The <dialog> element represents a native modal or non-modal dialog box, such as a confirmation prompt, settings panel, or alert. It comes with built-in modal behavior (via the showModal() JavaScript method) including a backdrop and focus trapping, removing the need to hand-build accessible modal logic from scratch.<progress>, <meter>
These two elements display quantities visually without needing custom-built progress bars. <progress> represents the completion progress of a task, like a file upload or multi-step form. <meter> represents a scalar value within a known range, like disk usage or a rating — it is for measuring a static value, not tracking progress toward completion.