Lists and Links in HTML

HTML Tutorials

In this tutorial, we’re going to explore the power of organization through lists and the magic of connecting your web pages with links. Think of this as creating signposts and pathways that guide your visitors smoothly through your content.

Here’s what you need to know:

Ordered Lists (<ol>): Imagine these as numbered lists – perfect for showcasing your top picks. Whether it’s a recipe or a list of achievements, ordered lists bring structure and sequence.
Unordered Lists (<ul>): Think of these as bullet-pointed wonders – great for sharing your favourites or important points. Unordered lists keep your content concise and easy to absorb.
Definition Lists (<dl>): Picture these as your content’s glossary – ideal for explaining terms or concepts. Definition lists lend an air of professionalism to your information.
Creating Links (<a>): Envision this as the portal to new discoveries. Links take your visitors to exciting places, whether it’s another webpage on your site or a valuable external resource.

Example:

Look through the example below and try to create something similar as an exercise.

<!DOCTYPE html>
<html>
<head>
    <title>Lists and Links Playground</title>
</head>
<body>
    <h1>Welcome to Our Recommendations</h1>
    <h2>Our Top 3 Movies</h2>
    <ol>
        <li><a href="movie1.html">Inception</a></li>
        <li><a href="movie2.html">The Shawshank Redemption</a></li>
        <li><a href="movie3.html">Pulp Fiction</a></li>
    </ol>
    <h2>Explore Further</h2>
    <ul>
        <li><a href="https://example.com">Our Film Reviews</a></li>
        <li><a href="https://blog.example.com">Behind-the-Scenes Blog</a></li>
    </ul>
</body>
</html>

More about the links

One of the most fascinating tools in HTML is the <a> element, also known as the anchor element. It’s used for creating links, and it comes with a special attribute called href.

Understanding the href Attribute:

The href attribute is like the GPS coordinates for your link. It tells the browser where to take your visitors when they click the link. Here’s how it works:

<a href="URL">Link Text</a>

URL: Replace this with the actual web address (URL) you want to link to. It can be a full web address or a path within your website.
Link Text: This is what users will see as the clickable part of the link.

Examples:

Link to an External Website:

<a href="https://www.example.com">Visit Example Website</a>

Link to a Page Within Your Website (Relative URL):

<a href="about.html">About Us</a>

Link to an Email Address:

<p><code><a href="mailto:info@example.com">Email Us</a></code></p>

Link to a Specific Section Within the Same Page (Anchor Link):

<a href="#section1">Jump to Section 1</a>

25scripts

Lists and Links in HTML

Leave a Reply Cancel reply