Anchor Tag in HTML | Br and Hr Tags

by

HTML <a>, <br>, and <hr> Tags – A Beginner’s Guide

When building a website, we often need to add links, line breaks, and horizontal separators to structure our content properly. In this blog post, we’ll explore three essential HTML tags:

  • <a> (Anchor tag) – Used to create links
  • <br> (Line Break tag) – Used to break lines
  • <hr> (Horizontal Rule tag) – Used to add horizontal dividers

Let’s dive into each of them in detail!

HTML <a> Tag (Anchor Tag) – Creating Links

The anchor tag (<a>) is used to create hyperlinks, allowing users to navigate to other web pages, sections, or even external websites.

Basic Syntax:

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

🔹 href Attribute: Defines the link’s destination.
🔹 Text inside <a>: This is what users click on.

📌 Example: Opening Links in a New Tab

<a href="https://www.google.com" target="_blank">Open Google in New Tab</a>

🔹 target="_blank" makes the link open in a new tab.

Example: Linking to a Section on the Same Page

<a href="#about">Go to About Section</a>
<h2 id="about">About Us</h2>
<p>This is the About section of the page.</p>

🔹 href="#about" links to an element with id="about" on the same page.

Example: Adding Email and Phone Links

<a href="mailto:example@email.com">Send Email</a>  
<a href="tel:+1234567890">Call Us</a>

🔹 mailto: opens the email app, and tel: opens the phone dialer.

HTML <br> Tag (Line Break) – Breaking Lines

The <br> (Break) tag is used to insert a line break in text. It’s a self-closing tag, meaning it doesn’t need a closing tag.

Example: Adding Line Breaks

<p>Hello, World!<br>This is a new line.</p>

🔹 The <br> tag moves the next part of the text to a new line.

⚠️ Best Practice: Avoid using <br> for spacing between paragraphs. Instead, use CSS margin or padding.

Example: Address Formatting

<p>John Doe<br>123 Main Street<br>New York, NY</p>

🔹 Used to format addresses properly.

HTML <hr> Tag (Horizontal Rule) – Adding a Divider

The <hr> tag is used to insert a horizontal line, often to separate content sections. It’s also a self-closing tag.

Example: Adding a Horizontal Divider

<h2>Introduction</h2>
<p>Welcome to our website!</p>
<hr>
<h2>Services</h2>
<p>We offer web development services.</p>

🔹 The <hr> tag adds a horizontal line to separate sections.

Practice Tasks :

Task 1: Create a Webpage with Navigation Links

👉 Instructions:

  • Create a webpage with three links using <a>:
    1. One link to Google
    2. One link to Instagram
    3. One link that jumps to a section on the same page

📌 Expected Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Links</title>
</head>
<body>
    <h2>Navigation</h2>
    <a href="https://www.google.com" target="_blank">Go to Google</a><br>
    <a href="https://www.instagram.com" target="_blank">Go to Instagram</a><br>
    <a href="#section">Go to Section</a><br>

    <hr> 

    <h2 id="section">Section</h2>
    <p>This is the section you jumped to.</p>
</body>
</html>

Task 2: Add Line Breaks (<br>)

👉 Instructions:

  • Write a paragraph with three lines of text, using <br> to break each line.

📌 Expected Code:

<p>This is the first line.<br>
This is the second line.<br>
This is the third line.</p>

Task 3: Use <hr> for Content Separation

👉 Instructions:

  • Create a simple blog layout where each section is separated by <hr>.

📌 Expected Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Layout</title>
</head>
<body>

    <h1>Welcome to My Blog</h1>

    <h2>Introduction</h2>
    <p>This is an introduction to my blog.</p>
    <hr>

    <h2>About Me</h2>
    <p>I am a web developer passionate about coding.</p>
    <hr>

    <h2>Contact</h2>
    <p>Email: example@email.com</p>

</body>
</html>

Now you know how to:

  • Create clickable links using <a>
  • Add line breaks with <br>
  • Insert horizontal separators using <hr>

Follow me on Instagram for daily web development tips! INSTAGRAM

View my Previous Post – Top 15 Patterns

Leave a Comment