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

@lang : The Language Attribute

The lang attribute specifies the language of an element’s content using BCP 47 language tags. It enables proper text rendering, hyphenation, and accessibility in PDF documents, particularly important for multilingual content and internationalization. The attribute can be applied to any HTML element to define language scope.

Usage

The lang attribute defines content language:

  • Specifies the natural language of element content
  • Uses BCP 47 language tags (e.g., en, fr, es, de, ja, zh)
  • Can include regional variants (e.g., en-US, en-GB, fr-CA)
  • Applied to <html> for document-wide language
  • Applied to specific elements for mixed-language content
  • Supports data binding for dynamic language selection
<!-- Document-wide language -->
<html lang="en">
    <head>
        <title>Document in English</title>
    </head>
    <body>
        <p>This content is in English.</p>
    </body>
</html>

<!-- Regional variant -->
<html lang="en-US">
    <body>
        <p>American English content with US spelling: color, center.</p>
    </body>
</html>

<!-- Mixed language content -->
<p lang="en">
    The French word for "hello" is <span lang="fr">bonjour</span>.
</p>

<!-- Dynamic language -->
<html lang="">
    <body></body>
</html>

Supported Elements

The lang attribute can be used on any HTML element, including:

Document Root

  • <html> - Document-wide language declaration (most common)

Structural Elements

  • <body>, <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>

Text Elements

  • <p>, <h1>-<h6>, <span>, <div>, <blockquote>, <q>

Inline Elements

  • <em>, <strong>, <cite>, <code>, <abbr>, <time>

Lists and Tables

  • <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>

Binding Values

The lang attribute supports data binding for dynamic language selection:

<!-- Dynamic document language -->
<html lang="">
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>

<!-- Dynamic section language -->
<section lang="">
    <h2></h2>
    <p></p>
</section>

<!-- Conditional language selection -->
<html lang="">
    <body></body>
</html>

<!-- Multilingual content with binding -->
<template data-bind="">
    <div lang="">
        <h3></h3>
        <p><h1 id="id--the-id-attribute">@id : The ID Attribute</h1>

<p>The <code class="language-plaintext highlighter-rouge">id</code> 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.</p>

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

<p>The <code class="language-plaintext highlighter-rouge">id</code> attribute assigns a unique identifier to an element that:</p>
<ul>
  <li>Must be unique within the entire document</li>
  <li>Creates anchor points for internal navigation using <code class="language-plaintext highlighter-rouge">&lt;a href="#id"&gt;</code></li>
  <li>Allows CSS targeting with ID selectors (<code class="language-plaintext highlighter-rouge">#id</code>)</li>
  <li>Establishes references for PDF outline entries and bookmarks</li>
  <li>Enables element lookup and manipulation in code</li>
  <li>Supports data binding and dynamic content references</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Basic ID assignment --&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"main-title"</span><span class="nt">&gt;</span>Document Title<span class="nt">&lt;/h1&gt;</span>

<span class="c">&lt;!-- Link to element with ID --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#main-title"</span><span class="nt">&gt;</span>Jump to Title<span class="nt">&lt;/a&gt;</span>

<span class="c">&lt;!-- CSS targeting by ID --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"sidebar"</span> <span class="na">style=</span><span class="s">"width: 200pt;"</span><span class="nt">&gt;&lt;/div&gt;</span>
</code></pre></div></div>

<hr />

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

<p>The <code class="language-plaintext highlighter-rouge">id</code> attribute is supported on <strong>all HTML elements</strong> in Scryber, including:</p>

<h3 id="block-elements">Block Elements</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">&lt;div&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;section&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;article&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;aside&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;main&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;nav&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;header&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;footer&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;address&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;h1&gt;</code> through <code class="language-plaintext highlighter-rouge">&lt;h6&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;p&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;blockquote&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;pre&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;ul&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;ol&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;li&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;dl&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;dt&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;dd&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;table&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;thead&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;tbody&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;tfoot&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;tr&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;td&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;th&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;fieldset&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;legend&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;figure&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;figcaption&gt;</code></li>
</ul>

<h3 id="inline-elements">Inline Elements</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">&lt;a&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;span&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;b&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;i&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;u&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;code&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;kbd&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;samp&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;var&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;mark&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;small&gt;</code></li>
  <li><code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;q&gt;</code></li>
</ul>

<h3 id="media-and-embedded-elements">Media and Embedded Elements</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">&lt;img&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;iframe&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;canvas&gt;</code></li>
</ul>

<h3 id="form-elements">Form Elements</h3>
<ul>
  <li><code class="language-plaintext highlighter-rouge">&lt;form&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;input&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;textarea&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;select&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code></li>
</ul>

<hr />

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

<p>The <code class="language-plaintext highlighter-rouge">id</code> attribute supports data binding with dynamic values:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Dynamic ID from data model --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">""</span><span class="nt">&gt;</span>
    Section content
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Computed ID from expression --&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"section-"</span><span class="nt">&gt;</span>
    Section 
<span class="nt">&lt;/h2&gt;</span>

<span class="c">&lt;!-- Conditional ID generation --&gt;</span>
<span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">"-article-"</span><span class="nt">&gt;</span>
    Article content
<span class="nt">&lt;/article&gt;</span>

<span class="c">&lt;!-- In a loop with unique IDs --&gt;</span>
<span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chapter-"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;&lt;h1</span> <span class="na">id=</span><span class="s">"http-equiv--the-http-header-equivalent-attribute"</span><span class="nt">&gt;</span>@http-equiv : The HTTP Header Equivalent Attribute<span class="nt">&lt;/h1&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> attribute provides an HTTP header equivalent for HTML <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>meta<span class="ni">&amp;gt;</span><span class="nt">&lt;/code&gt;</span> 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.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"usage"</span><span class="nt">&gt;</span>Usage<span class="nt">&lt;/h2&gt;</span>

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

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"supported-elements"</span><span class="nt">&gt;</span>Supported Elements<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> attribute is supported by the following element:<span class="nt">&lt;/p&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"attribute-values"</span><span class="nt">&gt;</span>Attribute Values<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"syntax"</span><span class="nt">&gt;</span>Syntax<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"common-values"</span><span class="nt">&gt;</span>Common Values<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"binding-values"</span><span class="nt">&gt;</span>Binding Values<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> and <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>content<span class="nt">&lt;/code&gt;</span> attributes support data binding:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"static-declaration"</span><span class="nt">&gt;</span>Static Declaration<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"dynamic-value"</span><span class="nt">&gt;</span>Dynamic Value<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"notes"</span><span class="nt">&gt;</span>Notes<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"web-behavior-vs-pdf-behavior"</span><span class="nt">&gt;</span>Web Behavior vs PDF Behavior<span class="nt">&lt;/h3&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"character-encoding"</span><span class="nt">&gt;</span>Character Encoding<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>While <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv="Content-Type"<span class="nt">&lt;/code&gt;</span> can specify character encoding, the standalone <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>charset<span class="nt">&lt;/code&gt;</span> attribute is preferred:<span class="nt">&lt;/p&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"limited-applicability"</span><span class="nt">&gt;</span>Limited Applicability<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"use-cases-in-pdf"</span><span class="nt">&gt;</span>Use Cases in PDF<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Documentation<span class="nt">&lt;/strong&gt;</span>: Preserve original HTML meta information<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Compatibility<span class="nt">&lt;/strong&gt;</span>: Maintain structure when converting web pages<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Standards Compliance<span class="nt">&lt;/strong&gt;</span>: Follow HTML specifications<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Metadata<span class="nt">&lt;/strong&gt;</span>: Provide additional document context<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"examples"</span><span class="nt">&gt;</span>Examples<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-1-character-encoding-declaration"</span><span class="nt">&gt;</span>Example 1: Character Encoding Declaration<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-2-content-type-with-language"</span><span class="nt">&gt;</span>Example 2: Content Type with Language<span class="nt">&lt;/h3&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-3-multiple-meta-directives"</span><span class="nt">&gt;</span>Example 3: Multiple Meta Directives<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-4-legacy-web-page-conversion"</span><span class="nt">&gt;</span>Example 4: Legacy Web Page Conversion<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-5-multi-language-document"</span><span class="nt">&gt;</span>Example 5: Multi-Language Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-6-data-bound-encoding"</span><span class="nt">&gt;</span>Example 6: Data-Bound Encoding<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-7-complete-document-headers"</span><span class="nt">&gt;</span>Example 7: Complete Document Headers<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-8-browser-compatibility-headers-preserved"</span><span class="nt">&gt;</span>Example 8: Browser Compatibility Headers (Preserved)<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-9-content-security-policy-informational"</span><span class="nt">&gt;</span>Example 9: Content Security Policy (Informational)<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-10-conditional-encoding"</span><span class="nt">&gt;</span>Example 10: Conditional Encoding<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-11-international-character-set"</span><span class="nt">&gt;</span>Example 11: International Character Set<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-12-technical-documentation"</span><span class="nt">&gt;</span>Example 12: Technical Documentation<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-13-archive-document"</span><span class="nt">&gt;</span>Example 13: Archive Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-14-form-document"</span><span class="nt">&gt;</span>Example 14: Form Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-15-web-to-pdf-with-all-meta-tags"</span><span class="nt">&gt;</span>Example 15: Web-to-PDF with All Meta Tags<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

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

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"see-also"</span><span class="nt">&gt;</span>See Also<span class="nt">&lt;/h2&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/template&gt;</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">"sectionId"</span><span class="p">:</span><span class="w"> </span><span class="s2">"introduction"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"index"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">,</span><span class="w">
  </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"news"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"articleId"</span><span class="p">:</span><span class="w"> </span><span class="s2">"12345"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"chapters"</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">"number"</span><span class="p">:</span><span class="w"> </span><span class="mi">1</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">"Getting Started"</span><span class="w"> </span><span class="p">},</span><span class="w">
    </span><span class="p">{</span><span class="w"> </span><span class="nl">"number"</span><span class="p">:</span><span class="w"> </span><span class="mi">2</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">"Advanced Topics"</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="uniqueness-requirement">Uniqueness Requirement</h3>

<p>The <code class="language-plaintext highlighter-rouge">id</code> attribute value <strong>must be unique</strong> within the entire document. Duplicate IDs can cause:</p>
<ul>
  <li>Unpredictable behavior with internal links</li>
  <li>CSS selector conflicts</li>
  <li>Broken PDF bookmarks and navigation</li>
  <li>Issues with document structure</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- INCORRECT: Duplicate IDs --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">&gt;</span>First section<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">&gt;</span>Second section<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- CORRECT: Unique IDs --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"content-section1"</span><span class="nt">&gt;</span>First section<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"content-section2"</span><span class="nt">&gt;</span>Second section<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="id-naming-rules">ID Naming Rules</h3>

<p>Valid ID values should follow these conventions:</p>
<ul>
  <li>Start with a letter (a-z, A-Z)</li>
  <li>Can contain letters, digits, hyphens (-), underscores (_), and periods (.)</li>
  <li>Are case-sensitive (<code class="language-plaintext highlighter-rouge">myId</code> ≠ <code class="language-plaintext highlighter-rouge">MyId</code>)</li>
  <li>Should not contain spaces or special characters</li>
  <li>Should be descriptive and meaningful</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Valid IDs --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"main-content"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"section_1"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"nav.primary"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"userId123"</span><span class="nt">&gt;&lt;/div&gt;</span>

<span class="c">&lt;!-- Avoid these --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"123section"</span><span class="nt">&gt;&lt;/div&gt;</span>  <span class="c">&lt;!-- Starts with number --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"my content"</span><span class="nt">&gt;&lt;/div&gt;</span>  <span class="c">&lt;!-- Contains space --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"section@home"</span><span class="nt">&gt;&lt;/div&gt;</span>  <span class="c">&lt;!-- Special character --&gt;</span>
</code></pre></div></div>

<h3 id="internal-navigation">Internal Navigation</h3>

<p>Elements with <code class="language-plaintext highlighter-rouge">id</code> attributes serve as anchor points for internal links:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Define anchor points --&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"overview"</span><span class="nt">&gt;</span>Overview<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"features"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"pricing"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/h2&gt;</span>

<span class="c">&lt;!-- Link to anchor points --&gt;</span>
<span class="nt">&lt;nav&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#overview"</span><span class="nt">&gt;</span>Overview<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#features"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pricing"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div></div>

<p>When a user clicks a link with <code class="language-plaintext highlighter-rouge">href="#overview"</code>, the PDF viewer will navigate to the element with <code class="language-plaintext highlighter-rouge">id="overview"</code>.</p>

<h3 id="css-targeting">CSS Targeting</h3>

<p>Use ID selectors in CSS to target specific elements:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nf">#header</span> <span class="p">{</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#336699</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">20pt</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nf">#footer</span> <span class="p">{</span>
        <span class="nl">border-top</span><span class="p">:</span> <span class="m">2pt</span> <span class="nb">solid</span> <span class="m">#ccc</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Document Header<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"footer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>© 2025 Company Name<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="pdf-bookmarks-and-outlines">PDF Bookmarks and Outlines</h3>

<p>Elements with <code class="language-plaintext highlighter-rouge">id</code> attributes can appear in the PDF document outline. Use the <code class="language-plaintext highlighter-rouge">title</code> attribute to set the bookmark text:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"chapter1"</span> <span class="na">title=</span><span class="s">"Chapter 1: Introduction"</span><span class="nt">&gt;</span>
    Chapter 1: Introduction
<span class="nt">&lt;/h1&gt;</span>
</code></pre></div></div>

<p>This creates a navigable bookmark in the PDF outline panel that links to the element.</p>

<h3 id="id-vs-class">ID vs Class</h3>

<ul>
  <li><strong>ID</strong>: Use for unique elements that appear once per document</li>
  <li><strong>Class</strong>: Use for reusable styles applied to multiple elements</li>
</ul>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- ID for unique elements --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">id=</span><span class="s">"site-header"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;main</span> <span class="na">id=</span><span class="s">"main-content"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/main&gt;</span>
<span class="nt">&lt;footer</span> <span class="na">id=</span><span class="s">"site-footer"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/footer&gt;</span>

<span class="c">&lt;!-- Class for repeated styling --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>Card 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>Card 2<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>Card 3<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<hr />

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

<h3 id="basic-id-assignment">Basic ID Assignment</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"page-title"</span><span class="nt">&gt;</span>Welcome<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"intro"</span><span class="nt">&gt;</span>This is the introduction paragraph.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="internal-document-navigation">Internal Document Navigation</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Document Navigation<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="c">&lt;!-- Navigation menu --&gt;</span>
    <span class="nt">&lt;nav</span> <span class="na">id=</span><span class="s">"main-nav"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Contents<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#intro"</span><span class="nt">&gt;</span>Introduction<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#methodology"</span><span class="nt">&gt;</span>Methodology<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#results"</span><span class="nt">&gt;</span>Results<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#conclusion"</span><span class="nt">&gt;</span>Conclusion<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="c">&lt;!-- Content sections --&gt;</span>
    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"intro"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Introduction<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Introduction content goes here...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#main-nav"</span><span class="nt">&gt;</span>Back to Contents<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/section&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"methodology"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Methodology<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Methodology content goes here...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#main-nav"</span><span class="nt">&gt;</span>Back to Contents<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/section&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"results"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Results<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Results content goes here...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#main-nav"</span><span class="nt">&gt;</span>Back to Contents<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/section&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"conclusion"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Conclusion<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Conclusion content goes here...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#main-nav"</span><span class="nt">&gt;</span>Back to Contents<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<h3 id="css-id-selectors">CSS ID Selectors</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;style&gt;</span>
    <span class="nf">#banner</span> <span class="p">{</span>
        <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="nb">right</span><span class="p">,</span> <span class="m">#336699</span><span class="p">,</span> <span class="m">#66aacc</span><span class="p">);</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">30pt</span><span class="p">;</span>
        <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">24pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nf">#sidebar</span> <span class="p">{</span>
        <span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
        <span class="nl">width</span><span class="p">:</span> <span class="m">200pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>
        <span class="nl">border-right</span><span class="p">:</span> <span class="m">1pt</span> <span class="nb">solid</span> <span class="m">#ddd</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nf">#main-content</span> <span class="p">{</span>
        <span class="nl">margin-left</span><span class="p">:</span> <span class="m">230pt</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">15pt</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nf">#cta-button</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
        <span class="nl">padding</span><span class="p">:</span> <span class="m">12pt</span> <span class="m">24pt</span><span class="p">;</span>
        <span class="nl">background-color</span><span class="p">:</span> <span class="m">#ff6347</span><span class="p">;</span>
        <span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
        <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
        <span class="nl">border-radius</span><span class="p">:</span> <span class="m">5pt</span><span class="p">;</span>
        <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"banner"</span><span class="nt">&gt;</span>Welcome to Our Service<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"sidebar"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3&gt;</span>Quick Links<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#about"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#services"</span><span class="nt">&gt;</span>Services<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#contact"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"main-content"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Main Content Area<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>Your content here...<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">id=</span><span class="s">"cta-button"</span> <span class="na">href=</span><span class="s">"#signup"</span><span class="nt">&gt;</span>Sign Up Now<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="table-of-contents-with-ids">Table of Contents with IDs</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"toc"</span> <span class="na">style=</span><span class="s">"border: 2pt solid #336699; padding: 20pt; margin-bottom: 30pt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h2&gt;</span>Table of Contents<span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;ol&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#chapter1"</span><span class="nt">&gt;</span>Getting Started<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#chapter2"</span><span class="nt">&gt;</span>Basic Concepts<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#chapter3"</span><span class="nt">&gt;</span>Advanced Features<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#chapter4"</span><span class="nt">&gt;</span>Best Practices<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#chapter5"</span><span class="nt">&gt;</span>Troubleshooting<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"chapter1"</span> <span class="na">title=</span><span class="s">"Chapter 1: Getting Started"</span><span class="nt">&gt;</span>Chapter 1: Getting Started<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>Content for chapter 1...<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"chapter2"</span> <span class="na">title=</span><span class="s">"Chapter 2: Basic Concepts"</span><span class="nt">&gt;</span>Chapter 2: Basic Concepts<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>Content for chapter 2...<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"chapter3"</span> <span class="na">title=</span><span class="s">"Chapter 3: Advanced Features"</span><span class="nt">&gt;</span>Chapter 3: Advanced Features<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p&gt;</span>Content for chapter 3...<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="data-binding-with-ids">Data Binding with IDs</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { sections: [{ id: "intro", title: "Introduction" }, ...] } --&gt;</span>

<span class="nt">&lt;nav&gt;</span>
    <span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;&lt;/a&gt;&lt;br/&gt;</span>
    <span class="nt">&lt;/template&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">""</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;&lt;h1</span> <span class="na">id=</span><span class="s">"http-equiv--the-http-header-equivalent-attribute"</span><span class="nt">&gt;</span>@http-equiv : The HTTP Header Equivalent Attribute<span class="nt">&lt;/h1&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> attribute provides an HTTP header equivalent for HTML <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span><span class="ni">&amp;lt;</span>meta<span class="ni">&amp;gt;</span><span class="nt">&lt;/code&gt;</span> 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.<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"usage"</span><span class="nt">&gt;</span>Usage<span class="nt">&lt;/h2&gt;</span>

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

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"supported-elements"</span><span class="nt">&gt;</span>Supported Elements<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> attribute is supported by the following element:<span class="nt">&lt;/p&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"attribute-values"</span><span class="nt">&gt;</span>Attribute Values<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"syntax"</span><span class="nt">&gt;</span>Syntax<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"common-values"</span><span class="nt">&gt;</span>Common Values<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"binding-values"</span><span class="nt">&gt;</span>Binding Values<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;p&gt;</span>The <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv<span class="nt">&lt;/code&gt;</span> and <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>content<span class="nt">&lt;/code&gt;</span> attributes support data binding:<span class="nt">&lt;/p&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"static-declaration"</span><span class="nt">&gt;</span>Static Declaration<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"dynamic-value"</span><span class="nt">&gt;</span>Dynamic Value<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"notes"</span><span class="nt">&gt;</span>Notes<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"web-behavior-vs-pdf-behavior"</span><span class="nt">&gt;</span>Web Behavior vs PDF Behavior<span class="nt">&lt;/h3&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"character-encoding"</span><span class="nt">&gt;</span>Character Encoding<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;p&gt;</span>While <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>http-equiv="Content-Type"<span class="nt">&lt;/code&gt;</span> can specify character encoding, the standalone <span class="nt">&lt;code</span> <span class="na">class=</span><span class="s">"language-plaintext highlighter-rouge"</span><span class="nt">&gt;</span>charset<span class="nt">&lt;/code&gt;</span> attribute is preferred:<span class="nt">&lt;/p&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"limited-applicability"</span><span class="nt">&gt;</span>Limited Applicability<span class="nt">&lt;/h3&gt;</span>

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"use-cases-in-pdf"</span><span class="nt">&gt;</span>Use Cases in PDF<span class="nt">&lt;/h3&gt;</span>

<span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Documentation<span class="nt">&lt;/strong&gt;</span>: Preserve original HTML meta information<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Compatibility<span class="nt">&lt;/strong&gt;</span>: Maintain structure when converting web pages<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Standards Compliance<span class="nt">&lt;/strong&gt;</span>: Follow HTML specifications<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;&lt;strong&gt;</span>Metadata<span class="nt">&lt;/strong&gt;</span>: Provide additional document context<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"examples"</span><span class="nt">&gt;</span>Examples<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-1-character-encoding-declaration"</span><span class="nt">&gt;</span>Example 1: Character Encoding Declaration<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-2-content-type-with-language"</span><span class="nt">&gt;</span>Example 2: Content Type with Language<span class="nt">&lt;/h3&gt;</span>

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-3-multiple-meta-directives"</span><span class="nt">&gt;</span>Example 3: Multiple Meta Directives<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-4-legacy-web-page-conversion"</span><span class="nt">&gt;</span>Example 4: Legacy Web Page Conversion<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-5-multi-language-document"</span><span class="nt">&gt;</span>Example 5: Multi-Language Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-6-data-bound-encoding"</span><span class="nt">&gt;</span>Example 6: Data-Bound Encoding<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-7-complete-document-headers"</span><span class="nt">&gt;</span>Example 7: Complete Document Headers<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-8-browser-compatibility-headers-preserved"</span><span class="nt">&gt;</span>Example 8: Browser Compatibility Headers (Preserved)<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-9-content-security-policy-informational"</span><span class="nt">&gt;</span>Example 9: Content Security Policy (Informational)<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-10-conditional-encoding"</span><span class="nt">&gt;</span>Example 10: Conditional Encoding<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-11-international-character-set"</span><span class="nt">&gt;</span>Example 11: International Character Set<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-12-technical-documentation"</span><span class="nt">&gt;</span>Example 12: Technical Documentation<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-13-archive-document"</span><span class="nt">&gt;</span>Example 13: Archive Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-14-form-document"</span><span class="nt">&gt;</span>Example 14: Form Document<span class="nt">&lt;/h3&gt;</span>

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

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

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

<span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"example-15-web-to-pdf-with-all-meta-tags"</span><span class="nt">&gt;</span>Example 15: Web-to-PDF with All Meta Tags<span class="nt">&lt;/h3&gt;</span>

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

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

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

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

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

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"see-also"</span><span class="nt">&gt;</span>See Also<span class="nt">&lt;/h2&gt;</span>

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

<span class="nt">&lt;hr</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/template&gt;</span>
</code></pre></div></div>

<h3 id="unique-ids-in-repeated-content">Unique IDs in Repeated Content</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { products: [{id: 1, name: "Widget"}, {id: 2, name: "Gadget"}] } --&gt;</span>

<span class="nt">&lt;template</span> <span class="na">data-bind=</span><span class="s">""</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"product-"</span> <span class="na">style=</span><span class="s">"border: 1pt solid #ccc; padding: 10pt; margin: 10pt 0;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"product-title-"</span><span class="nt">&gt;&lt;/h3&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"product-desc-"</span><span class="nt">&gt;&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#product-details-"</span><span class="nt">&gt;</span>View Details<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/template&gt;</span>
</code></pre></div></div>

<h3 id="anchor-navigation-with-page-breaks">Anchor Navigation with Page Breaks</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="c">&lt;!-- Quick reference guide on page 1 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"quick-ref"</span> <span class="na">style=</span><span class="s">"background-color: #f0f0f0; padding: 15pt;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Quick Reference<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#installation"</span><span class="nt">&gt;</span>Installation Guide<span class="nt">&lt;/a&gt;</span> (Page 2)<span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#configuration"</span><span class="nt">&gt;</span>Configuration<span class="nt">&lt;/a&gt;</span> (Page 3)<span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#api-reference"</span><span class="nt">&gt;</span>API Reference<span class="nt">&lt;/a&gt;</span> (Page 4)<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="c">&lt;!-- Page 2 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"installation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>Installation Guide<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;p&gt;</span>Step-by-step installation instructions...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#quick-ref"</span><span class="nt">&gt;</span>Return to Quick Reference<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="c">&lt;!-- Page 3 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"configuration"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>Configuration<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;p&gt;</span>Configuration details...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#quick-ref"</span><span class="nt">&gt;</span>Return to Quick Reference<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"page-break-after: always;"</span><span class="nt">&gt;&lt;/div&gt;</span>

    <span class="c">&lt;!-- Page 4 --&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"api-reference"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>API Reference<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;p&gt;</span>API documentation...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#quick-ref"</span><span class="nt">&gt;</span>Return to Quick Reference<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<h3 id="descriptive-id-naming">Descriptive ID Naming</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Well-named IDs that describe content --&gt;</span>
<span class="nt">&lt;header</span> <span class="na">id=</span><span class="s">"site-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"logo-container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">id=</span><span class="s">"company-logo"</span> <span class="na">src=</span><span class="s">"logo.png"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;nav</span> <span class="na">id=</span><span class="s">"primary-navigation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#home"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#about-us"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#contact-info"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<span class="nt">&lt;main</span> <span class="na">id=</span><span class="s">"main-content-area"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">"featured-article"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"article-headline"</span><span class="nt">&gt;</span>Breaking News<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"article-body"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;p&gt;</span>Article content...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;/main&gt;</span>

<span class="nt">&lt;footer</span> <span class="na">id=</span><span class="s">"site-footer"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"copyright-notice"</span><span class="nt">&gt;</span>© 2025<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</code></pre></div></div>

<h3 id="complex-document-structure">Complex Document Structure</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"report-wrapper"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"executive-summary"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>Executive Summary<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"summary-highlights"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h2&gt;</span>Key Highlights<span class="nt">&lt;/h2&gt;</span>
            <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"highlights-list"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;li</span> <span class="na">id=</span><span class="s">"highlight-1"</span><span class="nt">&gt;</span>Revenue increased 25%<span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;li</span> <span class="na">id=</span><span class="s">"highlight-2"</span><span class="nt">&gt;</span>Customer base grew 40%<span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;li</span> <span class="na">id=</span><span class="s">"highlight-3"</span><span class="nt">&gt;</span>New markets opened<span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;/ul&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/section&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"financial-data"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1&gt;</span>Financial Data<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;table</span> <span class="na">id=</span><span class="s">"quarterly-results"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;thead</span> <span class="na">id=</span><span class="s">"results-header"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;tr</span> <span class="na">id=</span><span class="s">"header-row"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"quarter-col"</span><span class="nt">&gt;</span>Quarter<span class="nt">&lt;/th&gt;</span>
                    <span class="nt">&lt;th</span> <span class="na">id=</span><span class="s">"revenue-col"</span><span class="nt">&gt;</span>Revenue<span class="nt">&lt;/th&gt;</span>
                <span class="nt">&lt;/tr&gt;</span>
            <span class="nt">&lt;/thead&gt;</span>
            <span class="nt">&lt;tbody</span> <span class="na">id=</span><span class="s">"results-body"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;tr</span> <span class="na">id=</span><span class="s">"q1-data"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;td&gt;</span>Q1<span class="nt">&lt;/td&gt;</span>
                    <span class="nt">&lt;td&gt;</span>$1.2M<span class="nt">&lt;/td&gt;</span>
                <span class="nt">&lt;/tr&gt;</span>
                <span class="nt">&lt;tr</span> <span class="na">id=</span><span class="s">"q2-data"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;td&gt;</span>Q2<span class="nt">&lt;/td&gt;</span>
                    <span class="nt">&lt;td&gt;</span>$1.5M<span class="nt">&lt;/td&gt;</span>
                <span class="nt">&lt;/tr&gt;</span>
            <span class="nt">&lt;/tbody&gt;</span>
        <span class="nt">&lt;/table&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="conditional-id-assignment">Conditional ID Assignment</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Model: { user: { role: "admin", userId: 123 } } --&gt;</span>

<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"-dashboard-"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Dashboard for <span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>Welcome, user #<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Results in: &lt;div id="admin-dashboard-123"&gt; --&gt;</span>
</code></pre></div></div>

<h3 id="footer-navigation-with-ids">Footer Navigation with IDs</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;footer</span> <span class="na">id=</span><span class="s">"document-footer"</span> <span class="na">style=</span><span class="s">"position: fixed; bottom: 0; width: 100%;
                                     border-top: 2pt solid #336699; padding: 10pt;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"footer-nav"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#top"</span> <span class="na">id=</span><span class="s">"back-to-top"</span><span class="nt">&gt;</span>Back to Top<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"!PrevPage"</span> <span class="na">id=</span><span class="s">"prev-page-link"</span><span class="nt">&gt;</span>Previous Page<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"!NextPage"</span> <span class="na">id=</span><span class="s">"next-page-link"</span><span class="nt">&gt;</span>Next Page<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#index"</span> <span class="na">id=</span><span class="s">"go-to-index"</span><span class="nt">&gt;</span>Index<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/footer&gt;</span>
</code></pre></div></div>

<h3 id="multi-level-document-structure">Multi-level Document Structure</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">"main-article"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;header</span> <span class="na">id=</span><span class="s">"article-header"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"article-title"</span><span class="nt">&gt;</span>Complete Guide to PDF Generation<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/header&gt;</span>

    <span class="nt">&lt;nav</span> <span class="na">id=</span><span class="s">"article-toc"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Contents<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;ul&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#section-intro"</span><span class="nt">&gt;</span>Introduction<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;ul&gt;</span>
                    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#subsection-overview"</span><span class="nt">&gt;</span>Overview<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
                    <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#subsection-benefits"</span><span class="nt">&gt;</span>Benefits<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
                <span class="nt">&lt;/ul&gt;</span>
            <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#section-implementation"</span><span class="nt">&gt;</span>Implementation<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"section-intro"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Introduction<span class="nt">&lt;/h2&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"subsection-overview"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h3&gt;</span>Overview<span class="nt">&lt;/h3&gt;</span>
            <span class="nt">&lt;p&gt;</span>Overview content...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"subsection-benefits"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h3&gt;</span>Benefits<span class="nt">&lt;/h3&gt;</span>
            <span class="nt">&lt;p&gt;</span>Benefits content...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/section&gt;</span>

    <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"section-implementation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Implementation<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Implementation details...<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/article&gt;</span>
</code></pre></div></div>

<h3 id="ids-with-bookmarks">IDs with Bookmarks</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- These IDs create PDF bookmarks when title attribute is present --&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"ch1"</span> <span class="na">title=</span><span class="s">"Chapter 1: Getting Started"</span><span class="nt">&gt;</span>
    Chapter 1: Getting Started
<span class="nt">&lt;/h1&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"ch1-sec1"</span> <span class="na">title=</span><span class="s">"1.1 Installation"</span><span class="nt">&gt;</span>
    1.1 Installation
<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"ch1-sec2"</span> <span class="na">title=</span><span class="s">"1.2 Configuration"</span><span class="nt">&gt;</span>
    1.2 Configuration
<span class="nt">&lt;/h2&gt;</span>

<span class="nt">&lt;h1</span> <span class="na">id=</span><span class="s">"ch2"</span> <span class="na">title=</span><span class="s">"Chapter 2: Advanced Topics"</span><span class="nt">&gt;</span>
    Chapter 2: Advanced Topics
<span class="nt">&lt;/h1&gt;</span>
</code></pre></div></div>

<h3 id="sidebar-navigation-with-ids">Sidebar Navigation with IDs</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"page-layout"</span> <span class="na">style=</span><span class="s">"display: flex;"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;aside</span> <span class="na">id=</span><span class="s">"left-sidebar"</span> <span class="na">style=</span><span class="s">"width: 200pt; padding: 15pt;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;nav</span> <span class="na">id=</span><span class="s">"sidebar-nav"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h3</span> <span class="na">id=</span><span class="s">"nav-title"</span><span class="nt">&gt;</span>Navigation<span class="nt">&lt;/h3&gt;</span>
            <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"nav-list"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#home-section"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
                <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#about-section"</span><span class="nt">&gt;</span>About<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
                <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#services-section"</span><span class="nt">&gt;</span>Services<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
                <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#contact-section"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
            <span class="nt">&lt;/ul&gt;</span>
        <span class="nt">&lt;/nav&gt;</span>
    <span class="nt">&lt;/aside&gt;</span>

    <span class="nt">&lt;main</span> <span class="na">id=</span><span class="s">"main-area"</span> <span class="na">style=</span><span class="s">"flex: 1; padding: 15pt;"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"home-section"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Home<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p&gt;</span>Welcome to our site...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"about-section"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>About<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p&gt;</span>About us...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"services-section"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Services<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p&gt;</span>Our services...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"contact-section"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Contact<span class="nt">&lt;/h1&gt;</span>
            <span class="nt">&lt;p&gt;</span>Contact information...<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<hr />

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

<ul>
  <li><a href="/reference/htmlattributes/class.html">class</a> - CSS class attribute for styling multiple elements</li>
  <li><a href="/reference/htmlattributes/title.html">title</a> - Title attribute for bookmarks and tooltips</li>
  <li><a href="/reference/htmltags/a.html">a</a> - Anchor element for creating links to IDs</li>
  <li><a href="/reference/htmlattributes/href.html">href</a> - Hyperlink reference attribute</li>
  <li><a href="/reference/styles/">CSS Styles</a> - Complete CSS styling reference</li>
  <li><a href="/reference/binding/">Data Binding</a> - Data binding and dynamic expressions</li>
  <li><a href="/reference/document/bookmarks.html">PDF Bookmarks</a> - Document outline and bookmarks</li>
</ul>

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

<!-- Language-specific quotes -->
<template data-bind="">
    <blockquote lang="">
        <p></p>
        <footer>— </footer>
    </blockquote>
</template>

Data Model Example:

{
  "userLanguage": "en-US",
  "title": "Document Title",
  "content": "Document content",
  "sectionLanguage": "fr",
  "heading": "Section Heading",
  "text": "Section text",
  "region": "US",
  "translations": [
    {
      "languageCode": "en",
      "title": "Welcome",
      "content": "Welcome to our service."
    },
    {
      "languageCode": "es",
      "title": "Bienvenido",
      "content": "Bienvenido a nuestro servicio."
    }
  ],
  "quotes": [
    {
      "language": "fr",
      "text": "La vie est belle.",
      "author": "French Proverb"
    }
  ]
}

Notes

BCP 47 Language Tags

The lang attribute uses BCP 47 (Best Current Practice 47) language tags:

<!-- Primary language codes (ISO 639-1) -->
<html lang="en">English</html>
<html lang="es">Spanish</html>
<html lang="fr">French</html>
<html lang="de">German</html>
<html lang="it">Italian</html>
<html lang="pt">Portuguese</html>
<html lang="ru">Russian</html>
<html lang="zh">Chinese</html>
<html lang="ja">Japanese</html>
<html lang="ko">Korean</html>
<html lang="ar">Arabic</html>

<!-- With regional subtags -->
<html lang="en-US">American English</html>
<html lang="en-GB">British English</html>
<html lang="fr-FR">French (France)</html>
<html lang="fr-CA">French (Canada)</html>
<html lang="es-ES">Spanish (Spain)</html>
<html lang="es-MX">Spanish (Mexico)</html>
<html lang="pt-BR">Portuguese (Brazil)</html>
<html lang="pt-PT">Portuguese (Portugal)</html>
<html lang="zh-CN">Chinese (Simplified)</html>
<html lang="zh-TW">Chinese (Traditional)</html>

Language vs Script

Language tags can include script subtags:

<!-- Chinese with script specification -->
<html lang="zh-Hans">Chinese (Simplified script)</html>
<html lang="zh-Hant">Chinese (Traditional script)</html>

<!-- Serbian in different scripts -->
<html lang="sr-Latn">Serbian (Latin script)</html>
<html lang="sr-Cyrl">Serbian (Cyrillic script)</html>

<!-- Uzbek in different scripts -->
<html lang="uz-Latn">Uzbek (Latin script)</html>
<html lang="uz-Cyrl">Uzbek (Cyrillic script)</html>

Document-Wide Language

Set lang on the <html> element for the entire document:

<!-- English document -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>English Document</title>
</head>
<body>
    <p>All content inherits English language.</p>
</body>
</html>

<!-- Spanish document -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Documento en Español</title>
</head>
<body>
    <p>Todo el contenido hereda el idioma español.</p>
</body>
</html>

Mixed Language Content

Override document language for specific sections:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Multilingual Document</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This page contains content in multiple languages.</p>

    <section lang="es">
        <h2>Español</h2>
        <p>Este es un párrafo en español.</p>
    </section>

    <section lang="fr">
        <h2>Français</h2>
        <p>Ceci est un paragraphe en français.</p>
    </section>

    <section lang="de">
        <h2>Deutsch</h2>
        <p>Dies ist ein Absatz auf Deutsch.</p>
    </section>
</body>
</html>

Inline Language Changes

Mark inline language changes:

<p lang="en">
    The German word for "thank you" is <span lang="de">danke</span>.
    In French, it's <span lang="fr">merci</span>.
    In Spanish, it's <span lang="es">gracias</span>.
</p>

<p lang="en">
    The restaurant's signature dish is <span lang="it">risotto ai funghi</span>,
    which means mushroom risotto.
</p>

<p lang="fr">
    Le mot anglais <span lang="en">"computer"</span> se traduit par
    <span lang="fr">ordinateur</span> en français.
</p>

Language and Hyphenation

Language affects text hyphenation in PDF:

<style>
    p {
        text-align: justify;
        hyphens: auto;  /* Enable automatic hyphenation */
    }
</style>

<!-- English hyphenation rules -->
<p lang="en">
    Supercalifragilisticexpialidocious is an extraordinarily long word
    that demonstrates English hyphenation.
</p>

<!-- German hyphenation rules -->
<p lang="de">
    Donaudampfschifffahrtsgesellschaftskapitän ist ein sehr langes
    deutsches Wort.
</p>

Language and Text Direction

While lang doesn’t set text direction, it’s often used with dir:

<!-- Arabic (right-to-left) -->
<html lang="ar" dir="rtl">
    <body>
        <p>مرحبا بكم في موقعنا</p>
    </body>
</html>

<!-- Hebrew (right-to-left) -->
<html lang="he" dir="rtl">
    <body>
        <p>שלום</p>
    </body>
</html>

<!-- English with Arabic quote -->
<p lang="en" dir="ltr">
    The Arabic greeting is <span lang="ar" dir="rtl">مرحبا</span>.
</p>

Accessibility Benefits

The lang attribute helps screen readers:

  • Pronounce words correctly
  • Apply proper language-specific rules
  • Switch between languages seamlessly
<p lang="en">
    Screen readers will pronounce this in English.
    <span lang="ja">これは日本語です</span>
    This returns to English.
</p>

Case Sensitivity

Language codes are case-insensitive, but conventions exist:

<!-- All valid but follow conventions -->
<html lang="en">Standard lowercase</html>
<html lang="EN">Uppercase (avoid)</html>
<html lang="En">Mixed case (avoid)</html>

<!-- Convention: lowercase primary, UPPERCASE region -->
<html lang="en-US">Conventional</html>
<html lang="en-us">Works but non-standard</html>

Best Practice:

  • Primary language: lowercase (en, fr, es)
  • Region subtag: uppercase (US, GB, FR)
  • Script subtag: title case (Hans, Latn, Cyrl)

Empty or Invalid Lang 

<!-- Valid document -->
<html lang="en">Valid language code</html>

<!-- Empty lang (not recommended) -->
<html lang="">Unknown language</html>

<!-- Missing lang (acceptable but not ideal) -->
<html>No language specified</html>

<!-- Invalid code (not recommended) -->
<html lang="english">Use ISO codes, not names</html>

Language Inheritance

Child elements inherit parent language unless overridden:

<html lang="en">
    <body>
        <!-- Inherits en -->
        <p>English paragraph</p>

        <!-- Overrides to fr -->
        <section lang="fr">
            <p>French paragraph (inherits fr from section)</p>

            <!-- Overrides back to en -->
            <p lang="en">English paragraph within French section</p>
        </section>

        <!-- Returns to en from html -->
        <p>English paragraph again</p>
    </body>
</html>

Historical Languages

BCP 47 supports historical and extinct languages:

<!-- Latin -->
<blockquote lang="la">
    <p>Lorem ipsum dolor sit amet.</p>
</blockquote>

<!-- Old English -->
<p lang="ang">Hwæt! We Gardena in geardagum</p>

<!-- Ancient Greek -->
<p lang="grc">Ἐν ἀρχῇ ἦν ὁ λόγος</p>

<!-- Sanskrit -->
<p lang="sa">ॐ</p>

Examples

Basic Document Language 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>English Document</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This entire document is in English.</p>
</body>
</html>

Regional Language Variants 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title>American English Document</title>
</head>
<body>
    <h1>Welcome to Our Service</h1>

    <p>
        We prioritize quality and customer satisfaction.
        Our color selection and customization options are
        designed with your needs in center focus.
    </p>

    <p>
        <em>Note: This document uses American English spelling.</em>
    </p>
</body>
</html>

Multilingual Welcome Page 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Welcome - Multilingual</title>
    <style>
        .language-section {
            margin: 20pt 0;
            padding: 15pt;
            border: 1pt solid #ccc;
            border-radius: 5pt;
        }
        .language-label {
            font-weight: bold;
            color: #336699;
            margin-bottom: 10pt;
        }
    </style>
</head>
<body>
    <h1 lang="en">Welcome to Our International Service</h1>

    <div class="language-section" lang="en">
        <div class="language-label">English</div>
        <p>Welcome! We're delighted to have you here.</p>
    </div>

    <div class="language-section" lang="es">
        <div class="language-label">Español</div>
        <p>¡Bienvenido! Estamos encantados de tenerle aquí.</p>
    </div>

    <div class="language-section" lang="fr">
        <div class="language-label">Français</div>
        <p>Bienvenue! Nous sommes ravis de vous accueillir.</p>
    </div>

    <div class="language-section" lang="de">
        <div class="language-label">Deutsch</div>
        <p>Willkommen! Wir freuen uns, Sie hier zu haben.</p>
    </div>

    <div class="language-section" lang="it">
        <div class="language-label">Italiano</div>
        <p>Benvenuto! Siamo felici di averti qui.</p>
    </div>

    <div class="language-section" lang="pt">
        <div class="language-label">Português</div>
        <p>Bem-vindo! Estamos felizes em tê-lo aqui.</p>
    </div>

    <div class="language-section" lang="ja">
        <div class="language-label">日本語</div>
        <p>ようこそ！お越しいただきありがとうございます。</p>
    </div>

    <div class="language-section" lang="zh">
        <div class="language-label">中文</div>
        <p>欢迎！我们很高兴您的到来。</p>
    </div>

    <div class="language-section" lang="ko">
        <div class="language-label">한국어</div>
        <p>환영합니다! 여기에 오신 것을 기쁘게 생각합니다.</p>
    </div>

    <div class="language-section" lang="ar" dir="rtl">
        <div class="language-label">العربية</div>
        <p>مرحبا! نحن سعداء لوجودك هنا.</p>
    </div>
</body>
</html>

Academic Paper with Citations 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Comparative Linguistics Study</title>
</head>
<body>
    <h1>Comparative Analysis of Romance Languages</h1>

    <section>
        <h2>Introduction</h2>
        <p>
            This paper examines common phrases across Romance languages,
            demonstrating their shared Latin origins.
        </p>
    </section>

    <section>
        <h2>Common Greetings</h2>

        <p>The word "hello" varies across Romance languages:</p>

        <ul>
            <li lang="it"><strong>Italian:</strong> Ciao</li>
            <li lang="es"><strong>Spanish:</strong> Hola</li>
            <li lang="fr"><strong>French:</strong> Bonjour</li>
            <li lang="pt"><strong>Portuguese:</strong> Olá</li>
            <li lang="ro"><strong>Romanian:</strong> Bună ziua</li>
        </ul>
    </section>

    <section>
        <h2>Example Sentences</h2>

        <div style="margin: 15pt 0;">
            <p><strong>Latin root phrase:</strong></p>
            <blockquote lang="la">
                <p>Tempus fugit.</p>
                <footer><em>(Time flies.)</em></footer>
            </blockquote>
        </div>

        <div style="margin: 15pt 0;">
            <p><strong>French adaptation:</strong></p>
            <blockquote lang="fr">
                <p>Le temps passe vite.</p>
                <footer><em>(Time passes quickly.)</em></footer>
            </blockquote>
        </div>

        <div style="margin: 15pt 0;">
            <p><strong>Spanish adaptation:</strong></p>
            <blockquote lang="es">
                <p>El tiempo vuela.</p>
                <footer><em>(Time flies.)</em></footer>
            </blockquote>
        </div>
    </section>
</body>
</html>

International Business Document 

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title>Global Business Report</title>
</head>
<body>
    <h1>2025 Global Market Analysis</h1>

    <section lang="en">
        <h2>Executive Summary</h2>
        <p>
            Our analysis reveals strong growth in international markets,
            with particular emphasis on emerging economies.
        </p>
    </section>

    <section lang="es">
        <h2>Mercado Latinoamericano</h2>
        <p>
            El mercado latinoamericano ha experimentado un crecimiento
            del 35% en el último trimestre, superando las proyecciones
            iniciales.
        </p>
    </section>

    <section lang="de">
        <h2>Europäischer Markt</h2>
        <p>
            Der europäische Markt zeigt eine stabile Entwicklung mit
            einem Wachstum von 15% im Jahresvergleich.
        </p>
    </section>

    <section lang="ja">
        <h2>アジア太平洋市場</h2>
        <p>
            アジア太平洋地域は、前年比40%の成長を記録し、
            最も急成長している市場となっています。
        </p>
    </section>

    <section lang="en">
        <h2>Conclusion</h2>
        <p>
            Global expansion continues to drive growth across all regions.
        </p>
    </section>
</body>
</html>

Restaurant Menu 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Restaurant Menu</title>
    <style>
        .menu-item {
            margin: 15pt 0;
            padding: 10pt;
            border-bottom: 1pt solid #eee;
        }
        .dish-name {
            font-weight: bold;
            font-size: 12pt;
        }
        .price {
            float: right;
            color: #336699;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>La Bella Vista Restaurant</h1>
    <p lang="it" style="font-style: italic; text-align: center;">
        Cucina Italiana Autentica
    </p>

    <h2>Appetizers</h2>

    <div class="menu-item">
        <span class="price">$12.00</span>
        <div class="dish-name" lang="it">Bruschetta al Pomodoro</div>
        <p>Toasted bread with fresh tomatoes, basil, and olive oil</p>
    </div>

    <div class="menu-item">
        <span class="price">$14.00</span>
        <div class="dish-name" lang="it">Carpaccio di Manzo</div>
        <p>Thinly sliced raw beef with arugula and parmesan</p>
    </div>

    <h2>Main Courses</h2>

    <div class="menu-item">
        <span class="price">$24.00</span>
        <div class="dish-name" lang="it">Risotto ai Funghi</div>
        <p>Creamy mushroom risotto with porcini and white truffle oil</p>
    </div>

    <div class="menu-item">
        <span class="price">$28.00</span>
        <div class="dish-name" lang="it">Osso Buco alla Milanese</div>
        <p>Braised veal shanks served with saffron risotto</p>
    </div>

    <div class="menu-item">
        <span class="price">$26.00</span>
        <div class="dish-name" lang="it">Spaghetti alle Vongole</div>
        <p>Spaghetti with fresh clams, garlic, and white wine</p>
    </div>

    <h2>Desserts</h2>

    <div class="menu-item">
        <span class="price">$8.00</span>
        <div class="dish-name" lang="it">Tiramisù</div>
        <p>Classic Italian dessert with espresso and mascarpone</p>
    </div>

    <div class="menu-item">
        <span class="price">$9.00</span>
        <div class="dish-name" lang="it">Panna Cotta</div>
        <p>Silky vanilla cream with berry compote</p>
    </div>

    <footer style="margin-top: 30pt; text-align: center; font-style: italic;">
        <p lang="it">Buon appetito!</p>
    </footer>
</body>
</html>

Data-Bound Multilingual Content 

<!-- Model: {
    language: "es",
    translations: {
        en: {
            title: "Welcome",
            message: "Thank you for visiting our site.",
            button: "Learn More"
        },
        es: {
            title: "Bienvenido",
            message: "Gracias por visitar nuestro sitio.",
            button: "Aprende Más"
        },
        fr: {
            title: "Bienvenue",
            message: "Merci de visiter notre site.",
            button: "En Savoir Plus"
        }
    },
    content: {
        title: "Bienvenido",
        message: "Gracias por visitar nuestro sitio.",
        button: "Aprende Más"
    }
} -->

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <h1></h1>
    <p></p>
    <button></button>
</body>
</html>

Product Documentation 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Product Manual</title>
</head>
<body>
    <h1>User Manual - Model X1000</h1>

    <section>
        <h2>Safety Information</h2>
        <p>
            Read all safety instructions before operating this device.
        </p>

        <div style="margin: 15pt 0; padding: 10pt; background-color: #fff3cd;">
            <p><strong lang="en">Warning (English):</strong>
            Do not expose to water.</p>

            <p lang="es"><strong>Advertencia (Español):</strong>
            No exponer al agua.</p>

            <p lang="fr"><strong>Avertissement (Français):</strong>
            Ne pas exposer à l'eau.</p>

            <p lang="de"><strong>Warnung (Deutsch):</strong>
            Nicht dem Wasser aussetzen.</p>

            <p lang="ja"><strong>警告 (日本語):</strong>
            水にさらさないでください。</p>
        </div>
    </section>

    <section>
        <h2>Technical Specifications</h2>
        <table style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="border: 1pt solid #ddd; padding: 8pt;">Model</td>
                <td style="border: 1pt solid #ddd; padding: 8pt;">X1000</td>
            </tr>
            <tr>
                <td style="border: 1pt solid #ddd; padding: 8pt;">Power</td>
                <td style="border: 1pt solid #ddd; padding: 8pt;">100-240V AC</td>
            </tr>
        </table>
    </section>
</body>
</html>

Literary Quotations 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Famous Quotations</title>
    <style>
        blockquote {
            margin: 20pt 0;
            padding: 15pt;
            border-left: 4pt solid #336699;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <h1>Literary Quotations from Around the World</h1>

    <article>
        <h2>French Literature</h2>
        <blockquote lang="fr">
            <p>« La vie est un sommeil, l'amour en est le rêve. »</p>
            <footer>— Alfred de Musset</footer>
        </blockquote>
        <p><em lang="en">Translation: "Life is a sleep, love is its dream."</em></p>
    </article>

    <article>
        <h2>Spanish Literature</h2>
        <blockquote lang="es">
            <p>« En un lugar de la Mancha, de cuyo nombre no quiero acordarme... »</p>
            <footer>— Miguel de Cervantes, Don Quijote</footer>
        </blockquote>
        <p><em lang="en">Translation: "In a place in La Mancha, whose name I do not wish to remember..."</em></p>
    </article>

    <article>
        <h2>German Literature</h2>
        <blockquote lang="de">
            <p>« Wer nie sein Brot mit Tränen aß, wer nie die kummervollen Nächte auf seinem Bette weinend saß, der kennt euch nicht, ihr himmlischen Mächte. »</p>
            <footer>— Johann Wolfgang von Goethe</footer>
        </blockquote>
    </article>

    <article>
        <h2>Japanese Literature</h2>
        <blockquote lang="ja">
            <p>「人間は生まれながらにして孤独である。」</p>
            <footer>— 夏目漱石</footer>
        </blockquote>
        <p><em lang="en">Translation: "Human beings are lonely from birth."</em></p>
    </article>

    <article>
        <h2>Russian Literature</h2>
        <blockquote lang="ru">
            <p>« Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему. »</p>
            <footer>— Лев Толстой, Анна Каренина</footer>
        </blockquote>
        <p><em lang="en">Translation: "All happy families are alike; each unhappy family is unhappy in its own way."</em></p>
    </article>
</body>
</html>

Travel Guide 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Travel Guide: Essential Phrases</title>
</head>
<body>
    <h1>Essential Travel Phrases</h1>

    <section>
        <h2>Greetings and Basic Phrases</h2>

        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background-color: #f2f2f2;">
                    <th style="border: 1pt solid #ddd; padding: 8pt;">English</th>
                    <th style="border: 1pt solid #ddd; padding: 8pt;">Spanish</th>
                    <th style="border: 1pt solid #ddd; padding: 8pt;">French</th>
                    <th style="border: 1pt solid #ddd; padding: 8pt;">Italian</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="en">Hello</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="es">Hola</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="fr">Bonjour</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="it">Ciao</td>
                </tr>
                <tr>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="en">Thank you</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="es">Gracias</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="fr">Merci</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="it">Grazie</td>
                </tr>
                <tr>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="en">Goodbye</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="es">Adiós</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="fr">Au revoir</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="it">Arrivederci</td>
                </tr>
                <tr>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="en">Please</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="es">Por favor</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="fr">S'il vous plaît</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="it">Per favore</td>
                </tr>
                <tr>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="en">Excuse me</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="es">Disculpe</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="fr">Excusez-moi</td>
                    <td style="border: 1pt solid #ddd; padding: 8pt;" lang="it">Mi scusi</td>
                </tr>
            </tbody>
        </table>
    </section>
</body>
</html>

Language Learning Material 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>French Lesson 1: Introductions</title>
    <style>
        .example {
            margin: 15pt 0;
            padding: 10pt;
            background-color: #f0f8ff;
            border-left: 3pt solid #336699;
        }
        .translation {
            margin-top: 5pt;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>French Lesson 1: Introductions</h1>

    <section>
        <h2>Basic Greetings</h2>

        <div class="example">
            <p lang="fr"><strong>Bonjour!</strong> Comment allez-vous?</p>
            <p class="translation" lang="en">Hello! How are you?</p>
        </div>

        <div class="example">
            <p lang="fr"><strong>Je m'appelle Marie.</strong> Et vous?</p>
            <p class="translation" lang="en">My name is Marie. And you?</p>
        </div>

        <div class="example">
            <p lang="fr"><strong>Enchanté(e)!</strong></p>
            <p class="translation" lang="en">Pleased to meet you!</p>
        </div>
    </section>

    <section>
        <h2>Common Phrases</h2>

        <div class="example">
            <p lang="fr">Parlez-vous anglais?</p>
            <p class="translation" lang="en">Do you speak English?</p>
        </div>

        <div class="example">
            <p lang="fr">Je ne comprends pas.</p>
            <p class="translation" lang="en">I don't understand.</p>
        </div>

        <div class="example">
            <p lang="fr">Pouvez-vous répéter, s'il vous plaît?</p>
            <p class="translation" lang="en">Can you repeat, please?</p>
        </div>
    </section>
</body>
</html>

Corporate Multi-Region Document 

<!-- Model: {
    regions: [
        { code: "en-US", name: "United States", message: "Welcome to our US office." },
        { code: "en-GB", name: "United Kingdom", message: "Welcome to our UK office." },
        { code: "es-MX", name: "Mexico", message: "Bienvenido a nuestra oficina en México." },
        { code: "fr-CA", name: "Canada", message: "Bienvenue à notre bureau canadien." }
    ]
} -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Global Offices</title>
</head>
<body>
    <h1>Our Global Presence</h1>

    <template data-bind="">
        <section lang="" style="margin: 20pt 0; padding: 15pt; border: 1pt solid #ccc;">
            <h2></h2>
            <p></p>
        </section>
    </template>
</body>
</html>

See Also