HTML Academy
What is a link? The a tag
Links and images2/17
Back to the list of tasks
  • 1. What is a link? The a tag
  • 2. Relative addresses
  • 3. Absolute addresses
  • 4. Link to the file
  • 5. An in-page link
  • 6. The img tag for images
  • 7. Image formats, SVG format
  • 8. JPEG format
  • 9. PNG format
  • 10. GIF format
  • 11. Image dimensions
  • 12. alt attribute
  • 13. Image link
  • 14. The figure and figcaption tags, demonstrative material
  • 15. Links with a blank href, title attribute
  • 16. Summary of “Links and Images”
  • 17. Test: Cat tours travel agency gallery
Absolute addresses
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Relative addresses

Although our blog is on the web, but when we’re working on it, we do it on our computer—that is, locally. So we can test changed pages before publishing them, links to other blog pages should open the file on our computer, and not from somewhere on the Internet. You need to use a special address for these types of links, such as, for example:

<a href="day-2.html">Second blog entry</a>

This type of address is called relative. In contrast to “normal” addresses, it does not contain a full website address. In order to resolve a relative address and reach its destination, the browser must decode it. To do this, it typically starts with the position of the current page. For example, there are two files in the c:/blog folder:

c:/blog/
      |-index.html // This page is open in the browser
      |-inner.html

The page c:/blog/index.html is open in the browser, and it contains a link with a relative address inner.html. In order to follow this link, the browser looks at the location of the open page and replaces the last part in it:

c:/blog/index.html + inner.html // Replace the last part
c:/blog/inner.html              // Open this file

Relative addresses work not only for files on a computer, but also for pages on a network. If you were to publish the two files from the example on the Internet (without changing their relative position to each other), then the link would still work. The relative address inner.html on the page https://site.com/blog/index.html can be decoded as follows:

https://site.com/blog/index.html + inner.html // Replace the last part
https://site.com/blog/inner.html              // Open this address

Let’s add some more relative links to the main blog.

Comments

  • index.html
  • style.css
HTML
6
7
<link rel="stylesheet" href="style.css">
</head>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
body {
padding: 0 30px;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
GoalsCompleted 0 out of 3

    Similar to the first item, add another three links to the table of contents for the blog.

    1. Link with relative address to the the second paragraph of day-2.html.
    2. Link with relative address to the the third paragraph of day-3.html.
    3. Link with relative address to the the fourth paragraph of day-4.html.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.