In this article, we will discuss how to add a URL using HTML code. Adding URLs into the sentences can be very helpful when we are referencing any other article or web page, There are many use cases where we use URLs to redirect to new sites, to show more detail about certain information etc.
So the first thing is the URL tag will come under the BODY tag. This tag is called HREF which comes under the a tag.
Syntax for the code:
<a href="https://www.example.com">Click here to visit Example.com</a>
In this example:
- `<a>` is the anchor tag used to create a hyperlink.
- `href` is the attribute that specifies the URL of the page the link goes to.
- `https://www.example.com` is the URL you want to link to.
- `Click here to visit Example.com` is the text that will be clickable in the browser.
Step-by-step instructions on how to add a URL link to your HTML code:
- Open your HTML file: Use a text editor (like Notepad, Sublime Text, VS Code, etc.) to open your existing HTML file or create a new one.
- Locate the section where you want to add the link: This could be within the body of your HTML document. For example, between the `<body>` tags.
- Insert the anchor tag: Add the `<a>` tag with the `href` attribute at the desired location. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph with a link to <a href="https://www.example.com">Example.com</a>.</p>
</body>
</html>
- Save the file: After adding the anchor tag, save your HTML file.
- Open the HTML file in a web browser: Double-click the HTML file, or open it via your web browser’s “Open File” option to see the result. The link text should now be clickable and direct you to the specified URL.
- Styling the link (optional): If you want to style the link, you can add CSS either inline, within a `<style>` tag in the head, or through an external stylesheet. Here’s an example using inline CSS:
<a href="https://www.example.com" style="color: blue; text-decoration: none;">Click here to visit Example.com</a>
That’s it! You’ve successfully added a URL link to your HTML code.
