@id : The ID Attribute

On this page

Summary
Usage
Supported Elements
Binding Values
Notes
Examples
See Also

Summary

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

Usage

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

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

<!-- Basic ID assignment -->
<h1 id="main-title">Document Title</h1>

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

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

Supported Elements

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

Block Elements

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

Inline Elements

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

Media and Embedded Elements

<img>, <iframe>, <canvas>

Form Elements

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

Binding Values

The id attribute supports data binding with dynamic values:

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

<!-- Computed ID from expression -->
<h2 id="section-{{model.index}}">
    Section {{model.index}}
</h2>

<!-- Conditional ID generation -->
<article id="{{model.type}}-article-{{model.articleId}}">
    Article content
</article>

<!-- In a loop with unique IDs -->
<template data-bind="{{model.chapters}}">
    <div id="chapter-{{.number}}">
        <h2>{{.title}}</h2>
        <p>{{.content}}</p>
    </div>
</template>

Data Model Example:

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

Notes

Uniqueness Requirement

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

Unpredictable behavior with internal links
CSS selector conflicts
Broken PDF bookmarks and navigation
Issues with document structure

<!-- INCORRECT: Duplicate IDs -->
<div id="content">First section</div>
<div id="content">Second section</div>

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

ID Naming Rules

Valid ID values should follow these conventions:

Start with a letter (a-z, A-Z)
Can contain letters, digits, hyphens (-), underscores (_), and periods (.)
Are case-sensitive (myId ≠ MyId)
Should not contain spaces or special characters
Should be descriptive and meaningful

<!-- Valid IDs -->
<div id="main-content"></div>
<div id="section_1"></div>
<div id="nav.primary"></div>
<div id="userId123"></div>

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

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

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

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

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

CSS Targeting

Use ID selectors in CSS to target specific elements:

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

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

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

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

PDF Bookmarks and Outlines

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

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

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

ID vs Class

ID: Use for unique elements that appear once per document
Class: Use for reusable styles applied to multiple elements

<!-- ID for unique elements -->
<header id="site-header">...</header>
<main id="main-content">...</main>
<footer id="site-footer">...</footer>

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

Examples

Basic ID Assignment

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

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

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

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

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

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

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

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

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

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

CSS ID Selectors

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

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

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

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

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

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

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

Table of Contents with IDs

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

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

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

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

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

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

Data Binding with IDs

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

<nav>
    <template data-bind="{{model.sections}}">
        <a href="#{{.id}}">{{.title}}</a><br/>
    </template>
</nav>

<template data-bind="{{model.sections}}">
    <section id="{{.id}}">
        <h2>{{.title}}</h2>
        <p>{{.content}}</p>
    </section>
</template>

Unique IDs in Repeated Content

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

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

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

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

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

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

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

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

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

Descriptive ID Naming

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

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

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

Complex Document Structure

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

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

Conditional ID Assignment

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

<div id="{{model.user.role}}-dashboard-{{model.user.userId}}">
    <h1>Dashboard for {{model.user.role}}</h1>
    <p>Welcome, user #{{model.user.userId}}</p>
</div>

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

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

Multi-level Document Structure

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

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

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

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

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

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

IDs with Bookmarks

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

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

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

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

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

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

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

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

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