Skip to main content Link Search Menu Expand Document (external link)

@id : The ID Attribute

The id attribute provides a unique identifier for an HTML element within a document. It serves multiple purposes: creating anchor points for internal links, targeting elements for styling, establishing references for PDF bookmarks, and enabling element identification in data binding scenarios.

Usage

The id attribute assigns a unique identifier to an element that:

  • Must be unique within the entire document
  • Creates anchor points for internal navigation using <a href="#id">
  • Allows CSS targeting with ID selectors (#id)
  • Establishes references for PDF outline entries and bookmarks
  • Enables element lookup and manipulation in code
  • Supports data binding and dynamic content references
<!-- Basic ID assignment -->
<h1 id="main-title">Document Title</h1>

<!-- Link to element with ID -->
<a href="#main-title">Jump to Title</a>

<!-- CSS targeting by ID -->
<div id="sidebar" style="width: 200pt;"></div>

Supported Elements

The id attribute is supported on all HTML elements in Scryber, including:

Block Elements

  • <div>, <section>, <article>, <aside>, <main>, <nav>
  • <header>, <footer>, <address>
  • <h1> through <h6>, <p>, <blockquote>, <pre>
  • <ul>, <ol>, <li>, <dl>, <dt>, <dd>
  • <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>
  • <fieldset>, <legend>, <figure>, <figcaption>

Inline Elements

  • <a>, <span>, <strong>, <em>, <b>, <i>, <u>
  • <code>, <kbd>, <samp>, <var>, <mark>, <small>
  • <sub>, <sup>, <abbr>, <cite>, <q>

Media and Embedded Elements

  • <img>, <iframe>, <canvas>

Form Elements

  • <form>, <input>, <textarea>, <select>, <button>, <label>

Binding Values

The id attribute supports data binding with dynamic values:

<!-- Dynamic ID from data model -->
<div id="">
    Section content
</div>

<!-- Computed ID from expression -->
<h2 id="section-">
    Section 
</h2>

<!-- Conditional ID generation -->
<article id="-article-">
    Article content
</article>

<!-- In a loop with unique IDs -->
<template data-bind="">
    <div id="chapter-">
        <h2></h2>
        <p><h1 id="http-equiv--the-http-header-equivalent-attribute">@http-equiv : The HTTP Header Equivalent Attribute</h1>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute provides an HTTP header equivalent for HTML <code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code> elements. In web contexts, it instructs browsers to behave as if a specific HTTP header was received. In PDF generation, it is primarily informational and maintains HTML compatibility.</p>

<h2 id="usage">Usage</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute is used with <code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code> elements to:</p>
<ul>
  <li>Declare document character encoding (though <code class="language-plaintext highlighter-rouge">charset</code> is preferred)</li>
  <li>Specify content type information</li>
  <li>Provide HTTP-header-like directives</li>
  <li>Maintain web-to-PDF conversion compatibility</li>
  <li>Document intended HTTP behavior</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="supported-elements">Supported Elements</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute is supported by the following element:</p>

<table>
  <thead>
    <tr>
      <th>Element</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code></td>
      <td>Metadata element for document properties</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="attribute-values">Attribute Values</h2>

<h3 id="syntax">Syntax</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"directive"</span> <span class="na">content=</span><span class="s">"value"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="common-values">Common Values</h3>

<table>
  <thead>
    <tr>
      <th>Value</th>
      <th>Content</th>
      <th>Description</th>
      <th>PDF Behavior</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">Content-Type</code></td>
      <td><code class="language-plaintext highlighter-rouge">text/html; charset=UTF-8</code></td>
      <td>Declares document MIME type and encoding</td>
      <td>Informational only</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">X-UA-Compatible</code></td>
      <td><code class="language-plaintext highlighter-rouge">IE=edge</code></td>
      <td>Browser compatibility mode</td>
      <td>Ignored in PDF</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">refresh</code></td>
      <td><code class="language-plaintext highlighter-rouge">30; url=...</code></td>
      <td>Page refresh/redirect</td>
      <td>Not applicable to PDF</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">default-style</code></td>
      <td><code class="language-plaintext highlighter-rouge">stylesheet-name</code></td>
      <td>Preferred stylesheet</td>
      <td>Not commonly used</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">Content-Language</code></td>
      <td><code class="language-plaintext highlighter-rouge">en-US</code></td>
      <td>Document language</td>
      <td>Informational</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="binding-values">Binding Values</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> and <code class="language-plaintext highlighter-rouge">content</code> attributes support data binding:</p>

<h3 id="static-declaration">Static Declaration</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="dynamic-value">Dynamic Value</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { charset: "UTF-8", language: "en-US" } --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="notes">Notes</h2>

<h3 id="web-behavior-vs-pdf-behavior">Web Behavior vs PDF Behavior</h3>

<p><strong>In Web Browsers:</strong></p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">http-equiv</code> directives are processed as if they were HTTP headers</li>
  <li>Affects browser rendering, caching, and behavior</li>
  <li>Can trigger specific browser modes or actions</li>
</ul>

<p><strong>In Scryber PDF Generation:</strong></p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">http-equiv</code> attributes are <strong>informational only</strong></li>
  <li>No HTTP headers are generated (PDFs are not served via HTTP)</li>
  <li>Maintains HTML document structure for compatibility</li>
  <li>Character encoding is handled automatically</li>
</ul>

<h3 id="character-encoding">Character Encoding</h3>

<p>While <code class="language-plaintext highlighter-rouge">http-equiv="Content-Type"</code> can specify character encoding, the standalone <code class="language-plaintext highlighter-rouge">charset</code> attribute is preferred:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Old style (still valid) --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

<span class="c">&lt;!-- Modern style (recommended) --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="limited-applicability">Limited Applicability</h3>

<p>Most <code class="language-plaintext highlighter-rouge">http-equiv</code> directives are <strong>not applicable to PDF generation</strong>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">refresh</code>: PDFs are static documents</li>
  <li><code class="language-plaintext highlighter-rouge">X-UA-Compatible</code>: No browser rendering involved</li>
  <li>Cache control directives: PDFs are files, not served resources</li>
</ul>

<h3 id="use-cases-in-pdf">Use Cases in PDF</h3>

<ol>
  <li><strong>Documentation</strong>: Preserve original HTML meta information</li>
  <li><strong>Compatibility</strong>: Maintain structure when converting web pages</li>
  <li><strong>Standards Compliance</strong>: Follow HTML specifications</li>
  <li><strong>Metadata</strong>: Provide additional document context</li>
</ol>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-character-encoding-declaration">Example 1: Character Encoding Declaration</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Document with Encoding<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Traditional encoding declaration --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Modern equivalent (preferred) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-2-content-type-with-language">Example 2: Content Type with Language</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;title&gt;</span>English Language Document<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-3-multiple-meta-directives">Example 3: Multiple Meta Directives</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Complete Metadata Example<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- HTTP equivalent directives --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Doe"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Sample document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-4-legacy-web-page-conversion">Example 4: Legacy Web Page Conversion</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Original web page headers --&gt;</span>
<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Legacy Web Page<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=ISO-8859-1"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=EmulateIE7"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"imagetoolbar"</span> <span class="na">content=</span><span class="s">"no"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- When converted to PDF, these are preserved but not processed --&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-5-multi-language-document">Example 5: Multi-Language Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bilingual Document<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US, es-MX"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"English and Spanish content"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-6-data-bound-encoding">Example 6: Data-Bound Encoding</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { encoding: "UTF-8", contentType: "text/html" } --&gt;</span>

<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Dynamic Metadata<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span>
          <span class="na">content=</span><span class="s">"; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-7-complete-document-headers">Example 7: Complete Document Headers</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Professional Report<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- HTTP equivalents (informational in PDF) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual corporate report"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"report, finance, annual"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Open Graph metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Annual Report 2024"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-8-browser-compatibility-headers-preserved">Example 8: Browser Compatibility Headers (Preserved)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Cross-Browser Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- These are preserved when converting HTML to PDF --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"cleartype"</span> <span class="na">content=</span><span class="s">"on"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-9-content-security-policy-informational">Example 9: Content Security Policy (Informational)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Secure Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- CSP directive (not enforced in PDF, but preserved) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Security-Policy"</span>
          <span class="na">content=</span><span class="s">"default-src 'self'; script-src 'none';"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-10-conditional-encoding">Example 10: Conditional Encoding</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { useUnicode: true } --&gt;</span>

<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Conditional Encoding Document<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span>
          <span class="na">content=</span><span class="s">"text/html; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-11-international-character-set">Example 11: International Character Set</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>国际文档<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- International Document --&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"zh-CN"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Chinese language document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-12-technical-documentation">Example 12: Technical Documentation</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>API Documentation<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Development Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete API reference documentation"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-13-archive-document">Example 13: Archive Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Historical Archive Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Preserve original encoding declaration --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-GB"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Document archive metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"archive-date"</span> <span class="na">content=</span><span class="s">"2024-01-15"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"original-url"</span> <span class="na">content=</span><span class="s">"https://example.com/original"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-14-form-document">Example 14: Form Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Application Form<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"HR Department"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Employee application form"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"applicationForm"</span><span class="nt">&gt;</span>
        <span class="c">&lt;!-- Form content --&gt;</span>
    <span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-15-web-to-pdf-with-all-meta-tags">Example 15: Web-to-PDF with All Meta Tags</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Complete Web Page - Converted to PDF<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Browser compatibility --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Language --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Web Development Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete web page example"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"web, HTML, PDF"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Open Graph --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Complete Web Page"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"website"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Example of complete web page metadata"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/htmltags/meta.html">meta element</a> - The meta HTML element</li>
  <li><a href="/reference/htmlattributes/content.html">content attribute</a> - Meta content value</li>
  <li><a href="/reference/htmlattributes/charset.html">charset attribute</a> - Character encoding</li>
  <li><a href="/reference/htmlattributes/name.html">name attribute</a> - Standard metadata name</li>
  <li><a href="/reference/htmlattributes/property.html">property attribute</a> - Open Graph properties</li>
  <li><a href="/reference/document/properties.html">Document Properties</a> - PDF document properties</li>
  <li><a href="/reference/encoding/">Character Encoding</a> - Character encoding reference</li>
</ul>

<hr />
</p>
    </div>
</template>

Data Model Example:

{
  "sectionId": "introduction",
  "index": 1,
  "type": "news",
  "articleId": "12345",
  "chapters": [
    { "number": 1, "title": "Getting Started" },
    { "number": 2, "title": "Advanced Topics" }
  ]
}

Notes

Uniqueness Requirement

The id attribute value must be unique within the entire document. Duplicate IDs can cause:

  • Unpredictable behavior with internal links
  • CSS selector conflicts
  • Broken PDF bookmarks and navigation
  • Issues with document structure
<!-- INCORRECT: Duplicate IDs -->
<div id="content">First section</div>
<div id="content">Second section</div>

<!-- CORRECT: Unique IDs -->
<div id="content-section1">First section</div>
<div id="content-section2">Second section</div>

ID Naming Rules

Valid ID values should follow these conventions:

  • Start with a letter (a-z, A-Z)
  • Can contain letters, digits, hyphens (-), underscores (_), and periods (.)
  • Are case-sensitive (myId ≠ MyId)
  • Should not contain spaces or special characters
  • Should be descriptive and meaningful
<!-- Valid IDs -->
<div id="main-content"></div>
<div id="section_1"></div>
<div id="nav.primary"></div>
<div id="userId123"></div>

<!-- Avoid these -->
<div id="123section"></div>  <!-- Starts with number -->
<div id="my content"></div>  <!-- Contains space -->
<div id="section@home"></div>  <!-- Special character -->

Internal Navigation

Elements with id attributes serve as anchor points for internal links:

<!-- Define anchor points -->
<h2 id="overview">Overview</h2>
<h2 id="features">Features</h2>
<h2 id="pricing">Pricing</h2>

<!-- Link to anchor points -->
<nav>
    <a href="#overview">Overview</a>
    <a href="#features">Features</a>
    <a href="#pricing">Pricing</a>
</nav>

When a user clicks a link with href="#overview", the PDF viewer will navigate to the element with id="overview".

CSS Targeting

Use ID selectors in CSS to target specific elements:

<style>
    #header {
        background-color: #336699;
        color: white;
        padding: 20pt;
    }

    #footer {
        border-top: 2pt solid #ccc;
        text-align: center;
    }
</style>

<div id="header">
    <h1>Document Header</h1>
</div>

<div id="footer">
    <p>© 2025 Company Name</p>
</div>

PDF Bookmarks and Outlines

Elements with id attributes can appear in the PDF document outline. Use the title attribute to set the bookmark text:

<h1 id="chapter1" title="Chapter 1: Introduction">
    Chapter 1: Introduction
</h1>

This creates a navigable bookmark in the PDF outline panel that links to the element.

ID vs Class

  • ID: Use for unique elements that appear once per document
  • Class: Use for reusable styles applied to multiple elements
<!-- ID for unique elements -->
<header id="site-header">...</header>
<main id="main-content">...</main>
<footer id="site-footer">...</footer>

<!-- Class for repeated styling -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

Examples

Basic ID Assignment 

<div id="container">
    <h1 id="page-title">Welcome</h1>
    <p id="intro">This is the introduction paragraph.</p>
</div>

Internal Document Navigation 

<!DOCTYPE html>
<html>
<head>
    <title>Document Navigation</title>
</head>
<body>
    <!-- Navigation menu -->
    <nav id="main-nav">
        <h2>Contents</h2>
        <ul>
            <li><a href="#intro">Introduction</a></li>
            <li><a href="#methodology">Methodology</a></li>
            <li><a href="#results">Results</a></li>
            <li><a href="#conclusion">Conclusion</a></li>
        </ul>
    </nav>

    <div style="page-break-after: always;"></div>

    <!-- Content sections -->
    <section id="intro">
        <h2>Introduction</h2>
        <p>Introduction content goes here...</p>
        <a href="#main-nav">Back to Contents</a>
    </section>

    <div style="page-break-after: always;"></div>

    <section id="methodology">
        <h2>Methodology</h2>
        <p>Methodology content goes here...</p>
        <a href="#main-nav">Back to Contents</a>
    </section>

    <div style="page-break-after: always;"></div>

    <section id="results">
        <h2>Results</h2>
        <p>Results content goes here...</p>
        <a href="#main-nav">Back to Contents</a>
    </section>

    <div style="page-break-after: always;"></div>

    <section id="conclusion">
        <h2>Conclusion</h2>
        <p>Conclusion content goes here...</p>
        <a href="#main-nav">Back to Contents</a>
    </section>
</body>
</html>

CSS ID Selectors 

<style>
    #banner {
        background: linear-gradient(to right, #336699, #66aacc);
        color: white;
        padding: 30pt;
        text-align: center;
        font-size: 24pt;
        font-weight: bold;
    }

    #sidebar {
        float: left;
        width: 200pt;
        padding: 15pt;
        background-color: #f5f5f5;
        border-right: 1pt solid #ddd;
    }

    #main-content {
        margin-left: 230pt;
        padding: 15pt;
    }

    #cta-button {
        display: inline-block;
        padding: 12pt 24pt;
        background-color: #ff6347;
        color: white;
        text-decoration: none;
        border-radius: 5pt;
        font-weight: bold;
    }
</style>

<div id="banner">Welcome to Our Service</div>

<div id="sidebar">
    <h3>Quick Links</h3>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

<div id="main-content">
    <h1>Main Content Area</h1>
    <p>Your content here...</p>
    <a id="cta-button" href="#signup">Sign Up Now</a>
</div>

Table of Contents with IDs 

<div id="toc" style="border: 2pt solid #336699; padding: 20pt; margin-bottom: 30pt;">
    <h2>Table of Contents</h2>
    <ol>
        <li><a href="#chapter1">Getting Started</a></li>
        <li><a href="#chapter2">Basic Concepts</a></li>
        <li><a href="#chapter3">Advanced Features</a></li>
        <li><a href="#chapter4">Best Practices</a></li>
        <li><a href="#chapter5">Troubleshooting</a></li>
    </ol>
</div>

<h1 id="chapter1" title="Chapter 1: Getting Started">Chapter 1: Getting Started</h1>
<p>Content for chapter 1...</p>

<div style="page-break-after: always;"></div>

<h1 id="chapter2" title="Chapter 2: Basic Concepts">Chapter 2: Basic Concepts</h1>
<p>Content for chapter 2...</p>

<div style="page-break-after: always;"></div>

<h1 id="chapter3" title="Chapter 3: Advanced Features">Chapter 3: Advanced Features</h1>
<p>Content for chapter 3...</p>

Data Binding with IDs 

<!-- Model: { sections: [{ id: "intro", title: "Introduction" }, ...] } -->

<nav>
    <template data-bind="">
        <a href="#"></a><br/>
    </template>
</nav>

<template data-bind="">
    <section id="">
        <h2></h2>
        <p><h1 id="http-equiv--the-http-header-equivalent-attribute">@http-equiv : The HTTP Header Equivalent Attribute</h1>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute provides an HTTP header equivalent for HTML <code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code> elements. In web contexts, it instructs browsers to behave as if a specific HTTP header was received. In PDF generation, it is primarily informational and maintains HTML compatibility.</p>

<h2 id="usage">Usage</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute is used with <code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code> elements to:</p>
<ul>
  <li>Declare document character encoding (though <code class="language-plaintext highlighter-rouge">charset</code> is preferred)</li>
  <li>Specify content type information</li>
  <li>Provide HTTP-header-like directives</li>
  <li>Maintain web-to-PDF conversion compatibility</li>
  <li>Document intended HTTP behavior</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="supported-elements">Supported Elements</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> attribute is supported by the following element:</p>

<table>
  <thead>
    <tr>
      <th>Element</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">&lt;meta&gt;</code></td>
      <td>Metadata element for document properties</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="attribute-values">Attribute Values</h2>

<h3 id="syntax">Syntax</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"directive"</span> <span class="na">content=</span><span class="s">"value"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="common-values">Common Values</h3>

<table>
  <thead>
    <tr>
      <th>Value</th>
      <th>Content</th>
      <th>Description</th>
      <th>PDF Behavior</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">Content-Type</code></td>
      <td><code class="language-plaintext highlighter-rouge">text/html; charset=UTF-8</code></td>
      <td>Declares document MIME type and encoding</td>
      <td>Informational only</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">X-UA-Compatible</code></td>
      <td><code class="language-plaintext highlighter-rouge">IE=edge</code></td>
      <td>Browser compatibility mode</td>
      <td>Ignored in PDF</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">refresh</code></td>
      <td><code class="language-plaintext highlighter-rouge">30; url=...</code></td>
      <td>Page refresh/redirect</td>
      <td>Not applicable to PDF</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">default-style</code></td>
      <td><code class="language-plaintext highlighter-rouge">stylesheet-name</code></td>
      <td>Preferred stylesheet</td>
      <td>Not commonly used</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">Content-Language</code></td>
      <td><code class="language-plaintext highlighter-rouge">en-US</code></td>
      <td>Document language</td>
      <td>Informational</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="binding-values">Binding Values</h2>

<p>The <code class="language-plaintext highlighter-rouge">http-equiv</code> and <code class="language-plaintext highlighter-rouge">content</code> attributes support data binding:</p>

<h3 id="static-declaration">Static Declaration</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="dynamic-value">Dynamic Value</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { charset: "UTF-8", language: "en-US" } --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">""</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="notes">Notes</h2>

<h3 id="web-behavior-vs-pdf-behavior">Web Behavior vs PDF Behavior</h3>

<p><strong>In Web Browsers:</strong></p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">http-equiv</code> directives are processed as if they were HTTP headers</li>
  <li>Affects browser rendering, caching, and behavior</li>
  <li>Can trigger specific browser modes or actions</li>
</ul>

<p><strong>In Scryber PDF Generation:</strong></p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">http-equiv</code> attributes are <strong>informational only</strong></li>
  <li>No HTTP headers are generated (PDFs are not served via HTTP)</li>
  <li>Maintains HTML document structure for compatibility</li>
  <li>Character encoding is handled automatically</li>
</ul>

<h3 id="character-encoding">Character Encoding</h3>

<p>While <code class="language-plaintext highlighter-rouge">http-equiv="Content-Type"</code> can specify character encoding, the standalone <code class="language-plaintext highlighter-rouge">charset</code> attribute is preferred:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Old style (still valid) --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

<span class="c">&lt;!-- Modern style (recommended) --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
</code></pre></div></div>

<h3 id="limited-applicability">Limited Applicability</h3>

<p>Most <code class="language-plaintext highlighter-rouge">http-equiv</code> directives are <strong>not applicable to PDF generation</strong>:</p>
<ul>
  <li><code class="language-plaintext highlighter-rouge">refresh</code>: PDFs are static documents</li>
  <li><code class="language-plaintext highlighter-rouge">X-UA-Compatible</code>: No browser rendering involved</li>
  <li>Cache control directives: PDFs are files, not served resources</li>
</ul>

<h3 id="use-cases-in-pdf">Use Cases in PDF</h3>

<ol>
  <li><strong>Documentation</strong>: Preserve original HTML meta information</li>
  <li><strong>Compatibility</strong>: Maintain structure when converting web pages</li>
  <li><strong>Standards Compliance</strong>: Follow HTML specifications</li>
  <li><strong>Metadata</strong>: Provide additional document context</li>
</ol>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-character-encoding-declaration">Example 1: Character Encoding Declaration</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Document with Encoding<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Traditional encoding declaration --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Modern equivalent (preferred) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-2-content-type-with-language">Example 2: Content Type with Language</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;title&gt;</span>English Language Document<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-3-multiple-meta-directives">Example 3: Multiple Meta Directives</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Complete Metadata Example<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- HTTP equivalent directives --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"John Doe"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Sample document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-4-legacy-web-page-conversion">Example 4: Legacy Web Page Conversion</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Original web page headers --&gt;</span>
<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Legacy Web Page<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=ISO-8859-1"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=EmulateIE7"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"imagetoolbar"</span> <span class="na">content=</span><span class="s">"no"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- When converted to PDF, these are preserved but not processed --&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-5-multi-language-document">Example 5: Multi-Language Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bilingual Document<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US, es-MX"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"English and Spanish content"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-6-data-bound-encoding">Example 6: Data-Bound Encoding</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { encoding: "UTF-8", contentType: "text/html" } --&gt;</span>

<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Dynamic Metadata<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span>
          <span class="na">content=</span><span class="s">"; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-7-complete-document-headers">Example 7: Complete Document Headers</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Professional Report<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- HTTP equivalents (informational in PDF) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Corporate Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Annual corporate report"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"report, finance, annual"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Open Graph metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Annual Report 2024"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-8-browser-compatibility-headers-preserved">Example 8: Browser Compatibility Headers (Preserved)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Cross-Browser Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- These are preserved when converting HTML to PDF --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"cleartype"</span> <span class="na">content=</span><span class="s">"on"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-9-content-security-policy-informational">Example 9: Content Security Policy (Informational)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Secure Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- CSP directive (not enforced in PDF, but preserved) --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Security-Policy"</span>
          <span class="na">content=</span><span class="s">"default-src 'self'; script-src 'none';"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-10-conditional-encoding">Example 10: Conditional Encoding</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { useUnicode: true } --&gt;</span>

<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Conditional Encoding Document<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span>
          <span class="na">content=</span><span class="s">"text/html; charset="</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-11-international-character-set">Example 11: International Character Set</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>国际文档<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- International Document --&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"zh-CN"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Chinese language document"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-12-technical-documentation">Example 12: Technical Documentation</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>API Documentation<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Development Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete API reference documentation"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-13-archive-document">Example 13: Archive Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Historical Archive Document<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Preserve original encoding declaration --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-GB"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Document archive metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"archive-date"</span> <span class="na">content=</span><span class="s">"2024-01-15"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"original-url"</span> <span class="na">content=</span><span class="s">"https://example.com/original"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<h3 id="example-14-form-document">Example 14: Form Document</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Application Form<span class="nt">&lt;/title&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"HR Department"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Employee application form"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"applicationForm"</span><span class="nt">&gt;</span>
        <span class="c">&lt;!-- Form content --&gt;</span>
    <span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-15-web-to-pdf-with-all-meta-tags">Example 15: Web-to-PDF with All Meta Tags</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Complete Web Page - Converted to PDF<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Character encoding --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=UTF-8"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Browser compatibility --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Language --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Language"</span> <span class="na">content=</span><span class="s">"en-US"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Standard metadata --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Web Development Team"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Complete web page example"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"web, HTML, PDF"</span> <span class="nt">/&gt;</span>

    <span class="c">&lt;!-- Open Graph --&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"Complete Web Page"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"website"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Example of complete web page metadata"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/head&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/htmltags/meta.html">meta element</a> - The meta HTML element</li>
  <li><a href="/reference/htmlattributes/content.html">content attribute</a> - Meta content value</li>
  <li><a href="/reference/htmlattributes/charset.html">charset attribute</a> - Character encoding</li>
  <li><a href="/reference/htmlattributes/name.html">name attribute</a> - Standard metadata name</li>
  <li><a href="/reference/htmlattributes/property.html">property attribute</a> - Open Graph properties</li>
  <li><a href="/reference/document/properties.html">Document Properties</a> - PDF document properties</li>
  <li><a href="/reference/encoding/">Character Encoding</a> - Character encoding reference</li>
</ul>

<hr />
</p>
    </section>
</template>

Unique IDs in Repeated Content 

<!-- Model: { products: [{id: 1, name: "Widget"}, {id: 2, name: "Gadget"}] } -->

<template data-bind="">
    <div id="product-" style="border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;">
        <h3 id="product-title-"></h3>
        <p id="product-desc-"></p>
        <a href="#product-details-">View Details</a>
    </div>
</template>

Anchor Navigation with Page Breaks 

<!DOCTYPE html>
<html>
<body>
    <!-- Quick reference guide on page 1 -->
    <div id="quick-ref" style="background-color: #f0f0f0; padding: 15pt;">
        <h2>Quick Reference</h2>
        <ul>
            <li><a href="#installation">Installation Guide</a> (Page 2)</li>
            <li><a href="#configuration">Configuration</a> (Page 3)</li>
            <li><a href="#api-reference">API Reference</a> (Page 4)</li>
        </ul>
    </div>

    <div style="page-break-after: always;"></div>

    <!-- Page 2 -->
    <div id="installation">
        <h1>Installation Guide</h1>
        <p>Step-by-step installation instructions...</p>
        <a href="#quick-ref">Return to Quick Reference</a>
    </div>

    <div style="page-break-after: always;"></div>

    <!-- Page 3 -->
    <div id="configuration">
        <h1>Configuration</h1>
        <p>Configuration details...</p>
        <a href="#quick-ref">Return to Quick Reference</a>
    </div>

    <div style="page-break-after: always;"></div>

    <!-- Page 4 -->
    <div id="api-reference">
        <h1>API Reference</h1>
        <p>API documentation...</p>
        <a href="#quick-ref">Return to Quick Reference</a>
    </div>
</body>
</html>

Descriptive ID Naming 

<!-- Well-named IDs that describe content -->
<header id="site-header">
    <div id="logo-container">
        <img id="company-logo" src="logo.png" />
    </div>
    <nav id="primary-navigation">
        <a href="#home">Home</a>
        <a href="#about-us">About</a>
        <a href="#contact-info">Contact</a>
    </nav>
</header>

<main id="main-content-area">
    <article id="featured-article">
        <h1 id="article-headline">Breaking News</h1>
        <div id="article-body">
            <p>Article content...</p>
        </div>
    </article>
</main>

<footer id="site-footer">
    <div id="copyright-notice">© 2025</div>
</footer>

Complex Document Structure 

<div id="report-wrapper">
    <section id="executive-summary">
        <h1>Executive Summary</h1>
        <div id="summary-highlights">
            <h2>Key Highlights</h2>
            <ul id="highlights-list">
                <li id="highlight-1">Revenue increased 25%</li>
                <li id="highlight-2">Customer base grew 40%</li>
                <li id="highlight-3">New markets opened</li>
            </ul>
        </div>
    </section>

    <section id="financial-data">
        <h1>Financial Data</h1>
        <table id="quarterly-results">
            <thead id="results-header">
                <tr id="header-row">
                    <th id="quarter-col">Quarter</th>
                    <th id="revenue-col">Revenue</th>
                </tr>
            </thead>
            <tbody id="results-body">
                <tr id="q1-data">
                    <td>Q1</td>
                    <td>$1.2M</td>
                </tr>
                <tr id="q2-data">
                    <td>Q2</td>
                    <td>$1.5M</td>
                </tr>
            </tbody>
        </table>
    </section>
</div>

Conditional ID Assignment 

<!-- Model: { user: { role: "admin", userId: 123 } } -->

<div id="-dashboard-">
    <h1>Dashboard for </h1>
    <p>Welcome, user #</p>
</div>

<!-- Results in: <div id="admin-dashboard-123"> -->

<footer id="document-footer" style="position: fixed; bottom: 0; width: 100%;
                                     border-top: 2pt solid #336699; padding: 10pt;">
    <div id="footer-nav">
        <a href="#top" id="back-to-top">Back to Top</a>
        <a href="!PrevPage" id="prev-page-link">Previous Page</a>
        <a href="!NextPage" id="next-page-link">Next Page</a>
        <a href="#index" id="go-to-index">Index</a>
    </div>
</footer>

Multi-level Document Structure 

<article id="main-article">
    <header id="article-header">
        <h1 id="article-title">Complete Guide to PDF Generation</h1>
    </header>

    <nav id="article-toc">
        <h2>Contents</h2>
        <ul>
            <li><a href="#section-intro">Introduction</a>
                <ul>
                    <li><a href="#subsection-overview">Overview</a></li>
                    <li><a href="#subsection-benefits">Benefits</a></li>
                </ul>
            </li>
            <li><a href="#section-implementation">Implementation</a></li>
        </ul>
    </nav>

    <section id="section-intro">
        <h2>Introduction</h2>

        <div id="subsection-overview">
            <h3>Overview</h3>
            <p>Overview content...</p>
        </div>

        <div id="subsection-benefits">
            <h3>Benefits</h3>
            <p>Benefits content...</p>
        </div>
    </section>

    <section id="section-implementation">
        <h2>Implementation</h2>
        <p>Implementation details...</p>
    </section>
</article>

IDs with Bookmarks 

<!-- These IDs create PDF bookmarks when title attribute is present -->
<h1 id="ch1" title="Chapter 1: Getting Started">
    Chapter 1: Getting Started
</h1>

<h2 id="ch1-sec1" title="1.1 Installation">
    1.1 Installation
</h2>

<h2 id="ch1-sec2" title="1.2 Configuration">
    1.2 Configuration
</h2>

<h1 id="ch2" title="Chapter 2: Advanced Topics">
    Chapter 2: Advanced Topics
</h1>

<div id="page-layout" style="display: flex;">
    <aside id="left-sidebar" style="width: 200pt; padding: 15pt;">
        <nav id="sidebar-nav">
            <h3 id="nav-title">Navigation</h3>
            <ul id="nav-list">
                <li><a href="#home-section">Home</a></li>
                <li><a href="#about-section">About</a></li>
                <li><a href="#services-section">Services</a></li>
                <li><a href="#contact-section">Contact</a></li>
            </ul>
        </nav>
    </aside>

    <main id="main-area" style="flex: 1; padding: 15pt;">
        <div id="home-section">
            <h1>Home</h1>
            <p>Welcome to our site...</p>
        </div>

        <div id="about-section">
            <h1>About</h1>
            <p>About us...</p>
        </div>

        <div id="services-section">
            <h1>Services</h1>
            <p>Our services...</p>
        </div>

        <div id="contact-section">
            <h1>Contact</h1>
            <p>Contact information...</p>
        </div>
    </main>
</div>

See Also

  • class - CSS class attribute for styling multiple elements
  • title - Title attribute for bookmarks and tooltips
  • a - Anchor element for creating links to IDs
  • href - Hyperlink reference attribute
  • CSS Styles - Complete CSS styling reference
  • Data Binding - Data binding and dynamic expressions
  • PDF Bookmarks - Document outline and bookmarks