How to Create a Link in HTML: Simple Guide
To create a link in HTML, use the
<a> tag with the href attribute specifying the URL. The text inside the <a> tag becomes clickable and directs users to the link destination.Syntax
The basic syntax to create a link uses the <a> tag with the href attribute. The href attribute holds the URL you want to link to. The clickable text goes between the opening and closing <a> tags.
- <a>: Anchor tag to create links.
- href: Attribute that sets the link destination.
- Clickable text: The visible part users click on.
html
<a href="https://example.com">Clickable Text</a>Output
Clickable Text (as a clickable link)
Example
This example shows a link to the OpenAI website. When clicked, it opens the OpenAI homepage in the same tab.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Link Example</title> </head> <body> <p>Visit <a href="https://openai.com">OpenAI</a> to learn more about AI.</p> </body> </html>
Output
Visit OpenAI to learn more about AI. (OpenAI is a clickable link)
Common Pitfalls
Common mistakes when creating links include:
- Forgetting the
hrefattribute, which makes the link not clickable. - Using incorrect URLs or missing the protocol (like
https://), causing broken links. - Placing the link text outside the
<a>tags, so nothing is clickable.
html
<!-- Wrong: Missing href -->
<a>Click me</a>
<!-- Right: With href -->
<a href="https://example.com">Click me</a>Quick Reference
| Part | Description | Example |
|---|---|---|
| <a> tag | Defines the link | <a href="url">Link</a> |
| href attribute | URL to open when clicked | href="https://example.com" |
| Link text | Visible clickable text | Example Website |
Key Takeaways
Always include a valid URL with the protocol (https://) in href.
Place the clickable text inside the tags.
Without href, the link will not work.
Test links to ensure they open the correct page.