@title : The Title Attribute
The title attribute provides additional information about an element. In Scryber PDF documents, it primarily serves to create navigable bookmarks and outline entries, enabling users to quickly jump to different sections of the document through the PDF viewer’s navigation panel.
Usage
The title attribute provides element metadata that:
- Creates entries in the PDF document outline/bookmarks panel
- Establishes hierarchical document navigation structure
- Provides descriptive text for PDF bookmarks
- Works in conjunction with element
idattributes for internal linking - Supports data binding for dynamic bookmark text
- Enhances document accessibility and navigation
<!-- Create a bookmark entry -->
<h1 id="chapter1" title="Chapter 1: Introduction">
Chapter 1: Introduction
</h1>
<!-- Create nested bookmark hierarchy -->
<h2 id="section1-1" title="1.1 Overview">
1.1 Overview
</h2>
<!-- Dynamic bookmark text -->
<h1 id="" title="">
</h1>
Supported Elements
The title attribute is technically supported on all HTML elements, but its bookmark functionality is most commonly used with:
Heading Elements (Primary Use)
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
These elements automatically create hierarchical bookmark structures based on heading levels.
Structural Elements
<section>,<article>,<aside>,<nav><header>,<footer>,<main><div>(when used as major section containers)
Other Elements
<a>- Can provide tooltip text for links<img>- Can provide descriptive information- Any element where bookmark/outline entry is desired
Binding Values
The title attribute supports data binding for dynamic bookmark text:
<!-- Dynamic chapter titles -->
<h1 id="chapter-" title="Chapter : ">
Chapter :
</h1>
<!-- Dynamic section titles -->
<section id="" title="">
<h2></h2>
<p></p>
</section>
<!-- Repeated content with bookmarks -->
<template data-bind="">
<div style="page-break-before: always;">
<h1 id="chapter-" title=". ">
</h1>
<p></p>
</div>
</template>
<!-- Conditional title text -->
<h2 id="summary" title="">
Summary
</h2>
Data Model Example:
{
"chapterNum": 3,
"chapterName": "Advanced Features",
"sectionId": "sec-3-1",
"sectionTitle": "Configuration Options",
"chapters": [
{
"number": 1,
"title": "Getting Started",
"summary": "Introduction to the basics"
},
{
"number": 2,
"title": "Core Concepts",
"summary": "Understanding the fundamentals"
}
],
"isExecutive": true
}
Notes
PDF Bookmarks and Outlines
The primary purpose of the title attribute in Scryber is to create PDF bookmarks (also called outlines). These appear in the navigation panel of PDF viewers and allow users to:
- Quickly jump to different sections of the document
- See the document structure at a glance
- Navigate long documents efficiently
- Understand document organization
<h1 id="intro" title="Introduction">Introduction</h1>
<!-- Creates a top-level bookmark "Introduction" -->
<h2 id="overview" title="Overview">Overview</h2>
<!-- Creates a second-level bookmark "Overview" under the parent section -->
Bookmark Hierarchy
Bookmarks are automatically organized hierarchically based on heading levels:
<h1>creates top-level bookmarks<h2>creates second-level bookmarks (nested under nearest<h1>)<h3>creates third-level bookmarks (nested under nearest<h2>)- And so on through
<h6>
<h1 id="ch1" title="Chapter 1">Chapter 1</h1> <!-- Level 1 -->
<h2 id="s1-1" title="1.1 First Section">Section 1.1</h2> <!-- Level 2 -->
<h3 id="s1-1-1" title="1.1.1 Subsection">Subsection</h3> <!-- Level 3 -->
<h2 id="s1-2" title="1.2 Second Section">Section 1.2</h2> <!-- Level 2 -->
<h1 id="ch2" title="Chapter 2">Chapter 2</h1> <!-- Level 1 -->
This creates a bookmark tree structure:
Chapter 1
├─ 1.1 First Section
│ └─ 1.1.1 Subsection
└─ 1.2 Second Section
Chapter 2
Title vs Element Content
While the title attribute often matches the visible element content, they can differ:
<!-- Title matches content -->
<h1 id="intro" title="Introduction">Introduction</h1>
<!-- Title provides shortened bookmark text -->
<h1 id="long" title="Summary">
A Very Long Heading That Would Be Too Long For A Bookmark Entry
</h1>
<!-- Title includes chapter numbering for bookmarks -->
<h1 id="methods" title="3. Research Methods">
Research Methods
</h1>
Combining with ID Attribute
For bookmarks to work as navigation links, elements should have both id and title attributes:
<!-- Both id and title for functional bookmarks -->
<h1 id="chapter1" title="Chapter 1: Getting Started">
Chapter 1: Getting Started
</h1>
<!-- Without id, bookmark won't link properly -->
<h1 title="Chapter 2">Chapter 2</h1> <!-- Less useful -->
Bookmark Best Practices
Do:
- Provide clear, descriptive titles
- Use consistent title formatting
- Include chapter/section numbers when appropriate
- Keep titles concise but meaningful
- Maintain logical hierarchy with heading levels
Don’t:
- Use extremely long titles (they’ll be truncated in bookmark panels)
- Skip heading levels (h1 → h3) as it breaks hierarchy
- Use generic titles like “Section” or “Chapter” without identification
- Forget to include titles on major document sections
<!-- Good bookmark titles -->
<h1 id="ch1" title="1. Introduction">Chapter 1: Introduction</h1>
<h2 id="s1-1" title="1.1 Background">1.1 Background</h2>
<h2 id="s1-2" title="1.2 Objectives">1.2 Objectives</h2>
<!-- Poor bookmark titles -->
<h1 id="ch1" title="Chapter">Chapter</h1> <!-- Too generic -->
<h2 id="s1" title="This is a very long title that describes everything in great detail">
Section
</h2> <!-- Too long -->
Non-Heading Elements
While headings are most common, other elements can also use title for bookmarks:
<section id="overview" title="Product Overview">
<div>
<p>Content without a heading...</p>
</div>
</section>
<div id="appendix" title="Appendix A: Resources">
<p>Additional resources and references...</p>
</div>
However, using proper heading elements (<h1> through <h6>) is recommended for semantic structure and consistent hierarchy.
Empty or Missing Titles
If a heading element has an id but no title, the element’s text content may be used as the bookmark text:
<!-- Title explicitly set -->
<h1 id="ch1" title="Chapter One">Chapter 1</h1>
<!-- Bookmark: "Chapter One" -->
<!-- No title - may use content -->
<h1 id="ch2">Chapter 2</h1>
<!-- Bookmark behavior: implementation-dependent -->
For consistent results, always provide explicit title attributes on elements you want to appear in bookmarks.
Examples
Basic Chapter Bookmarks
<h1 id="chapter1" title="Chapter 1: Introduction">
Chapter 1: Introduction
</h1>
<h1 id="chapter2" title="Chapter 2: Getting Started">
Chapter 2: Getting Started
</h1>
<h1 id="chapter3" title="Chapter 3: Advanced Features">
Chapter 3: Advanced Features
</h1>
Hierarchical Document Structure
<h1 id="ch1" title="1. Introduction">Chapter 1: Introduction</h1>
<h2 id="s1-1" title="1.1 Background">1.1 Background</h2>
<p>Background information...</p>
<h2 id="s1-2" title="1.2 Purpose">1.2 Purpose</h2>
<p>Purpose of this document...</p>
<h2 id="s1-3" title="1.3 Scope">1.3 Scope</h2>
<h3 id="s1-3-1" title="1.3.1 Inclusions">1.3.1 Inclusions</h3>
<p>What is included...</p>
<h3 id="s1-3-2" title="1.3.2 Exclusions">1.3.2 Exclusions</h3>
<p>What is not included...</p>
<h1 id="ch2" title="2. Methodology">Chapter 2: Methodology</h1>
<h2 id="s2-1" title="2.1 Research Design">2.1 Research Design</h2>
<p>Research design details...</p>
Table of Contents with Bookmarks
<!DOCTYPE html>
<html>
<head>
<title>Technical Report</title>
</head>
<body>
<!-- Table of Contents Page -->
<div id="toc" title="Table of Contents">
<h1>Table of Contents</h1>
<ol>
<li><a href="#executive-summary">Executive Summary</a></li>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#methodology">Methodology</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ol>
</div>
<div style="page-break-after: always;"></div>
<!-- Document Sections with Bookmarks -->
<section id="executive-summary" title="Executive Summary">
<h1>Executive Summary</h1>
<p>Summary content...</p>
</section>
<div style="page-break-after: always;"></div>
<section id="introduction" title="1. Introduction">
<h1>1. Introduction</h1>
<h2 id="background" title="1.1 Background">1.1 Background</h2>
<p>Background information...</p>
<h2 id="objectives" title="1.2 Objectives">1.2 Objectives</h2>
<p>Project objectives...</p>
</section>
<div style="page-break-after: always;"></div>
<section id="methodology" title="2. Methodology">
<h1>2. Methodology</h1>
<p>Methodology details...</p>
</section>
<div style="page-break-after: always;"></div>
<section id="results" title="3. Results">
<h1>3. Results</h1>
<p>Results and findings...</p>
</section>
<div style="page-break-after: always;"></div>
<section id="conclusion" title="4. Conclusion">
<h1>4. Conclusion</h1>
<p>Concluding remarks...</p>
</section>
</body>
</html>
Multi-Level Documentation
<h1 id="guide" title="User Guide">Complete User Guide</h1>
<h2 id="getting-started" title="Getting Started">Getting Started</h2>
<h3 id="installation" title="Installation">Installation</h3>
<p>Installation instructions...</p>
<h4 id="windows" title="Windows Installation">Windows</h4>
<p>Windows-specific steps...</p>
<h4 id="macos" title="macOS Installation">macOS</h4>
<p>macOS-specific steps...</p>
<h4 id="linux" title="Linux Installation">Linux</h4>
<p>Linux-specific steps...</p>
<h3 id="configuration" title="Configuration">Configuration</h3>
<p>Configuration options...</p>
<h2 id="features" title="Features">Features</h2>
<h3 id="basic-features" title="Basic Features">Basic Features</h3>
<p>Basic feature descriptions...</p>
<h3 id="advanced-features" title="Advanced Features">Advanced Features</h3>
<p>Advanced feature descriptions...</p>
Data-Bound Bookmarks
<!-- Model: { report: { title: "Q4 2025 Report", sections: [...] } } -->
<h1 id="report-title" title="">
</h1>
<template data-bind="">
<div style="page-break-before: always;">
<h2 id="section-" title=". ">
.
</h2>
<p><h1 id="target--the-link-target-attribute">@target : The Link Target Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute specifies where to open a linked document or resource. Used with <code class="language-plaintext highlighter-rouge"><a></code> (anchor) elements, it controls link behavior such as opening in a new window, the same frame, or the parent frame. In PDF documents, it primarily affects external links and can control whether links open in the same PDF viewer or a new window.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute defines link opening behavior:</p>
<ul>
<li>Specifies where linked documents should open</li>
<li>Used with <code class="language-plaintext highlighter-rouge"><a></code> and <code class="language-plaintext highlighter-rouge"><area></code> elements</li>
<li>Common values: <code class="language-plaintext highlighter-rouge">_blank</code>, <code class="language-plaintext highlighter-rouge">_self</code>, <code class="language-plaintext highlighter-rouge">_parent</code>, <code class="language-plaintext highlighter-rouge">_top</code></li>
<li>Can reference named frames/windows</li>
<li>In PDF context, mainly affects external links</li>
<li>Supports data binding for dynamic target assignment</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Open in new window/tab --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>External Link<span class="nt"></a></span>
<span class="c"><!-- Open in same window (default) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Same Window<span class="nt"></a></span>
<span class="c"><!-- Open in parent frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>Parent Frame<span class="nt"></a></span>
<span class="c"><!-- Open in topmost frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>Top Frame<span class="nt"></a></span>
<span class="c"><!-- Named target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"contentFrame"</span><span class="nt">></span>Named Frame<span class="nt"></a></span>
<span class="c"><!-- Dynamic target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>Link<span class="nt"></a></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute is used with:</p>
<h3 id="anchor-element">Anchor Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><a></code> - Hyperlink element (primary use)</li>
</ul>
<h3 id="area-element">Area Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><area></code> - Image map area element</li>
</ul>
<h3 id="base-element">Base Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><base></code> - Default target for all links in document</li>
</ul>
<h3 id="form-element">Form Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><form></code> - Form submission target (limited PDF use)</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute supports data binding for dynamic target assignment:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic target from model --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="c"><!-- Conditional target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="c"><!-- Different targets based on link type --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></template></span>
<span class="c"><!-- Open external links in new window --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></template></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"linkUrl"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"linkTarget"</span><span class="p">:</span><span class="w"> </span><span class="s2">"_blank"</span><span class="p">,</span><span class="w">
</span><span class="nl">"linkText"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Visit Website"</span><span class="p">,</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://external.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isExternal"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"External Resource"</span><span class="p">,</span><span class="w">
</span><span class="nl">"links"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#section1"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Internal Link"</span><span class="p">,</span><span class="w">
</span><span class="nl">"external"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"External Link"</span><span class="p">,</span><span class="w">
</span><span class="nl">"external"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"resources"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://docs.example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Documentation"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#appendix"</span><span class="p">,</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Appendix"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="target-values">Target Values</h3>
<p>Standard target attribute values:</p>
<h4 id="_blank">_blank</h4>
<p>Opens link in new window/tab:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in new window or tab --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Open in New Window
<span class="nt"></a></span>
<span class="c"><!-- External links typically use _blank --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://docs.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Documentation (opens in new window)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>External websites</li>
<li>Links that shouldn’t interrupt current document</li>
<li>Reference materials</li>
<li>Downloads</li>
</ul>
<h4 id="_self">_self</h4>
<p>Opens link in same frame/window (default):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Explicit _self (same as no target) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
Next Page (same window)
<span class="nt"></a></span>
<span class="c"><!-- This is the default behavior --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span><span class="nt">></span>Same as target="_self"<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Internal navigation</li>
<li>Default link behavior</li>
<li>Sequential page flow</li>
</ul>
<h4 id="_parent">_parent</h4>
<p>Opens link in parent frame:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in parent frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"main.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>
Back to Main (parent frame)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Breaking out of iframe</li>
<li>Nested frame navigation</li>
<li>Limited use in PDFs</li>
</ul>
<h4 id="_top">_top</h4>
<p>Opens link in topmost frame:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in topmost window, breaking out of all frames --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>
Home (top level)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Escaping nested frames</li>
<li>Returning to main document</li>
<li>Limited use in PDFs</li>
</ul>
<h4 id="named-targets">Named Targets</h4>
<p>Custom target names for specific frames:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Link to specific named frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"mainContent"</span><span class="nt">></span>
Load in Main Content Frame
<span class="nt"></a></span>
<span class="c"><!-- If frame doesn't exist, opens in new window --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"sidebar.html"</span> <span class="na">target=</span><span class="s">"sidebarFrame"</span><span class="nt">></span>
Load in Sidebar
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When target is omitted:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No target specified - defaults to _self --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span><span class="nt">></span>Default Behavior<span class="nt"></a></span>
<span class="c"><!-- Equivalent to: --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Explicit _self<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="pdf-context">PDF Context</h3>
<p>In PDF documents:</p>
<ol>
<li><strong>External links</strong> - May honor <code class="language-plaintext highlighter-rouge">target="_blank"</code> to open in browser</li>
<li><strong>Internal links</strong> - Typically ignore target (navigate within PDF)</li>
<li><strong>Limited frame support</strong> - PDF viewers don’t use frames</li>
<li><strong>New window</strong> - <code class="language-plaintext highlighter-rouge">_blank</code> may open external URLs outside PDF viewer</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- In PDF: Opens external site in browser --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
External Site
<span class="nt"></a></span>
<span class="c"><!-- In PDF: Navigates within same PDF --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Internal Link (target usually ignored)
<span class="nt"></a></span>
<span class="c"><!-- In PDF: Opens external PDF --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"other-document.pdf"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Another PDF (may open in new window)
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="security-considerations">Security Considerations</h3>
<p>Using <code class="language-plaintext highlighter-rouge">target="_blank"</code> has security implications:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- INSECURE: Vulnerable to tabnabbing --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://external.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
External Link
<span class="nt"></a></span>
<span class="c"><!-- SECURE: Add rel="noopener noreferrer" --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://external.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Secure External Link
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Why this matters:</strong></p>
<ul>
<li><code class="language-plaintext highlighter-rouge">noopener</code> prevents new window from accessing <code class="language-plaintext highlighter-rouge">window.opener</code></li>
<li><code class="language-plaintext highlighter-rouge">noreferrer</code> prevents referer information leakage</li>
<li>Protects against tabnabbing attacks</li>
</ul>
<h3 id="base-target">Base Target</h3>
<p>Set default target for all links:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Base Target<span class="nt"></title></span>
<span class="c"><!-- All links open in new window by default --></span>
<span class="nt"><base</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- Opens in new window (inherits from base) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>External Link<span class="nt"></a></span>
<span class="c"><!-- Override base target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Internal Link (same window)<span class="nt"></a></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="case-sensitivity">Case Sensitivity</h3>
<p>Target names are case-sensitive:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- These are DIFFERENT targets --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"ContentFrame"</span><span class="nt">></span>Capital C<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"contentFrame"</span><span class="nt">></span>Lowercase c<span class="nt"></a></span>
<span class="c"><!-- Reserved keywords are case-insensitive --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Lowercase<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_BLANK"</span><span class="nt">></span>Uppercase (same as _blank)<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Best Practice:</strong></p>
<ul>
<li>Use lowercase for reserved keywords</li>
<li>Be consistent with named targets</li>
</ul>
<h3 id="invalid-target-names">Invalid Target Names</h3>
<p>Valid vs invalid target names:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid reserved keywords --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="c"><!-- Valid named targets --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"myFrame"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"content123"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="c"><!-- Invalid: Can't start with underscore unless reserved --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_custom"</span><span class="nt">></span>Invalid (not reserved)<span class="nt"></a></span>
<span class="c"><!-- Invalid: Special characters --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"my frame"</span><span class="nt">></span>Invalid (space)<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"my-frame@123"</span><span class="nt">></span>Invalid (special chars)<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="accessibility-considerations">Accessibility Considerations</h3>
<p>Screen readers and target:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Good: Indicate new window in link text --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Visit Example.com (opens in new window)
<span class="nt"></a></span>
<span class="c"><!-- Good: Use aria-label for screen readers --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">aria-label=</span><span class="s">"Visit Example.com, opens in new window"</span><span class="nt">></span>
Visit Example.com
<span class="nt"></a></span>
<span class="c"><!-- Good: Visual indicator --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
External Site <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>⧉<span class="nt"></span></span>
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="form-target">Form Target</h3>
<p>Target for form submissions (limited PDF use):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Submit form results to new window --></span>
<span class="nt"><form</span> <span class="na">action=</span><span class="s">"process.php"</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"query"</span> <span class="nt">/></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span>
<span class="nt"></form></span>
<span class="c"><!-- Submit to named frame --></span>
<span class="nt"><form</span> <span class="na">action=</span><span class="s">"search.php"</span> <span class="na">target=</span><span class="s">"resultsFrame"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span> <span class="nt">/></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span>
<span class="nt"></form></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-external-links">Basic External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>External References<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Useful Resources<span class="nt"></h1></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Example Website (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://docs.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Documentation (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://support.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Support Center (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p></span>
<span class="nt"><em></span>Note: External links open in a new window for your convenience.<span class="nt"></em></span>
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="mixed-internal-and-external-links">Mixed Internal and External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document Navigation<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Table of Contents<span class="nt"></h1></span>
<span class="c"><!-- Internal links (same window) --></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#introduction"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Introduction<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#methodology"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Methodology<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#results"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Results<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#conclusion"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Conclusion<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="c"><!-- External references (new window) --></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>External Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/research"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Related Research ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/data"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Source Data ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"introduction"</span><span class="nt">></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>Content...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="document-with-base-target">Document with Base Target</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>External Links Document<span class="nt"></title></span>
<span class="c"><!-- Set default target for all links --></span>
<span class="nt"><base</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="nt">/></span>
<span class="nt"><style></span>
<span class="nc">.external-icon</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ⧉"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.8em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Reference Guide<span class="nt"></h1></span>
<span class="nt"><p></span>This document contains numerous external references.<span class="nt"></p></span>
<span class="c"><!-- These all open in new window (inherit from base) --></span>
<span class="nt"><h2></span>Web Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org"</span> <span class="na">rel=</span><span class="s">"noopener"</span> <span class="na">class=</span><span class="s">"external-icon"</span><span class="nt">></span>
W3C Standards
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://developer.mozilla.org"</span> <span class="na">rel=</span><span class="s">"noopener"</span> <span class="na">class=</span><span class="s">"external-icon"</span><span class="nt">></span>
MDN Web Docs
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="c"><!-- Override base target for internal navigation --></span>
<span class="nt"><h2></span>Document Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Section 1 (this document)<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Section 2 (this document)<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section1"</span><span class="nt">></span>
<span class="nt"><h2></span>Section 1<span class="nt"></h2></span>
<span class="nt"><p></span>Internal content...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="footer-with-social-links">Footer with Social Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 40pt; padding: 20pt; background-color: #f8f9fa;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center;"</span><span class="nt">></span>
<span class="nt"><h3></span>Connect With Us<span class="nt"></h3></span>
<span class="c"><!-- Social media links open in new windows --></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://twitter.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
Twitter
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://facebook.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
Facebook
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://linkedin.com/company/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
LinkedIn
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
GitHub
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="c"><!-- Internal links stay in same window --></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 20pt; font-size: 9pt;"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#privacy"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Privacy Policy<span class="nt"></a></span> |
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#terms"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Terms of Service<span class="nt"></a></span> |
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Contact Us<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></footer></span>
</code></pre></div></div>
<h3 id="data-bound-links">Data-Bound Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
externalLinks: [
{ url: "https://example.com", title: "Example Site", external: true },
{ url: "https://docs.example.com", title: "Documentation", external: true }
],
internalLinks: [
{ url: "#section1", title: "Section 1", external: false },
{ url: "#section2", title: "Section 2", external: false }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Links<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Quick Links<span class="nt"></h1></span>
<span class="nt"><h2></span>External Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span>
<span class="na">rel=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></template></span>
<span class="nt"></ul></span>
<span class="nt"><h2></span>Document Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></template></span>
<span class="nt"></ul></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="research-paper-references">Research Paper References</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><article></span>
<span class="nt"><h1></span>Research Paper: Climate Change Impact<span class="nt"></h1></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This paper examines the impact of climate change on coastal regions.
For background information, see the
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.ipcc.ch"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
IPCC reports (opens in new window)
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Methodology<span class="nt"></h2></span>
<span class="nt"><p></span>Our research methodology follows established protocols...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>References<span class="nt"></h2></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>
Smith, J. et al. (2024).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.1234/example1"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Climate Patterns Analysis" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
Jones, M. (2023).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.5678/example2"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Coastal Erosion Study" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
Chen, L. et al. (2024).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.9012/example3"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Sea Level Rise Projections" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 30pt; padding: 15pt; background-color: #f8f9fa;"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 9pt;"</span><span class="nt">></span>
<span class="nt"><em></span>
Note: References marked with ⧉ open in a new window and link to external websites.
<span class="nt"></em></span>
<span class="nt"></p></span>
<span class="nt"></footer></span>
<span class="nt"></article></span>
</code></pre></div></div>
<h3 id="download-links">Download Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h2></span>Available Downloads<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>User Manual (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Complete guide to using the product.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/user-manual.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Manual (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>Quick Start Guide (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Get started in minutes.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/quick-start.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Guide (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>Technical Specifications (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Detailed technical information.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/tech-specs.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Specs (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="help-documentation">Help Documentation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Help Documentation<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Getting Help<span class="nt"></h1></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Internal Help<span class="nt"></h2></span>
<span class="nt"><p></span>Navigate to different help sections within this document:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#faq"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Frequently Asked Questions<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#troubleshooting"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Troubleshooting<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Contact Information<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Online Resources<span class="nt"></h2></span>
<span class="nt"><p></span>Access additional help resources online:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://support.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Support Center, opens in new window"</span><span class="nt">></span>
Support Center ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://community.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Community Forum, opens in new window"</span><span class="nt">></span>
Community Forum ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://video-tutorials.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Video Tutorials, opens in new window"</span><span class="nt">></span>
Video Tutorials ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"faq"</span><span class="nt">></span>
<span class="nt"><h2></span>Frequently Asked Questions<span class="nt"></h2></span>
<span class="nt"><p></span>Common questions and answers...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"troubleshooting"</span><span class="nt">></span>
<span class="nt"><h2></span>Troubleshooting<span class="nt"></h2></span>
<span class="nt"><p></span>Solutions to common problems...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"contact"</span><span class="nt">></span>
<span class="nt"><h2></span>Contact Information<span class="nt"></h2></span>
<span class="nt"><p></span>
For additional support, visit our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/contact"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
contact page ⧉
<span class="nt"></a></span>
or email
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:support@example.com"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
support@example.com
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="navigation-menu">Navigation Menu</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><nav</span> <span class="na">style=</span><span class="s">"background-color: #336699; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: flex; justify-content: space-between; align-items: center;"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="c"><!-- Internal navigation --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
Home
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#about"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
About
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#services"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
Services
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; text-decoration: none;"</span><span class="nt">></span>
Contact
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="c"><!-- External link --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/login"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"color: white; padding: 8pt 15pt;
background-color: #28a745; text-decoration: none;
border-radius: 3pt;"</span><span class="nt">></span>
Login ⧉
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></nav></span>
</code></pre></div></div>
<h3 id="product-catalog-with-external-links">Product Catalog with External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Catalog<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: grid; grid-template-columns: repeat(2, 1fr); gap: 20pt;"</span><span class="nt">></span>
<span class="c"><!-- Product 1 --></span>
<span class="nt"><article</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Widget A<span class="nt"></h3></span>
<span class="nt"><p></span>High-quality widget for all your needs.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Price:<span class="nt"></strong></span> $99.99<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#widget-a-details"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"margin-right: 10pt;"</span><span class="nt">></span>
Details
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://store.example.com/widget-a"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Buy Now ⧉
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="c"><!-- Product 2 --></span>
<span class="nt"><article</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Widget B<span class="nt"></h3></span>
<span class="nt"><p></span>Premium widget with advanced features.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Price:<span class="nt"></strong></span> $149.99<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#widget-b-details"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"margin-right: 10pt;"</span><span class="nt">></span>
Details
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://store.example.com/widget-b"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Buy Now ⧉
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="legal-document">Legal Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Terms of Service<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Terms of Service<span class="nt"></h1></span>
<span class="nt"><p></span>Last Updated: January 15, 2025<span class="nt"></p></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>Table of Contents<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>1. Acceptance of Terms<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>2. User Obligations<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section3"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>3. Privacy Policy<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section4"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>4. Intellectual Property<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section5"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>5. Disclaimer<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section1"</span><span class="nt">></span>
<span class="nt"><h2></span>1. Acceptance of Terms<span class="nt"></h2></span>
<span class="nt"><p></span>
By accessing or using our service, you agree to be bound by these terms.
For more information, visit our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/legal"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
legal information page ⧉
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section3"</span><span class="nt">></span>
<span class="nt"><h2></span>3. Privacy Policy<span class="nt"></h2></span>
<span class="nt"><p></span>
Your privacy is important to us. Please review our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/privacy"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Privacy Policy ⧉
<span class="nt"></a></span>
for details on how we collect and use your information.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 40pt; padding: 20pt; border-top: 2pt solid #ccc;"</span><span class="nt">></span>
<span class="nt"><p></span>
Questions? Contact our legal team at
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:legal@example.com"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
legal@example.com
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></footer></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/a.html">a</a> - Anchor element for hyperlinks</li>
<li><a href="/reference/htmlattributes/href.html">href</a> - Hyperlink reference attribute</li>
<li><a href="/reference/htmltags/base.html">base</a> - Base URL element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute</li>
<li><a href="/reference/htmltags/area.html">area</a> - Image map area element</li>
<li><a href="/reference/htmltags/form.html">form</a> - Form element</li>
</ul>
<hr />
</p>
<!-- Nested subsections -->
<template data-bind="">
<h3 id="subsection-" title=" ">
</h3>
<p><h1 id="target--the-link-target-attribute">@target : The Link Target Attribute</h1>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute specifies where to open a linked document or resource. Used with <code class="language-plaintext highlighter-rouge"><a></code> (anchor) elements, it controls link behavior such as opening in a new window, the same frame, or the parent frame. In PDF documents, it primarily affects external links and can control whether links open in the same PDF viewer or a new window.</p>
<h2 id="usage">Usage</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute defines link opening behavior:</p>
<ul>
<li>Specifies where linked documents should open</li>
<li>Used with <code class="language-plaintext highlighter-rouge"><a></code> and <code class="language-plaintext highlighter-rouge"><area></code> elements</li>
<li>Common values: <code class="language-plaintext highlighter-rouge">_blank</code>, <code class="language-plaintext highlighter-rouge">_self</code>, <code class="language-plaintext highlighter-rouge">_parent</code>, <code class="language-plaintext highlighter-rouge">_top</code></li>
<li>Can reference named frames/windows</li>
<li>In PDF context, mainly affects external links</li>
<li>Supports data binding for dynamic target assignment</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Open in new window/tab --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>External Link<span class="nt"></a></span>
<span class="c"><!-- Open in same window (default) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Same Window<span class="nt"></a></span>
<span class="c"><!-- Open in parent frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>Parent Frame<span class="nt"></a></span>
<span class="c"><!-- Open in topmost frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>Top Frame<span class="nt"></a></span>
<span class="c"><!-- Named target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"contentFrame"</span><span class="nt">></span>Named Frame<span class="nt"></a></span>
<span class="c"><!-- Dynamic target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>Link<span class="nt"></a></span>
</code></pre></div></div>
<hr />
<h2 id="supported-elements">Supported Elements</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute is used with:</p>
<h3 id="anchor-element">Anchor Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><a></code> - Hyperlink element (primary use)</li>
</ul>
<h3 id="area-element">Area Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><area></code> - Image map area element</li>
</ul>
<h3 id="base-element">Base Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><base></code> - Default target for all links in document</li>
</ul>
<h3 id="form-element">Form Element</h3>
<ul>
<li><code class="language-plaintext highlighter-rouge"><form></code> - Form submission target (limited PDF use)</li>
</ul>
<hr />
<h2 id="binding-values">Binding Values</h2>
<p>The <code class="language-plaintext highlighter-rouge">target</code> attribute supports data binding for dynamic target assignment:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Dynamic target from model --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="c"><!-- Conditional target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="c"><!-- Different targets based on link type --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></template></span>
<span class="c"><!-- Open external links in new window --></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></template></span>
</code></pre></div></div>
<p><strong>Data Model Example:</strong></p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"linkUrl"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"linkTarget"</span><span class="p">:</span><span class="w"> </span><span class="s2">"_blank"</span><span class="p">,</span><span class="w">
</span><span class="nl">"linkText"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Visit Website"</span><span class="p">,</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://external.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"isExternal"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
</span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"External Resource"</span><span class="p">,</span><span class="w">
</span><span class="nl">"links"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#section1"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Internal Link"</span><span class="p">,</span><span class="w">
</span><span class="nl">"external"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"text"</span><span class="p">:</span><span class="w"> </span><span class="s2">"External Link"</span><span class="p">,</span><span class="w">
</span><span class="nl">"external"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">],</span><span class="w">
</span><span class="nl">"resources"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://docs.example.com"</span><span class="p">,</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Documentation"</span><span class="w">
</span><span class="p">},</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"url"</span><span class="p">:</span><span class="w"> </span><span class="s2">"#appendix"</span><span class="p">,</span><span class="w">
</span><span class="nl">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Appendix"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<hr />
<h2 id="notes">Notes</h2>
<h3 id="target-values">Target Values</h3>
<p>Standard target attribute values:</p>
<h4 id="_blank">_blank</h4>
<p>Opens link in new window/tab:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in new window or tab --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Open in New Window
<span class="nt"></a></span>
<span class="c"><!-- External links typically use _blank --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://docs.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Documentation (opens in new window)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>External websites</li>
<li>Links that shouldn’t interrupt current document</li>
<li>Reference materials</li>
<li>Downloads</li>
</ul>
<h4 id="_self">_self</h4>
<p>Opens link in same frame/window (default):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Explicit _self (same as no target) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
Next Page (same window)
<span class="nt"></a></span>
<span class="c"><!-- This is the default behavior --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page2.html"</span><span class="nt">></span>Same as target="_self"<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Internal navigation</li>
<li>Default link behavior</li>
<li>Sequential page flow</li>
</ul>
<h4 id="_parent">_parent</h4>
<p>Opens link in parent frame:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in parent frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"main.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>
Back to Main (parent frame)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Breaking out of iframe</li>
<li>Nested frame navigation</li>
<li>Limited use in PDFs</li>
</ul>
<h4 id="_top">_top</h4>
<p>Opens link in topmost frame:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Opens in topmost window, breaking out of all frames --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>
Home (top level)
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Use cases:</strong></p>
<ul>
<li>Escaping nested frames</li>
<li>Returning to main document</li>
<li>Limited use in PDFs</li>
</ul>
<h4 id="named-targets">Named Targets</h4>
<p>Custom target names for specific frames:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Link to specific named frame --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"content.html"</span> <span class="na">target=</span><span class="s">"mainContent"</span><span class="nt">></span>
Load in Main Content Frame
<span class="nt"></a></span>
<span class="c"><!-- If frame doesn't exist, opens in new window --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"sidebar.html"</span> <span class="na">target=</span><span class="s">"sidebarFrame"</span><span class="nt">></span>
Load in Sidebar
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="default-behavior">Default Behavior</h3>
<p>When target is omitted:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- No target specified - defaults to _self --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span><span class="nt">></span>Default Behavior<span class="nt"></a></span>
<span class="c"><!-- Equivalent to: --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Explicit _self<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="pdf-context">PDF Context</h3>
<p>In PDF documents:</p>
<ol>
<li><strong>External links</strong> - May honor <code class="language-plaintext highlighter-rouge">target="_blank"</code> to open in browser</li>
<li><strong>Internal links</strong> - Typically ignore target (navigate within PDF)</li>
<li><strong>Limited frame support</strong> - PDF viewers don’t use frames</li>
<li><strong>New window</strong> - <code class="language-plaintext highlighter-rouge">_blank</code> may open external URLs outside PDF viewer</li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- In PDF: Opens external site in browser --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
External Site
<span class="nt"></a></span>
<span class="c"><!-- In PDF: Navigates within same PDF --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Internal Link (target usually ignored)
<span class="nt"></a></span>
<span class="c"><!-- In PDF: Opens external PDF --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"other-document.pdf"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
Another PDF (may open in new window)
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="security-considerations">Security Considerations</h3>
<p>Using <code class="language-plaintext highlighter-rouge">target="_blank"</code> has security implications:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- INSECURE: Vulnerable to tabnabbing --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://external.com"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
External Link
<span class="nt"></a></span>
<span class="c"><!-- SECURE: Add rel="noopener noreferrer" --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://external.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Secure External Link
<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Why this matters:</strong></p>
<ul>
<li><code class="language-plaintext highlighter-rouge">noopener</code> prevents new window from accessing <code class="language-plaintext highlighter-rouge">window.opener</code></li>
<li><code class="language-plaintext highlighter-rouge">noreferrer</code> prevents referer information leakage</li>
<li>Protects against tabnabbing attacks</li>
</ul>
<h3 id="base-target">Base Target</h3>
<p>Set default target for all links:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document with Base Target<span class="nt"></title></span>
<span class="c"><!-- All links open in new window by default --></span>
<span class="nt"><base</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- Opens in new window (inherits from base) --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span><span class="nt">></span>External Link<span class="nt"></a></span>
<span class="c"><!-- Override base target --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Internal Link (same window)<span class="nt"></a></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="case-sensitivity">Case Sensitivity</h3>
<p>Target names are case-sensitive:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- These are DIFFERENT targets --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"ContentFrame"</span><span class="nt">></span>Capital C<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"contentFrame"</span><span class="nt">></span>Lowercase c<span class="nt"></a></span>
<span class="c"><!-- Reserved keywords are case-insensitive --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Lowercase<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_BLANK"</span><span class="nt">></span>Uppercase (same as _blank)<span class="nt"></a></span>
</code></pre></div></div>
<p><strong>Best Practice:</strong></p>
<ul>
<li>Use lowercase for reserved keywords</li>
<li>Be consistent with named targets</li>
</ul>
<h3 id="invalid-target-names">Invalid Target Names</h3>
<p>Valid vs invalid target names:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Valid reserved keywords --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_parent"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_top"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="c"><!-- Valid named targets --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"myFrame"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"content123"</span><span class="nt">></span>Valid<span class="nt"></a></span>
<span class="c"><!-- Invalid: Can't start with underscore unless reserved --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"_custom"</span><span class="nt">></span>Invalid (not reserved)<span class="nt"></a></span>
<span class="c"><!-- Invalid: Special characters --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"my frame"</span><span class="nt">></span>Invalid (space)<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"page.html"</span> <span class="na">target=</span><span class="s">"my-frame@123"</span><span class="nt">></span>Invalid (special chars)<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="accessibility-considerations">Accessibility Considerations</h3>
<p>Screen readers and target:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Good: Indicate new window in link text --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Visit Example.com (opens in new window)
<span class="nt"></a></span>
<span class="c"><!-- Good: Use aria-label for screen readers --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">aria-label=</span><span class="s">"Visit Example.com, opens in new window"</span><span class="nt">></span>
Visit Example.com
<span class="nt"></a></span>
<span class="c"><!-- Good: Visual indicator --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
External Site <span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>⧉<span class="nt"></span></span>
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="form-target">Form Target</h3>
<p>Target for form submissions (limited PDF use):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Submit form results to new window --></span>
<span class="nt"><form</span> <span class="na">action=</span><span class="s">"process.php"</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"query"</span> <span class="nt">/></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit<span class="nt"></button></span>
<span class="nt"></form></span>
<span class="c"><!-- Submit to named frame --></span>
<span class="nt"><form</span> <span class="na">action=</span><span class="s">"search.php"</span> <span class="na">target=</span><span class="s">"resultsFrame"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"search"</span> <span class="nt">/></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Search<span class="nt"></button></span>
<span class="nt"></form></span>
</code></pre></div></div>
<hr />
<h2 id="examples">Examples</h2>
<h3 id="basic-external-links">Basic External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>External References<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Useful Resources<span class="nt"></h1></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Example Website (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://docs.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Documentation (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://support.example.com"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Support Center (opens in new window)
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p></span>
<span class="nt"><em></span>Note: External links open in a new window for your convenience.<span class="nt"></em></span>
<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="mixed-internal-and-external-links">Mixed Internal and External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Document Navigation<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Table of Contents<span class="nt"></h1></span>
<span class="c"><!-- Internal links (same window) --></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#introduction"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Introduction<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#methodology"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Methodology<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#results"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Results<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#conclusion"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Conclusion<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="c"><!-- External references (new window) --></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>External Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/research"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Related Research ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/data"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener"</span><span class="nt">></span>
Source Data ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"introduction"</span><span class="nt">></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>Content...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="document-with-base-target">Document with Base Target</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>External Links Document<span class="nt"></title></span>
<span class="c"><!-- Set default target for all links --></span>
<span class="nt"><base</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="nt">/></span>
<span class="nt"><style></span>
<span class="nc">.external-icon</span><span class="nd">::after</span> <span class="p">{</span>
<span class="nl">content</span><span class="p">:</span> <span class="s1">" ⧉"</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">0.8em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Reference Guide<span class="nt"></h1></span>
<span class="nt"><p></span>This document contains numerous external references.<span class="nt"></p></span>
<span class="c"><!-- These all open in new window (inherit from base) --></span>
<span class="nt"><h2></span>Web Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org"</span> <span class="na">rel=</span><span class="s">"noopener"</span> <span class="na">class=</span><span class="s">"external-icon"</span><span class="nt">></span>
W3C Standards
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://developer.mozilla.org"</span> <span class="na">rel=</span><span class="s">"noopener"</span> <span class="na">class=</span><span class="s">"external-icon"</span><span class="nt">></span>
MDN Web Docs
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="c"><!-- Override base target for internal navigation --></span>
<span class="nt"><h2></span>Document Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Section 1 (this document)<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Section 2 (this document)<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section1"</span><span class="nt">></span>
<span class="nt"><h2></span>Section 1<span class="nt"></h2></span>
<span class="nt"><p></span>Internal content...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="footer-with-social-links">Footer with Social Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 40pt; padding: 20pt; background-color: #f8f9fa;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"text-align: center;"</span><span class="nt">></span>
<span class="nt"><h3></span>Connect With Us<span class="nt"></h3></span>
<span class="c"><!-- Social media links open in new windows --></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://twitter.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
Twitter
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://facebook.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
Facebook
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://linkedin.com/company/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
LinkedIn
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://github.com/example"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"margin: 0 10pt;"</span><span class="nt">></span>
GitHub
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="c"><!-- Internal links stay in same window --></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"margin-top: 20pt; font-size: 9pt;"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#privacy"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Privacy Policy<span class="nt"></a></span> |
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#terms"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Terms of Service<span class="nt"></a></span> |
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Contact Us<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></footer></span>
</code></pre></div></div>
<h3 id="data-bound-links">Data-Bound Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Model: {
externalLinks: [
{ url: "https://example.com", title: "Example Site", external: true },
{ url: "https://docs.example.com", title: "Documentation", external: true }
],
internalLinks: [
{ url: "#section1", title: "Section 1", external: false },
{ url: "#section2", title: "Section 2", external: false }
]
} --></span>
<span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Dynamic Links<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Quick Links<span class="nt"></h1></span>
<span class="nt"><h2></span>External Resources<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span>
<span class="na">target=</span><span class="s">""</span>
<span class="na">rel=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></template></span>
<span class="nt"></ul></span>
<span class="nt"><h2></span>Document Sections<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">""</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></template></span>
<span class="nt"></ul></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="research-paper-references">Research Paper References</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><article></span>
<span class="nt"><h1></span>Research Paper: Climate Change Impact<span class="nt"></h1></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Introduction<span class="nt"></h2></span>
<span class="nt"><p></span>
This paper examines the impact of climate change on coastal regions.
For background information, see the
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.ipcc.ch"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
IPCC reports (opens in new window)
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Methodology<span class="nt"></h2></span>
<span class="nt"><p></span>Our research methodology follows established protocols...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>References<span class="nt"></h2></span>
<span class="nt"><ol></span>
<span class="nt"><li></span>
Smith, J. et al. (2024).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.1234/example1"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Climate Patterns Analysis" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
Jones, M. (2023).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.5678/example2"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Coastal Erosion Study" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
Chen, L. et al. (2024).
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://doi.org/10.9012/example3"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
"Sea Level Rise Projections" ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 30pt; padding: 15pt; background-color: #f8f9fa;"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">style=</span><span class="s">"font-size: 9pt;"</span><span class="nt">></span>
<span class="nt"><em></span>
Note: References marked with ⧉ open in a new window and link to external websites.
<span class="nt"></em></span>
<span class="nt"></p></span>
<span class="nt"></footer></span>
<span class="nt"></article></span>
</code></pre></div></div>
<h3 id="download-links">Download Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h2></span>Available Downloads<span class="nt"></h2></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>User Manual (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Complete guide to using the product.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/user-manual.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Manual (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>Quick Start Guide (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Get started in minutes.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/quick-start.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Guide (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt; margin: 10pt 0;"</span><span class="nt">></span>
<span class="nt"><h3></span>Technical Specifications (PDF)<span class="nt"></h3></span>
<span class="nt"><p></span>Detailed technical information.<span class="nt"></p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"downloads/tech-specs.pdf"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener"</span>
<span class="na">style=</span><span class="s">"display: inline-block; padding: 10pt 20pt;
background-color: #336699; color: white;
text-decoration: none; border-radius: 3pt;"</span><span class="nt">></span>
Download Specs (opens in new window)
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="help-documentation">Help Documentation</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Help Documentation<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Getting Help<span class="nt"></h1></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Internal Help<span class="nt"></h2></span>
<span class="nt"><p></span>Navigate to different help sections within this document:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#faq"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Frequently Asked Questions<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#troubleshooting"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Troubleshooting<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>Contact Information<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></section></span>
<span class="nt"><section></span>
<span class="nt"><h2></span>Online Resources<span class="nt"></h2></span>
<span class="nt"><p></span>Access additional help resources online:<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://support.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Support Center, opens in new window"</span><span class="nt">></span>
Support Center ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://community.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Community Forum, opens in new window"</span><span class="nt">></span>
Community Forum ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://video-tutorials.example.com"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">aria-label=</span><span class="s">"Video Tutorials, opens in new window"</span><span class="nt">></span>
Video Tutorials ⧉
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"faq"</span><span class="nt">></span>
<span class="nt"><h2></span>Frequently Asked Questions<span class="nt"></h2></span>
<span class="nt"><p></span>Common questions and answers...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"troubleshooting"</span><span class="nt">></span>
<span class="nt"><h2></span>Troubleshooting<span class="nt"></h2></span>
<span class="nt"><p></span>Solutions to common problems...<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"contact"</span><span class="nt">></span>
<span class="nt"><h2></span>Contact Information<span class="nt"></h2></span>
<span class="nt"><p></span>
For additional support, visit our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/contact"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
contact page ⧉
<span class="nt"></a></span>
or email
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:support@example.com"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
support@example.com
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="navigation-menu">Navigation Menu</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><nav</span> <span class="na">style=</span><span class="s">"background-color: #336699; padding: 15pt; margin-bottom: 20pt;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: flex; justify-content: space-between; align-items: center;"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="c"><!-- Internal navigation --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
Home
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#about"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
About
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#services"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; margin-right: 15pt; text-decoration: none;"</span><span class="nt">></span>
Services
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#contact"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"color: white; text-decoration: none;"</span><span class="nt">></span>
Contact
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="c"><!-- External link --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/login"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span>
<span class="na">style=</span><span class="s">"color: white; padding: 8pt 15pt;
background-color: #28a745; text-decoration: none;
border-radius: 3pt;"</span><span class="nt">></span>
Login ⧉
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></nav></span>
</code></pre></div></div>
<h3 id="product-catalog-with-external-links">Product Catalog with External Links</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><section></span>
<span class="nt"><h1></span>Product Catalog<span class="nt"></h1></span>
<span class="nt"><div</span> <span class="na">style=</span><span class="s">"display: grid; grid-template-columns: repeat(2, 1fr); gap: 20pt;"</span><span class="nt">></span>
<span class="c"><!-- Product 1 --></span>
<span class="nt"><article</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Widget A<span class="nt"></h3></span>
<span class="nt"><p></span>High-quality widget for all your needs.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Price:<span class="nt"></strong></span> $99.99<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#widget-a-details"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"margin-right: 10pt;"</span><span class="nt">></span>
Details
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://store.example.com/widget-a"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Buy Now ⧉
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="c"><!-- Product 2 --></span>
<span class="nt"><article</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 15pt;"</span><span class="nt">></span>
<span class="nt"><h3></span>Widget B<span class="nt"></h3></span>
<span class="nt"><p></span>Premium widget with advanced features.<span class="nt"></p></span>
<span class="nt"><p><strong></span>Price:<span class="nt"></strong></span> $149.99<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#widget-b-details"</span> <span class="na">target=</span><span class="s">"_self"</span>
<span class="na">style=</span><span class="s">"margin-right: 10pt;"</span><span class="nt">></span>
Details
<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://store.example.com/widget-b"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Buy Now ⧉
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></article></span>
<span class="nt"></div></span>
<span class="nt"></section></span>
</code></pre></div></div>
<h3 id="legal-document">Legal Document</h3>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/></span>
<span class="nt"><title></span>Terms of Service<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Terms of Service<span class="nt"></h1></span>
<span class="nt"><p></span>Last Updated: January 15, 2025<span class="nt"></p></span>
<span class="nt"><nav></span>
<span class="nt"><h2></span>Table of Contents<span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section1"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>1. Acceptance of Terms<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section2"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>2. User Obligations<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section3"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>3. Privacy Policy<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section4"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>4. Intellectual Property<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#section5"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>5. Disclaimer<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section1"</span><span class="nt">></span>
<span class="nt"><h2></span>1. Acceptance of Terms<span class="nt"></h2></span>
<span class="nt"><p></span>
By accessing or using our service, you agree to be bound by these terms.
For more information, visit our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/legal"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
legal information page ⧉
<span class="nt"></a></span>.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><section</span> <span class="na">id=</span><span class="s">"section3"</span><span class="nt">></span>
<span class="nt"><h2></span>3. Privacy Policy<span class="nt"></h2></span>
<span class="nt"><p></span>
Your privacy is important to us. Please review our
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://example.com/privacy"</span>
<span class="na">target=</span><span class="s">"_blank"</span>
<span class="na">rel=</span><span class="s">"noopener noreferrer"</span><span class="nt">></span>
Privacy Policy ⧉
<span class="nt"></a></span>
for details on how we collect and use your information.
<span class="nt"></p></span>
<span class="nt"></section></span>
<span class="nt"><footer</span> <span class="na">style=</span><span class="s">"margin-top: 40pt; padding: 20pt; border-top: 2pt solid #ccc;"</span><span class="nt">></span>
<span class="nt"><p></span>
Questions? Contact our legal team at
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:legal@example.com"</span> <span class="na">target=</span><span class="s">"_self"</span><span class="nt">></span>
legal@example.com
<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></footer></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="/reference/htmltags/a.html">a</a> - Anchor element for hyperlinks</li>
<li><a href="/reference/htmlattributes/href.html">href</a> - Hyperlink reference attribute</li>
<li><a href="/reference/htmltags/base.html">base</a> - Base URL element</li>
<li><a href="/reference/htmlattributes/rel.html">rel</a> - Relationship attribute</li>
<li><a href="/reference/htmltags/area.html">area</a> - Image map area element</li>
<li><a href="/reference/htmltags/form.html">form</a> - Form element</li>
</ul>
<hr />
</p>
</template>
</div>
</template>
Report with Abbreviated Bookmarks
<!-- Long content headings with short bookmark titles -->
<h1 id="exec" title="Executive Summary">
Executive Summary: Key Findings and Recommendations for Fiscal Year 2025
</h1>
<h2 id="findings" title="Key Findings">
Key Findings from the Annual Performance Review and Market Analysis
</h2>
<h2 id="recommendations" title="Recommendations">
Strategic Recommendations for the Upcoming Fiscal Year
</h2>
<h1 id="detailed" title="Detailed Analysis">
Detailed Analysis of Market Conditions, Competitive Landscape, and Growth Opportunities
</h1>
Book with Chapters and Sections
<!-- Front Matter -->
<div id="preface" title="Preface">
<h1>Preface</h1>
<p>Preface content...</p>
</div>
<div style="page-break-after: always;"></div>
<!-- Part 1 -->
<div id="part1" title="Part I: Foundations">
<h1 style="text-align: center; font-size: 24pt;">PART I: FOUNDATIONS</h1>
</div>
<div style="page-break-after: always;"></div>
<h1 id="ch1" title="Chapter 1: Introduction">Chapter 1: Introduction</h1>
<h2 id="ch1-s1" title="What is PDF Generation?">What is PDF Generation?</h2>
<h2 id="ch1-s2" title="Why Use Scryber?">Why Use Scryber?</h2>
<div style="page-break-after: always;"></div>
<h1 id="ch2" title="Chapter 2: Core Concepts">Chapter 2: Core Concepts</h1>
<h2 id="ch2-s1" title="Document Structure">Document Structure</h2>
<h2 id="ch2-s2" title="Layout Engine">Layout Engine</h2>
<div style="page-break-after: always;"></div>
<!-- Part 2 -->
<div id="part2" title="Part II: Advanced Topics">
<h1 style="text-align: center; font-size: 24pt;">PART II: ADVANCED TOPICS</h1>
</div>
<div style="page-break-after: always;"></div>
<h1 id="ch3" title="Chapter 3: Data Binding">Chapter 3: Data Binding</h1>
<h2 id="ch3-s1" title="Binding Syntax">Binding Syntax</h2>
<h2 id="ch3-s2" title="Complex Models">Complex Models</h2>
Academic Paper Structure
<article>
<header id="header" title="Title Page">
<h1>Research Paper Title</h1>
<p>Author names and affiliations</p>
</header>
<div style="page-break-after: always;"></div>
<section id="abstract" title="Abstract">
<h1>Abstract</h1>
<p>Paper abstract...</p>
</section>
<div style="page-break-after: always;"></div>
<section id="intro" title="1. Introduction">
<h1>1. Introduction</h1>
<h2 id="intro-context" title="1.1 Research Context">1.1 Research Context</h2>
<h2 id="intro-questions" title="1.2 Research Questions">1.2 Research Questions</h2>
</section>
<section id="literature" title="2. Literature Review">
<h1>2. Literature Review</h1>
<h2 id="lit-theory" title="2.1 Theoretical Framework">2.1 Theoretical Framework</h2>
<h2 id="lit-studies" title="2.2 Previous Studies">2.2 Previous Studies</h2>
</section>
<section id="methods" title="3. Methodology">
<h1>3. Methodology</h1>
<h2 id="methods-design" title="3.1 Research Design">3.1 Research Design</h2>
<h2 id="methods-sample" title="3.2 Sample Selection">3.2 Sample Selection</h2>
<h2 id="methods-analysis" title="3.3 Data Analysis">3.3 Data Analysis</h2>
</section>
<section id="results" title="4. Results">
<h1>4. Results</h1>
<h2 id="results-descriptive" title="4.1 Descriptive Statistics">
4.1 Descriptive Statistics
</h2>
<h2 id="results-inferential" title="4.2 Inferential Statistics">
4.2 Inferential Statistics
</h2>
</section>
<section id="discussion" title="5. Discussion">
<h1>5. Discussion</h1>
<h2 id="disc-findings" title="5.1 Interpretation of Findings">
5.1 Interpretation of Findings
</h2>
<h2 id="disc-implications" title="5.2 Implications">5.2 Implications</h2>
<h2 id="disc-limitations" title="5.3 Limitations">5.3 Limitations</h2>
</section>
<section id="conclusion" title="6. Conclusion">
<h1>6. Conclusion</h1>
<p>Concluding remarks...</p>
</section>
<section id="references" title="References">
<h1>References</h1>
<p>Citation list...</p>
</section>
</article>
Technical Manual with Appendices
<h1 id="intro" title="Introduction">Introduction</h1>
<p>Manual introduction...</p>
<h1 id="installation" title="Installation">Installation Guide</h1>
<h2 id="requirements" title="System Requirements">System Requirements</h2>
<h2 id="install-steps" title="Installation Steps">Installation Steps</h2>
<h1 id="usage" title="Usage">Usage Instructions</h1>
<h2 id="basic-usage" title="Basic Usage">Basic Usage</h2>
<h2 id="advanced-usage" title="Advanced Usage">Advanced Usage</h2>
<h1 id="api" title="API Reference">API Reference</h1>
<h2 id="api-core" title="Core API">Core API</h2>
<h2 id="api-extensions" title="Extensions">Extensions</h2>
<h1 id="troubleshooting" title="Troubleshooting">Troubleshooting</h1>
<h2 id="common-issues" title="Common Issues">Common Issues</h2>
<h2 id="error-codes" title="Error Codes">Error Codes</h2>
<!-- Appendices -->
<div style="page-break-before: always;">
<h1 id="appendix-a" title="Appendix A: Configuration">
Appendix A: Configuration Reference
</h1>
</div>
<div style="page-break-before: always;">
<h1 id="appendix-b" title="Appendix B: Examples">
Appendix B: Code Examples
</h1>
</div>
<div style="page-break-before: always;">
<h1 id="appendix-c" title="Appendix C: Glossary">
Appendix C: Glossary of Terms
</h1>
</div>
Newsletter with Sections
<header id="masthead" title="Newsletter Header">
<h1>Monthly Newsletter - January 2025</h1>
</header>
<section id="news" title="Company News">
<h2>Company News</h2>
<article id="news1" title="Product Launch">
<h3>New Product Launch</h3>
<p>Details about the launch...</p>
</article>
<article id="news2" title="Award Received">
<h3>Industry Award Received</h3>
<p>Award details...</p>
</article>
</section>
<section id="features" title="Featured Articles">
<h2>Featured Articles</h2>
<article id="feature1" title="Technology Trends">
<h3>Top Technology Trends for 2025</h3>
<p>Article content...</p>
</article>
</section>
<section id="events" title="Upcoming Events">
<h2>Upcoming Events</h2>
<p>Event listings...</p>
</section>
Dynamic Report with Conditional Titles
<!-- Model: { reportType: "quarterly", quarter: "Q4", year: 2025, sections: [...] } -->
<h1 id="report-title"
title=" Report">
Report
</h1>
<template data-bind="">
<section id="section-" title=". ">
<h2>. </h2>
<p></p>
<template data-bind="">
<h3 id="item-" title=": ">
</h3>
<p></p>
</template>
</section>
</template>
Instruction Manual
<h1 id="safety" title="Safety Information">Safety Information</h1>
<h2 id="warnings" title="Warnings">Important Warnings</h2>
<h2 id="precautions" title="Precautions">Precautions</h2>
<h1 id="overview" title="Product Overview">Product Overview</h1>
<h2 id="components" title="Components">Components and Parts</h2>
<h2 id="specifications" title="Specifications">Technical Specifications</h2>
<h1 id="assembly" title="Assembly Instructions">Assembly Instructions</h1>
<h2 id="tools" title="Required Tools">Required Tools</h2>
<h2 id="step1" title="Step 1: Base Assembly">Step 1: Base Assembly</h2>
<h2 id="step2" title="Step 2: Main Unit">Step 2: Main Unit Assembly</h2>
<h2 id="step3" title="Step 3: Final Assembly">Step 3: Final Assembly</h2>
<h1 id="operation" title="Operation">Operation Instructions</h1>
<h2 id="startup" title="Starting Up">Starting Up</h2>
<h2 id="normal-use" title="Normal Use">Normal Operation</h2>
<h2 id="shutdown" title="Shutting Down">Shutting Down</h2>
<h1 id="maintenance" title="Maintenance">Maintenance and Care</h1>
<h2 id="cleaning" title="Cleaning">Cleaning Instructions</h2>
<h2 id="storage" title="Storage">Storage Guidelines</h2>
<h1 id="warranty" title="Warranty Information">Warranty Information</h1>
See Also
- id - Unique identifier attribute (required for bookmark navigation)
- a - Anchor element for linking to bookmarked sections
- href - Link reference attribute
- h1-h6 - Heading elements (primary use for bookmarks)
- PDF Bookmarks - Document outline and navigation
- Document Structure - Organizing PDF documents
- Data Binding - Dynamic content and attributes