Chapter 1 of ?
html 8 min read

HTML Mastery — Chapter 5: HTML Links, Buttons & Iframes

Section 1 · Chapter 5

HTML Links, Buttons & Iframes

HTML links allow users to click their way from page to page. Buttons provide interactive triggers, and iframes display nested external web pages inside your document. Learn essential link attributes, tabnapping security architecture, and iframe sandbox security models.

Live Code Example Overview

Click Try it Yourself » to test HTML links, buttons, download attributes, and sandboxed iframes in the playground.

Example: Hyperlinks, Buttons & Sandboxed Iframes Overview

<!-- Target _blank with security attributes --> <a href="https://aicodelab.tech" target="_blank" rel="noopener noreferrer">Open in New Tab</a> <!-- Download Attribute --> <a href="/assets/cheat-sheet.pdf" download="HTML5_CheatSheet.pdf">Download Cheat Sheet</a> <!-- Mailto & Tel links --> <a href="mailto:support@example.com">Email Support</a> <a href="tel:+18005550199">Call Toll-Free</a> <!-- Interactive Button --> <button type="button" onclick="alert('Action Triggered!')">Click Me</button> <!-- Secure Sandboxed Iframe --> <iframe src="https://example.com" width="100%" height="150" title="Secure Frame" sandbox="allow-scripts allow-same-origin"></iframe>
Try it Yourself »

5.1 HTML Links & Key Attributes (href, target, rel, download)

HTML hyperlinks are defined with the <a> (anchor) element. The most important attribute is href, which indicates the destination address:

Attribute Value Description
href URL / File / Email / Tel Specifies the target URL or action protocol (mailto:, tel:).
target _self | _blank | _parent | _top Specifies where to display the linked response. _blank opens a new tab.
rel noopener | noreferrer | nofollow Specifies the relationship between the current document and the linked URL.
download [filename] Instructs the browser to download the target URL file instead of navigating to it.

Try It Yourself: HTML Link Attributes & Protocols

<!-- Target _blank external link --> <a href="https://example.com" target="_blank" rel="noopener">Visit Example.com (New Tab)</a> <!-- Download file link --> <a href="guide.pdf" download="HTML5_Guide.pdf">Download PDF Guide</a> <!-- Mailto & Tel --> <a href="mailto:info@domain.com">Send Email</a> <a href="tel:+18005550199">Call Support</a>
Try it Yourself »

5.2 Tabnapping Security Architecture (rel="noopener noreferrer")

When you open an external page using target="_blank" without protection, the newly opened page gets access to your original page's window.opener object! Malicious pages can redirect your original tab to a fake login form—a vulnerability known as Reverse Tabnabbing.

Tabnapping Security Architecture: Unprotected vs Protected

❌ Vulnerable: target="_blank" Only Original Page (yourwebsite.com) Malicious Page window.opener active! window.opener.location = "fake-login.com" (User tab is hijacked!) ✅ Protected: rel="noopener noreferrer" Original Page (Safe & Isolated) 🔒 External Page window.opener = null Cross-Origin Access Blocked! Zero tabnabbing vulnerability.
Key Security Rules:
  • rel="noopener" sets window.opener to null, disconnecting the new window from your page.
  • rel="noreferrer" prevents sending the HTTP Referer header along with setting window.opener = null.

Try It Yourself: Secure External Tab Link

<!-- Secure link preventing reverse tabnabbing --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> Secure External Link » </a>
Try it Yourself »

5.3 HTML Buttons (<button>) & Types

The <button> element defines a clickable button. Always specify the type attribute to avoid unexpected form submissions:

  • type="button" — A standard clickable button used for client-side JavaScript actions.
  • type="submit" — Submits form payload data to the server endpoint.
  • type="reset" — Resets all form inputs to their initial values.

Try It Yourself: Button Types & Click Handlers

<button type="button" onclick="alert('Button 1 Clicked!')" style="background:#4f46e5;color:white;padding:10px 18px;border:none;border-radius:6px;font-weight:700;">JS Action Button</button> <button type="submit" style="background:#10b981;color:white;padding:10px 18px;border:none;border-radius:6px;font-weight:700;">Submit Form</button> <button type="reset" style="background:#ef4444;color:white;padding:10px 18px;border:none;border-radius:6px;font-weight:700;">Reset Form</button>
Try it Yourself »

5.4 HTML Iframes (<iframe>), Sandbox & Allow Feature Policy

An HTML iframe embeds an independent HTML document inside the current page. To secure embedded external pages, use the sandbox attribute:

Iframe Sandbox Security Isolation Layer

Parent Website Document (Host Origin) 🔒 <iframe sandbox="allow-scripts allow-forms" src="..."> allow-scripts allow-forms 🚫 Popups Blocked Restricts frame permissions: prevents top-level navigation, dangerous plugins & unauthorized popups.
Common Iframe Sandbox Flags:
  • sandbox="" — Applies all restrictions (blocks scripts, forms, popups, same-origin access).
  • allow-scripts — Allows the embedded iframe document to run JavaScript.
  • allow-forms — Allows the iframe to submit forms.
  • allow-same-origin — Allows the iframe content to retain its original domain origin cookies.

Try It Yourself: Sandboxed Iframe Embed

<iframe src="https://example.com" width="100%" height="160" title="Protected Frame" sandbox="allow-scripts" style="border:1px solid #cbd5e1;border-radius:8px;"></iframe>
Try it Yourself »

💻 Chapter 5 Hands-On Code Challenge

Build a Contact & Support Action Bar featuring secure external links with rel="noopener noreferrer", email triggers, telephone call buttons, interactive alert buttons, and a sandboxed iframe:

  1. Add a link with target="_blank" and rel="noopener noreferrer".
  2. Add a mailto: email link and a tel: phone link.
  3. Add a file download link.
  4. Add an interactive <button> that triggers a JavaScript alert when clicked.
  5. Embed a sandboxed <iframe> with title and permission flags.

Chapter 5 Key Takeaways

  • Links use href; add target="_blank" and rel="noopener noreferrer" for secure external tab links.
  • Special href protocols include mailto: for emails and tel: for telephone calls.
  • The download attribute instructs browsers to download the target resource file.
  • Buttons require explicit type="button" to prevent accidental form submission.
  • The sandbox attribute on <iframe> isolates third-party content to prevent security vulnerabilities.
Done with this chapter?
Mark it complete to track your progress and unlock your certificate.
Next Up
—

Learner Reviews

Write a Review
Share your experience to help other learners.
Your Rating *
★ ★ ★ ★ ★