Links in HTML
Table of contents
Practice
This practice will be divided in two parts, both applied to the document obtained in the practice of the previous tutorial, "Content grouping and structure". The first part will consist of inserting a couple of links in the head section of the document, to provide relational information. In the second part we'll convert the items in the table of contents into links, pointing each to its corresponding section.
So, our first step in this process consists of adding a link element providing contact information about the author of the document (more precisely an e-mail address). For this purpose, we're going to use the rel attribute with the value "author", when we declare our link.
For practicity, we're only showing here the head section of that document, but you should have the rest in your file.
<head>
<title>This is the story of me, learning HTML on my own</title>
<link rel="author" href="mailto:jhon@superwebsitesuperawesome.com">
</head>
Now we can go to the body and turn those items in the table of contents into links. The idea here is to wrap the text inside each li element with an a element. In the beginning we're not adding a link per se, but only the a element alone (with no attributes).
<body>
<header>
<h1>Table of contents</h1>
<ol>
<li><a>I made up my mind</a></li>
<li><a>Getting the hang of it</a></li>
</ol>
</header>
<main>
<section>
<h1>I made up my mind</h1>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
</section>
<section>
<h1>Getting the hang of it</h1>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
Table of contents
I made up my mind
Today I woke up decided to learn HTML on my own.
Getting the hang of it
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
But to make a link to a document's fragment, there's something important we need and our document lacks. This is the id attribute in the element we want to link to. In this case, and because it makes sense, we're adding an id attribute to each of the two sections that compose the main content of this document.
<body>
<header>
<h1>Table of contents</h1>
<ol>
<li><a>I made up my mind</a></li>
<li><a>Getting the hang of it</a></li>
</ol>
</header>
<main>
<section id="introduction">
<h1>I made up my mind</h1>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
</section>
<section id="overcoming-obstacles">
<h1>Getting the hang of it</h1>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
Having done this, the only thing that's left is to add the href attribute to both a elements. The hard thing here is to determine what the URI must be like in order to actually link to the corresponding section. Well, if you remember, in links to fragments, URIs are composed by three elements: the adrress of the resource, a hash sign ("#") and the fragment identifier.
In this case, the address of the resource can be left blank because the document containig the fragment is the current document itsef. This leaves us with a hash sign ("#") followed by the fragment indentifier, being in this example, one of the two id attributes of the sections described above ("introduction" and "overcoming-obstacles").
<body>
<header>
<h1>Table of contents</h1>
<ol>
<li><a href="#introduction">I made up my mind</a></li>
<li><a href="#overcoming-obstacles">Getting the hang of it</a></li>
</ol>
</header>
<main>
<section id="introduction">
<h1>I made up my mind</h1>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own.</p>
</section>
<section id="overcoming-obstacles">
<h1>Getting the hang of it</h1>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
Table of contents
I made up my mind
Today I woke up decided to learn HTML on my own.
Getting the hang of it
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
As a last task in this practice, we're going to add a link to HTMLQuick.com inside the content. For this purpose, we're adding some more text to the paragraph in the first section. This link will be exactly as the ones added to the table of contents, with the differece that it will have a full URL in the href attribute.
<body>
<header>
<h1>Table of contents</h1>
<ol>
<li><a href="#introduction2">I made up my mind</a></li>
<li><a href="#overcoming-obstacles2">Getting the hang of it</a></li>
</ol>
</header>
<main>
<section id="introduction2">
<h1>I made up my mind</h1>
<p>Today I woke up decided to learn <abbr title="Hyper Text Markup Language">HTML</abbr> on my own. So, I opened <a href="http://www.htmlquick.com/">HTMLQuick.com</a> in my browser and got myself started.</p>
</section>
<section id="overcoming-obstacles2">
<h1>Getting the hang of it</h1>
<p>The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.</p>
</section>
</main>
</body>
Table of contents
I made up my mind
Today I woke up decided to learn HTML on my own. So, I opened HTMLQuick.com in my browser and got myself started.
Getting the hang of it
The process of learning this language was complicated, specially because I'm not a computer person. Nevertheless, I tried very hard until things started to work out smoothly.
With this little practice, you've tried out the most common ways to build a link in HTML. From here, with practice and some help from the reference, you should be able to build any type of link according to the needs of the project. So play around a little more and then head straight to the next tutorial. See you there.