Links are defined using the a tag. The link destination is set via its href attribute.
Example:
<a href="https://flaviocopes.com">
click here
</a>
Between the starting and closing tags, we have the link text.
The above example is an absolute URL. Links also work with relative URLs:
<a href="/test">click here</a>
In this case, when clicking the link the user is moved to the /test URL on the current origin.
Be careful with the / character. If omitted, instead of starting from the origin, the browser will just add the test string to the current URL.
For example, suppose I’m visiting the page /axios/ and I have these 2 links (they don’t exist, it’s just an example):
- the link
/testdoes have a/prependingtest, clicking brings me to/test. The/means “start from the root” - the link
testdoes not have a/prependingtest, so once clicked brings me to/axios/test
Link tags can include other things inside them, not just text. For example, images can be links, too, so you click an image and you open a new page.
Lessons in this unit:
| 0: | Introduction |
| 1: | Your first HTML page |
| 2: | Text tags |
| 3: | Attributes |
| 4: | ▶︎ Links |
| 5: | Images |
| 6: | Lists |
| 7: | Head tags |
| 8: | Container tags |
| 9: | DEMO Using CodePen |
| 10: | DEMO Using VS Code |