Working with Links
HTML links allow users to navigate between pages, download files, or open external resources. Links are created using the <a> tag (anchor tag).
1. Basic Structure of a Link
A basic link uses the <a> tag, where the href attribute defines the destination URL.
Syntax:
<a href="URL">Link Text</a>Example:
<a href="https://www.yaser-rahmati.ir">Visit Example</a>In this example, clicking "Visit Example" will take the user to "https://www.yaser-rahmati.ir".
2. Linking to Other Web Pages
You can create links to internal pages of your website or external websites.
Internal Link Example:
<a href="about.html">About Us</a>External Link Example:
<a href="https://www.google.com">Go to Google</a>3. Opening Links in a New Tab
To open a link in a new tab, use the target="_blank" attribute. This is often used for external websites.
Example:
4. Using Links with Email (mailto)
You can create a link that opens the user’s default email client to send an email.
Syntax:
Example:
Clicking the link will open the default email client and prefill the "To" field.
5. Creating Links to Phone Numbers
You can create links that allow users to call a phone number directly if they're using a mobile device or an app that supports calling.
Syntax:
Example:
6. Downloadable Links
You can add the download attribute to make a link download a file instead of navigating to it.
Syntax:
Example:
When the link is clicked, the browser will download the report.pdf file.
7. Linking to a Specific Section of a Web Page (Anchor Links)
You can link to a specific part of the same page or another page using id attributes and anchor links.
Example of Linking to a Section on the Same Page:
Create an id in the section you want to link to:
Then create a link to that section:
Example of Linking to a Section on Another Page:
8. Styling Links
By default, links are blue and underlined, but you can style them using CSS. Common states of a link are:
Normal (unvisited): This is the default look of a link.
Hover: What happens when a user hovers the mouse over the link.
Visited: The appearance of a link after it’s been clicked.
Active: The appearance of the link when it’s clicked and held.
Example:
9. Complete Example of Links in HTML
This guide covers everything you need to know to start working with links in HTML, from simple links to anchor links and downloadable files.
Keywords
HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG
Last updated