HTMLmarkup~15 mins

Anchor tag basics in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Anchor Tag Basics

📖 Scenario: You are creating a simple webpage for a local library. You want to add links so visitors can easily find the library's homepage and the contact page.

🎯 Goal: Build a basic HTML page with two anchor tags. One link should go to the library's homepage, and the other should go to the contact page.

📋 What You'll Learn

Create an HTML skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags

Add two anchor tags (<a>) inside the body

The first anchor tag must link to https://www.locallibrary.com with the text 'Library Homepage'

The second anchor tag must link to https://www.locallibrary.com/contact with the text 'Contact Us'

Use the href attribute correctly in both anchor tags

💡 Why This Matters

🌍 Real World

Creating navigation links is a fundamental skill for building websites that help users find important pages easily.

💼 Career

Web developers frequently add and manage links to connect different parts of a website or to external resources.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head> including <meta charset="UTF-8"> and <title>Library Links</title>, and an empty <body> tag.

HTML




    
    Library Links

Need a hint?

Start with the basic HTML page structure. Remember to include the lang attribute in the <html> tag and the charset meta tag inside <head>.

Add the first anchor tag for the homepage

Inside the <body> tag, add an anchor tag <a> with the href attribute set to https://www.locallibrary.com. The link text should be exactly 'Library Homepage'.

HTML




    
    Library Links

Need a hint?

Use the href attribute inside the <a> tag to set the link destination. The text between the tags is what users will see and click.

Add the second anchor tag for the contact page

Below the first anchor tag, add another anchor tag with the href attribute set to https://www.locallibrary.com/contact. The link text should be exactly 'Contact Us'.

HTML




    
    Library Links


    Library Homepage

Need a hint?

Remember to place the second anchor tag inside the <body> tag and below the first link. Use the correct URL and link text.

Add spacing between the links for readability

Add a line break tag <br> between the two anchor tags inside the <body> to separate the links visually.

HTML




    
    Library Links


    Library Homepage
    
    Contact Us

Need a hint?

Use the <br> tag to add a line break between the two links so they appear on separate lines.