Lesson 1.6. Hyperlinks in HTML

Syntaxe

HTML stands for Hypertext Markup Language. "A hypertext system is a system containing documents linked together by hyperlinks allowing to pass automatically (in practice thanks to data processing) from the document consulted to another linked document ". It is therefore possible to create links between pages on the same site or to external sites using the tag <a> according to the following syntax:

<a href="http://link_url.html">Displayed text of the link</a>

Absolute links

Absolute links are links where the path is mentioned in full and starts often, but not always, with http: // or https: //. Here is an example page containing absolute links:

<h1>Search engines</H1>
<a href="https://www.bing.com/">Bing</a> : Microsoft search engine<br/>
<a href="https://www.google.com/">Google</a> : most used search engine<br/>
<a href="https://www.qwant.com/">Qwant</a> : French search engine<br/>
<a href="https://www.ecosia.org/">Ecosia</a> : the ecological search engine<br/>

The previous code displays links to search engines:

Try it online

Needless to say, clicking on the texts underlined in blue gives access to new pages. Links form the foundation of HTML pages. They allow the user to visit other sites on similar topics. The links also allow search engines to index new pages and to assess their relevance. For these reasons, it is important, when usefull for visitors, to add some links to sites providing additional information.

Relative links

When the target of the link is on the same site (or domain) you can specify the address with a relative link (its path from the current page). Let's considere as an example the following directories architecture containing a root directory and two subdirectories (folder1 and folder2). Each of theses directories contains one or more HTML files:

To create a link from index.html to image.jpg:

<a href="image.jpg">Link text</a>

To create a link from index.html to page1.html :

<a href="folder1/page1.html">Link text</a>

To create a link from page2.html to index.html :

<a href="../index.html">Link text</a>

The two successive dots `../` mean that you are going up of one directory in the tree.

Links in a new tab

By adding the attribute target to the tag <a>, it beconmes possible to specify where the link will be opened. The most used option is to open the link in a new tab with the value _blank:

<a href="https://www.example.com" target="_blank">Link in a new tab.</a>

Try it online

Exercice

Create a HTML file containing two absolute links to https://lucidar.me. The first one links in the same tab. The second one links in a new tab.

Here is the expected result:

Try online

Solution