+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: HTML5 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=4)
+--- Thread: Creating hyperlinks in HTML5 (/showthread.php?tid=5282)
Creating hyperlinks in HTML5 - Qomplainerz - 07-27-2023
The a element in HTML is used to create hyperlinks, allowing you to link to other web pages, resources, files, or specific sections within a page.
Example:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperlink Example</title>
</head>
<body>
<p>Welcome to my website! Check out <a href="https://openai.com">OpenAI</a>.</p>
</body>
</html>Explanation:
Opening and Closing Tags:
The a element is an inline element and requires an opening a tag and a closing a tag to create a link.
The content between the opening and closing tags is what's displayed as the clickable link.
href Attribute:
The most crucial attribute of the a element is href, which specifies the destination URL or the target of the link.
In the example, href="https://openai.com" tells the browser to navigate to the OpenAI website when the link is clicked.
Link Text:
The content between the opening and closing a tags is known as the link text.
In our example, the link text is "OpenAI."
When the user clicks on this text, they will be redirected to the URL specified in the href attribute.
Absolute URL:
In the example, we used an absolute URL (https://openai.com) as the value for the href attribute.
This means the link will take the user directly to the OpenAI website.
Relative URL (optional):
Instead of an absolute URL, you can also use a relative URL for the href attribute.
A relative URL is relative to the current web page's location.
For example, if your current page is in the same directory as another page named about.html, you can use href="about.html" to create a link to the "about.html" page.
Linking to Files:
Besides web pages, you can use the a element to link to various resources like images, PDFs, videos, and more.
Just provide the correct URL to the file in the href attribute.
Linking to Sections within a Page (optional):
You can also link to specific sections within the same page by using the id attribute on an element and providing its value as the destination of the link. For example:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Internal Link Example</title>
</head>
<body>
<h2 id="section1">Section 1</h2>
<p>Welcome to Section 1. <a href="#section2">Jump to Section 2</a>.</p>
<h2 id="section2">Section 2</h2>
<p>Welcome to Section 2. <a href="#section1">Go back to Section 1</a>.</p>
</body>
</html>In this example, we've created two sections with h2 headings, each having a unique id attribute.
The links within the paragraphs allow the user to jump back and forth between the sections within the same page.
Opening Links in a New Tab (optional): By default, when a user clicks on a link, the new content replaces the current page.
However, you can add the target="_blank" attribute to the a element to open the link in a new browser tab or window.