We can say that there can be two types of links in a webpage.
- Internal links
- External links
Clicking an external link will open a new page that belongs to a different website.
We have been using Codepen to show most of our code examples so far. But for the example of internal link, let's assume you have a folder in your computer. In that folder you have two HTML documents. One is called index.html and the other is document.html.
Suppose document.html has some contents (whose details we don't need to worry about) and what you want is to create an internal link to document.html from index.html.
And here is the index.html page code to do that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
</head>
<body>
<a href="document.html">Click to open Document</a>
</body>
</html>
This is the code for our index.html file. The <a> --- </a> tag (called anchor tag) is the tag that creates link. When you open the index.html file in your browser you will see a link "Click to open document." Clicking on the text "Click to open Document" will take you to the document.html page.
The href="---" is an attribute of the <a> tag. The value of this attribute should be a link. Now, in the case of internal link, we can just mention the file name (instead of an URL) because we are assuming that we already have that file in the same folder in our local machine (or server). Links like this are also known as relative URLs.
Next, here is an example of an external link:
In case of external links, the value of href attribute must begin with http:// or https://
Links like these are known as absolute URLs.
Also, we have two additional attributes, the target="_blank" and the title=" --- "
The title=" --- " should be included in every link (internal or external). We haven't included that in our example for internal link. But we should've. What the title tag does is it describes what the link is about. This description will not be displayed in the page but can be read by screen readers and thus will help visually impaired people navigate.
The target="_blank" attribute is common for external links. When you add this attribute to any link, clicking on the link will open the linked page in a new window.
Generally <a> behaves as an inline element. Meaning, a link element will not automatically start in a new line. To have the link displayed in a new line we can do this:
<a href="---" title="---">
<div>Clickable text.</div>
</a>
Now this link will start in a new line. But you may wonder, if <a> is an inline element then how can it contain <div>, which is a block level element?
Well, actually in HTML 5, the <a> is both a Flow content (which is equivalent to inline element) and a Parsing content (which is equivalent to block level element).
Next we will discuss about Fragment identifier.
Suppose you have a section inside your page as below -
<section id="section1">
-----
</section>
Here, the id attribute has given the section a name.
Now, suppose you want to create a link within the same page as below -
<a href="#section1">Go to section 1</a>
Clicking on this link will take you to the section1 part of the example page. Many sites use this as Go to top button.
No comments:
Post a Comment