Practical Exercise 3: Implementing Paragraphs and Links
In this practical HTML exercise, you'll learn how to correctly implement paragraphs and links, using <p> tags to structure text and <a> tags to effectively link content.
Paragraphs and Links
Activity
Create an HTML document with several <p> paragraphs and <a> links that point to different websites.
Interactive Solution
Solution with Complete HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Paragraphs and Links</title>
</head>
<body>
<p>
This is a paragraph.
<a href="https://www.google.com" target="_blank">Google</a>
</p>
<p>
Another paragraph with a
<a href="https://www.bing.com" target="_blank">link to Bing</a>
</p>
</body>
</html>
🧪 Exercise Variants
Variant 1: Internal Links with Anchors (#id)
In addition to linking to other sites, you can create internal navigation within the same page using identifiers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Internal Links</title>
</head>
<body>
<h1>HTML Guide</h1>
<!-- Internal navigation menu -->
<nav>
<a href="#introduction">Go to Introduction</a> |
<a href="#tags">Go to Tags</a> |
<a href="#conclusion">Go to Conclusion</a>
</nav>
<h2 id="introduction">Introduction</h2>
<p>HTML is the markup language that structures all web pages.</p>
<h2 id="tags">Basic Tags</h2>
<p>The `<p>`, `<a>`, and `<h1>` tags are the most used in HTML.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Mastering HTML is the first step to becoming a web developer.</p>
</body>
</html>
The id on the target element and href="#id" on the link create internal navigation. Clicking scrolls the page to the corresponding section.
Variant 2: mailto: and tel: Links
HTML allows creating special links that open the email client or initiate a phone call.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<p>
Send an email to:
<a href="mailto:info@mysite.com">info@mysite.com</a>
</p>
<p>
Call us at:
<a href="tel:+14155551234">+1 415 555-1234</a>
</p>
<p>
Send an email with a predefined subject:
<a href="mailto:info@mysite.com?subject=Question%20about%20services">
Ask about services
</a>
</p>
</body>
</html>
mailto:: opens the default email client with the configured address.tel:: initiates a call on mobile devices (on desktop it asks permission to use an app).- You can add
?subject=,?body=,?cc=, and?bcc=to prefill fields.
Variant 3: Security with target="_blank"
When opening a link in a new tab, it's important to add security attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Secure Links</title>
</head>
<body>
<h1>Links with Best Practices</h1>
<!-- ❌ UNSAFE: don't use target="_blank" alone -->
<p>
Unsafe link:
<a href="https://external-site.com" target="_blank">External Site</a>
</p>
<!-- ✓ SAFE: with rel="noopener noreferrer" -->
<p>
Safe link:
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
Secure External Site
</a>
</p>
</body>
</html>
Why? Without rel="noopener", the external page can access window.opener and redirect your original page (tabnabbing attack). With noreferrer, your page's URL is also not sent to the destination site.
Variant 4: Line Breaks, Horizontal Rules, and Preformatted Text
Besides paragraphs, HTML has other tags for formatting text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Formatting</title>
</head>
<body>
<h1>Additional Formatting Tags</h1>
<p>
This paragraph has a<br />
line break in the middle.
</p>
<hr />
<p>The horizontal rule above separates content sections.</p>
<pre>
function greet() {
console.log("Hello World!");
return true;
}
</pre>
<p>
The `<pre>` tag preserves line breaks and
spaces, ideal for displaying code.
</p>
</body>
</html>
🎯 Mini-Challenge: Put It to the Test
Create an HTML page called "Contact and References" that includes:
- An
<h1>with the page title - Two
<p>paragraphs with descriptive text - An external link with
target="_blank"andrel="noopener noreferrer" - A
mailto:link with a predefined subject - A navigation bar with 2 internal links (
#section1and#section2) - An
<hr>separating the header from the main content
Try to build it completely without looking at the previous examples. If you get stuck, go back to the variant you need.
Common Mistakes with Paragraphs and Links
| Mistake | Why It's a Problem |
|---|---|
Not closing <p> properly | The browser may group content incorrectly. Although HTML5 is permissive, always close your tags |
Using target="_blank" without rel="noopener noreferrer" | Security vulnerability: the external page can manipulate your site |
Forgetting https:// on external links | The browser interprets the link as a relative path and doesn't go to the correct site |
Not using id on anchor destinations | The #section link finds no target and does nothing when clicked |
| Using empty paragraphs to create spacing | Use CSS (margin, padding) or <br>; empty paragraphs dirty semantic HTML |
Frequently Asked Questions
Is target="_blank" bad for SEO?
Not bad in itself, but it has two risks: security (tabnabbing) and user experience (too many new tabs frustrate users). For external links in content, target="_blank" + rel="noopener noreferrer" is acceptable. For main navigation, prefer opening in the same tab.
What's the difference between mailto: and a contact form?
mailto: is simpler but less reliable: it depends on the user having an email client configured. Many people use webmail (Gmail in the browser) and mailto: doesn't work. A contact form with a backend is the professional solution, but mailto: works for simple sites or practice pages.
Do you know how to create paragraphs and links? Generate a web page with DivZone AI that has navigation between sections. You'll see how the generated code uses <p> and <a> tags to structure content. Learn by seeing real code!
🔎 Explore all the details in this section 👉 Fundamental elements in HTML.