WebCodeFun

Beginner's HTML Course

How to add hyperlinks and contents

This tutorial will add hyperlinks to our web page. We will create a contents section and add a link to an external site. Doing this will enable us to explore both hyperlink types. We will also discuss block and inline elements to understand how different HTML elements form on the page.

Hyperlinks are vital for the worldwide web. For example, they enable visitors to jump around a page, move around different pages of the same website, download or access files, press those purchase buttons, and visit other websites.

YouTube Video

Written Guide

Contents

External hyperlink

We’ll start with the easiest hyperlink, and that’s linking to an external site. At the bottom of our recipe page that we have been developing throughout the HTML beginner's course, we will add a paragraph and invite the visitor to check out our main website for coding tutorials.

As with all HTML elements, we need an appropriate tag. Hyperlinks wrap the content we want to be a link in the <a> tag. The <a> element then needs to know where it is sending the visitor. To do this, we use the ‘href’ attribute, which stands for hypertext reference. We simply add the website address in the value field, and the browser will know where to send the visitor.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.
<ul>
<li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ul>
</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section> <section>
<!--EXTERNAL HYPERLINK SECTION--> <p>I hope you like this recipe web page. We learn how to <a href="https://www.webcodefun.com/tutorials-index">build this page in HTML on the WebCodeFun website</a>.</p>
</section>
</body>
</html>

If you refresh the web page in the browser and then click our newly created hyperlink, it will take you to the tutorial index page for the Web Code Fun website.

Internal hyperlink

We can also use hyperlinks to move around our website. If we had multiple pages, we could simply add the file location within the ‘href’ attribute, redirecting our user to that page. We haven’t got multiple pages on our pizza sauce website. Still, we have an image location, so let’s send our user there with a hyperlink.

We’ll write a short paragraph and wrap the text content in an <a> element: View image full size.

We will then give it the hypertext reference attribute with the location of our image. Doing this is very similar to what we did to the image tag to add the image to the page earlier in the course.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <p><a href="images/pizza-mozarella-tomato-basil.jpg">View image full size</a>.</p> <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.
<ul>
<li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ul>
</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section> <section>
<!--EXTERNAL HYPERLINK SECTION--> <p>I hope you like this recipe web page. We learn how to <a href="https://www.webcodefun.com/tutorials-index">build this page in HTML on the WebCodeFun website</a>.</p>
</section>
</body>
</html>

If we refresh the web browser and click on the link, the browser opens up the image file. As we have provided a link to the raw image, the browser displays its original size.

Add a hyperlink to a position on the page

We can also use hyperlinks to direct users to a specific place on our web page. These are known as document fragments. At the top of the page, below the header element, we will add the <nav> element. Our <nav> element helps with organisation and marks that this content is for navigational links.

We will create a few links in a list called contents, which will take us to our ingredients section, instructions section, and our pizza goes well with section. First, we will add a <h2> heading named contents. Then we will create a list. We will use an unordered list, as that seems best here. We will create three list items to represent the three linked sections. We will then wrap the text content in an <a> element to make them hyperlinks.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <nav>
<!--PAGE CONTENTS NAVIGATION--> <<h2>Contents</h2> <ul>
<li><a>Ingredients</a></li> <li><a>Instructions</a></li> <li><a>Pizza goes well with...</a></li>
</ul>
</nav>
<!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <p><a href="images/pizza-mozarella-tomato-basil.jpg">View image full size</a>.</p> <section>
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section>
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.
<ul>
<li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ul>
</li>
</ol>
</section> <section>
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section> <section>
<!--EXTERNAL HYPERLINK SECTION--> <p>I hope you like this recipe web page. We learn how to <a href="https://www.webcodefun.com/tutorials-index">build this page in HTML on the WebCodeFun website</a>.</p>
</section>
</body>
</html>

Now to learn a new attribute, called id. We can give any of our elements an id attribute and then provide the id with a reference name. The browser uses the id to identify the requested location. We will use these a lot when we come to learn JavaScript, but for now, we can use id attributes to create our hyperlink locations.

We want an id location for each of the three sections. Therefore, we will add the attribute to those headings and give them a relevant name: ingredients-section, instructions-section, and goes-with-section.

Going back to our <a> elements, we can now reference these id points using a hash followed by the id name. The id is essentially acting as a hyperlink reference point. When we click the link, the browser jumps to the location of the id reference.

<!DOCTYPE html>
<html lang="en-GB">
<head>
<!--HEAD SECTION--> <title>Web Code Fun Pizza Sauce Recipe</title> <meta name="description" content="HTML5 beginner's course - tutorial series creating a pizza sauce recipe web page."> <meta charset="utf-8">
</head> <body>
<!--BODY SECTION--> <header>
<!--OUR FIRST HEADING, ALSO OUR MAIN HEADING--> <h1>WebCodeFun's Pizza Tomato Sauce Recipe</h1> <!--OUR FIRST PARAGRAPHS--> <p>This pizza sauce recipe is the perfect base sauce for any pizza. It is full of flavour, easy to make, and will blow all other pizzas away.</p> <p>You can add any toppings, although lashings of cheddar cheese and mozzarella are recommended.</p>
</header> <nav>
<!--PAGE CONTENTS NAVIGATION--> <<h2>Contents</h2> <ul>
<li><a href="#ingredients-section">Ingredients</a></li> <li><a href="#instructions-section">Instructions</a></li> <li><a href="#goes-with-section">Pizza goes well with...</a></li>
</ul>
</nav> <!--OUR PIZZA IMAGE--> <img src="images/pizza-mozarella-tomato-basil.jpg" width="500px" height="375px" alt="Pizza with a tomato, mozarella and basil topping." > <p><a href="images/pizza-mozarella-tomato-basil.jpg">View image full size</a>.</p> <section id="ingredients-section">
<!--INGREDIENTS TABLE--> <h2>Sauce Ingredients</h2> <table>
<thead>
<tr>
<th>Ingredient</th> <th>Quantity</th>
</tr>
</thead> <tbody>
<tr>
<td>Extra virgin olive oil</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Red onion</td> <td>1, chopped finely</td>
</tr> <tr>
<td>Granulated sugar</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Tinned tomatoes</td> <td>1 can</td>
</tr> <tr>
<td>Tomato puree</td> <td>2 tablespoons</td>
</tr> <tr>
<td>Sea salt</td> <td>Large pinch</td>
</tr> <tr>
<td>Garlic</td> <td>1 teaspoon, crushed or finely chopped</td>
</tr> <tr>
<td>Oregano</td> <td>1/2 teaspoon</td>
</tr> <tr>
<td>Black pepper</td> <td>1 pinch</td>
</tr> <tr>
<td>Cayenne pepper</td> <td>1 teaspoon</td>
</tr> <tr>
<td>Basil</td> <td>1/2 teaspoon</td>
</tr>
</tbody>
</table>
</section> <section id="instructions-section">
<!--INSTRUCTIONS SECTION--> <h2>Instructions</h2> <ol>
<li><strong>Heat the olive oil</strong> in a pan.</li> <li><strong>Add the chopped onion</strong> and fry on a low heat until softened, about 5-10 minutes.</li> <li><strong>Add the other ingredients</strong>, stir, and allow to simmer for 10-20 minutes. Stir occasionally.</li> <li><strong>Allow to cool</strong> until it is <em>warm</em>, then use a hand blender to smooth out the sauce.</li> <li><strong>Add enough to cover your pizza</strong> dough in a thin layer.</li> <li><strong>Allow the rest to cool</strong>, then freeze in ice cubes for use another time.
<ul>
<li>To cover another pizza, <strong>defrost 4-6 ice cubes</strong> in the microwave for 40 seconds.</li>
</ul>
</li>
</ol>
</section> <section id="goes-with-section">
<!--PIZZA SIDES SECTION--> <h2>Pizza goes well with...</h2> <ul>
<li>Salad</li> <li>Garlic bread</li> <li>Chips</li> <li>Bruschetta</li>
</ul>
</section> <section>
<!--EXTERNAL HYPERLINK SECTION--> <p>I hope you like this recipe web page. We learn how to <a href="https://www.webcodefun.com/tutorials-index">build this page in HTML on the WebCodeFun website</a>.</p>
</section>
</body>
</html>

OK, if you head over to the browser and hit refresh. You will see the contents section with three hyperlinks in a list. If you click them, they jump to the relevant section of the page.

Block and inline elements

You will have already noticed that some elements, such as headings, paragraphs and lists, form a visible block on the page. These elements are structural elements on the page. Block-level elements form a new line and any content that follows moves to a new line.

We have also been using some inline elements, such as our hyperlink element and our strong and emphasis elements. These inline elements are contained within our block-level elements and will not cause a new line to appear. We will typically only use these elements for a small section of a block-level element.

It’s important to be aware of this difference when you start to create your first web pages. You’ll become aware that items do not appear where you necessarily want them to. The browser determines the element’s location on the page from the pre-set formatting of the particular element or elements you create.

When we learn CSS shortly, you will learn much more about formatting, tear up the pre-set rules and create your own to design your web pages exactly how you would like.

Useful resources

Need help?

That’s all we need to cover in this tutorial and that’s all for our HTML Beginner’s course. We have learnt all of the basics that we need to start building web pages.

Next up, we need to make our web page look a lot nicer. And to do that, we will need to learn how to use CSS. So, please join me on the CSS beginner’s course, where we will improve our pizza source web page.

If anything is unclear, please do get in touch by contacting me. Thanks for reading.

Back to top