`, srcset, and `loading="lazy"` for performance.
+
+**Performance** - Minimize DOM depth, optimize images, defer non-critical scripts, use semantic elements.
+
+## Quick Patterns
+
+### Semantic Page Structure
+```html
+
+
+
+ Page Title
+
+
+
+
+
+
+
+```
+
+## Troubleshooting
+
+- **Validation**: W3C Validator (validator.w3.org), check unclosed tags, verify nesting
+- **Accessibility**: Lighthouse audit, screen reader testing, keyboard nav, color contrast
+- **Compatibility**: Can I Use (caniuse.com), feature detection, provide fallbacks
+
+## Key Standards
+
+- **WHATWG HTML Living Standard**: https://html.spec.whatwg.org/
+- **WCAG Accessibility**: https://www.w3.org/WAI/WCAG21/quickref/
+- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/HTML
+
+---
diff --git a/skills/html-coder/references/add-css-style.md b/skills/html-coder/references/add-css-style.md
new file mode 100644
index 000000000..be828ad21
--- /dev/null
+++ b/skills/html-coder/references/add-css-style.md
@@ -0,0 +1,591 @@
+# Adding CSS Styling to HTML
+
+Complete guide to integrating CSS (Cascading Style Sheets) with HTML for presentation and layout.
+
+## Methods of Adding CSS
+
+### 1. External Stylesheet (Recommended)
+
+**Best for**: Production websites, reusable styles, maintainable code
+
+```html
+
+
+
+ Page Title
+ Heading
+ Content
+
+
+```
+
+**Advantages**:
+- ✅ Separates content from presentation
+- ✅ Reusable across multiple pages
+- ✅ Cached by browser (faster page loads)
+- ✅ Easier to maintain
+- ✅ Can be developed separately
+
+**Multiple stylesheets**:
+```html
+Page Title
+
+
+
+ Heading
+ Highlighted text
+
+
+```
+
+**Advantages**:
+- ✅ No external HTTP request
+- ✅ Good for critical above-the-fold CSS
+- ✅ Useful for email templates
+
+**Disadvantages**:
+- ❌ Not reusable across pages
+- ❌ Not cached separately
+- ❌ Increases HTML file size
+
+### 3. Inline Styles
+
+**Best for**: Dynamic styles, urgent overrides, email HTML (when required)
+
+```html
+Important text
+
+
+
Box Title
+
Box content
+
+
Card Title
+
Card content goes here.
+
Action
+
Bootstrap Page
+
+
+
+
Hello Bootstrap
+ Click Me
+
+
+
+
+
+
+```
+
+### Tailwind CSS
+
+```html
+
+
+
+ Tailwind Page
+
+
+
+
+
+
+
Hello Tailwind
+
+ Click Me
+
+
+
+
+```
+
+## CSS Variables in HTML
+
+Define CSS custom properties inline:
+
+```html
+
+
+ Text using CSS variables
+
+
Complete CSS Integration Example
+
+
+
+
+ Article Title
+ Article content goes here.
+
+
+
+
+
+
+```
+
+## Resources
+
+- **MDN CSS Reference**: https://developer.mozilla.org/en-US/docs/Web/CSS
+- **CSS Tricks**: https://css-tricks.com/
+- **Can I Use**: https://caniuse.com/ (browser support)
+- **CSS Validator**: https://jigsaw.w3.org/css-validator/
+- **Google Fonts**: https://fonts.google.com/
+- **Normalize.css**: https://necolas.github.io/normalize.css/
diff --git a/skills/html-coder/references/add-javascript.md b/skills/html-coder/references/add-javascript.md
new file mode 100644
index 000000000..c980fcb58
--- /dev/null
+++ b/skills/html-coder/references/add-javascript.md
@@ -0,0 +1,792 @@
+# Adding JavaScript to HTML
+
+Complete guide to integrating JavaScript with HTML for interactivity and dynamic behavior.
+
+## Methods of Adding JavaScript
+
+### 1. External JavaScript File (Recommended)
+
+**Best for**: Production websites, reusable code, maintainable applications
+
+```html
+
+
+
+ Page Title
+
+
+ Hello World
+ Change Text
+
+
+
+
+
+```
+
+**script.js**:
+```javascript
+document.getElementById('changeBtn').addEventListener('click', function() {
+ document.getElementById('heading').textContent = 'Hello JavaScript!';
+});
+```
+
+**Advantages**:
+- ✅ Separates content from behavior
+- ✅ Reusable across multiple pages
+- ✅ Cached by browser (faster page loads)
+- ✅ Easier to maintain and debug
+- ✅ Can be developed separately
+- ✅ Cleaner HTML
+
+### 2. Inline JavaScript
+
+**Best for**: Small scripts, event handlers, quick testing
+
+```html
+
+
+
+ Inline JavaScript
+
+
+ Hello World
+
+ Change Text
+ Show Alert
+
+
+
+
+```
+
+**Advantages**:
+- ✅ Quick to implement
+- ✅ No external HTTP request
+- ✅ Good for small, page-specific scripts
+
+**Disadvantages**:
+- ❌ Not reusable across pages
+- ❌ Harder to maintain
+- ❌ Violates Content Security Policy (CSP)
+- ❌ Mixes content and behavior
+
+### 3. Inline Event Handlers
+
+**Best for**: Quick prototypes, simple interactions (not recommended for production)
+
+```html
+
+Click Me
+
+
+Greet John
+
+
+
+
+Click
+```
+
+**Better approach** (external event listeners):
+```html
+Click Me
+
+
+```
+
+## Script Element Attributes
+
+### Basic Script Element
+
+```html
+
+```
+
+### Important Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `src` | External file path | URL or relative path |
+| `type` | MIME type | `text/javascript` (default), `module` |
+| `async` | Async loading | Boolean (no value needed) |
+| `defer` | Deferred loading | Boolean (no value needed) |
+| `crossorigin` | CORS mode | `anonymous`, `use-credentials` |
+| `integrity` | SRI hash | Hash for security verification |
+| `nomodule` | Fallback for old browsers | Boolean |
+| `referrerpolicy` | Referrer header | `no-referrer`, `origin`, etc. |
+
+## Script Loading Strategies
+
+### 1. Default Loading (Blocking)
+
+```html
+
+
+
+
+```
+
+**Behavior**:
+- Stops HTML parsing
+- Downloads script
+- Executes script immediately
+- Resumes HTML parsing
+
+**When to use**: Never (use `defer` or `async` instead)
+
+### 2. Defer Loading (Recommended for Most Scripts)
+
+```html
+
+
+
+
+```
+
+**Behavior**:
+1. HTML parsing continues
+2. Script downloads in parallel
+3. Script executes after HTML parsing completes
+4. Maintains script order
+
+**When to use**:
+- ✅ Scripts that manipulate DOM
+- ✅ Scripts that depend on full HTML
+- ✅ Multiple scripts with dependencies
+- ✅ Most common use case
+
+### 3. Async Loading
+
+```html
+
+
+
+
+```
+
+**Behavior**:
+1. HTML parsing continues
+2. Script downloads in parallel
+3. Script executes as soon as downloaded (pauses HTML parsing)
+4. Does NOT maintain script order
+
+**When to use**:
+- ✅ Independent scripts (analytics, ads)
+- ✅ Scripts that don't depend on DOM
+- ✅ Scripts that don't depend on other scripts
+- ❌ NOT for scripts with dependencies
+
+### 4. Script at End of Body (Traditional)
+
+```html
+
+
+
+ Page Title
+
+
+ Content
+ More content
+
+
+
+
+
+```
+
+**When to use**:
+- ✅ When `defer` is not available
+- ✅ Ensures DOM is fully loaded
+- ❌ Less efficient than `defer` in ``
+
+### Comparison Table
+
+| Method | Parsing | Download | Execution | Order | Use Case |
+|--------|---------|----------|-----------|-------|----------|
+| Default | Blocks | Immediate | Immediate | Yes | ❌ Avoid |
+| `defer` | Continues | Parallel | After parse | Yes | ✅ DOM manipulation |
+| `async` | Continues | Parallel | ASAP | No | ✅ Independent scripts |
+| End of body | Continues | After parse | Immediate | Yes | ✅ Fallback method |
+
+## ES6 Modules
+
+### Module Script
+
+```html
+
+
+
+ ES6 Modules
+
+
+
+
+
+
+
+
+```
+
+**main.js**:
+```javascript
+import { greet } from './utils.js';
+import { render } from './render.js';
+
+greet('World');
+render();
+```
+
+**utils.js**:
+```javascript
+export function greet(name) {
+ console.log(`Hello, ${name}!`);
+}
+```
+
+### Module Features
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+**Module characteristics**:
+- ✅ Automatically in strict mode
+- ✅ Automatically deferred
+- ✅ Have their own scope (not global)
+- ✅ Can use `import` and `export`
+- ✅ Only execute once (even if imported multiple times)
+
+## JavaScript Placement Best Practices
+
+### In `` with `defer`
+
+```html
+
+
+
+ Page Title
+
+
+
+
+
+
+ Content loads without blocking
+
+
+```
+
+### Multiple Scripts with Dependencies
+
+```html
+
+
+
+
+
+
+```
+
+### Critical vs Non-Critical Scripts
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## Data Attributes for JavaScript
+
+### Storing Data in HTML
+
+```html
+
+ View Profile
+
+
+
+```
+
+### Complex Data
+
+```html
+
+
+
+```
+
+## Common Integration Patterns
+
+### 1. DOM Content Loaded
+
+Wait for HTML to fully load:
+
+```html
+
+```
+
+### 2. Window Load Event
+
+Wait for everything (including images):
+
+```html
+
+```
+
+### 3. Event Delegation
+
+```html
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+```
+
+### 4. Form Handling
+
+```html
+
+
+
+```
+
+## CDN Integration
+
+### Popular Libraries
+
+```html
+
+
+
+ CDN JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### CDN Best Practices
+
+```html
+
+
+
+
+
+
+```
+
+## Script Loading Performance
+
+### Preloading Scripts
+
+```html
+
+
+ React App
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Vue.js
+
+```html
+
+
+
+ Vue App
+
+
+
+
+
{{ message }}
+ Click Me
+
+
+
+
+
+```
+
+## Error Handling
+
+### Global Error Handler
+
+```html
+
+```
+
+### Try-Catch Blocks
+
+```html
+
+```
+
+## Best Practices
+
+### ✅ Do
+
+1. **Use `defer` for regular scripts** in ``
+2. **Use `async` for independent scripts** (analytics, ads)
+3. **Place scripts before closing ``** if `defer` not supported
+4. **Use external files** for reusable code
+5. **Use event listeners** instead of inline handlers
+6. **Validate user input** on both client and server
+7. **Use `type="module"`** for modern JavaScript
+8. **Implement error handling** for better UX
+9. **Minify JavaScript** for production
+10. **Use SRI** for CDN scripts (`integrity` attribute)
+11. **Separate concerns** (HTML, CSS, JS)
+12. **Use data attributes** for passing data from HTML to JS
+13. **Implement CSP** for security
+14. **Test across browsers** for compatibility
+15. **Use descriptive function/variable names**
+
+### ❌ Don't
+
+1. **Don't use inline event handlers** (violates CSP)
+2. **Don't block HTML parsing** (avoid scripts in `` without `defer`)
+3. **Don't use `document.write()`** (deprecated)
+4. **Don't trust user input** (always validate/sanitize)
+5. **Don't use global variables excessively** (use modules/closures)
+6. **Don't load unnecessary libraries** (increases page size)
+7. **Don't ignore browser console errors**
+8. **Don't use `eval()`** (security risk)
+9. **Don't forget fallbacks** for CDN resources
+10. **Don't mix inline and external code** unnecessarily
+11. **Don't forget to remove `console.log()`** in production
+12. **Don't use deprecated features** (check browser compatibility)
+13. **Don't ignore accessibility** (keyboard navigation, screen readers)
+14. **Don't forget mobile optimization**
+15. **Don't hardcode sensitive data** in JavaScript
+
+## Complete Example
+
+```html
+
+
+
+ Complete JavaScript Integration
+
+
+
+
+ Change Text
+
+
+
+
+
+
+
+
+
+```
+
+**app.js**:
+```javascript
+// Wait for DOM to be ready (note: defer already ensures this)
+document.addEventListener('DOMContentLoaded', function() {
+ // Button click handler
+ const btn = document.getElementById('changeBtn');
+ btn.addEventListener('click', function() {
+ const newText = this.dataset.text;
+ document.getElementById('heading').textContent = newText;
+ });
+
+ // Form submission handler
+ const form = document.getElementById('contactForm');
+ form.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const formData = new FormData(this);
+ console.log('Form submitted:', Object.fromEntries(formData));
+
+ // Process form data
+ // submitForm(formData);
+ });
+});
+```
+
+## Resources
+
+- **MDN JavaScript Guide**: https://developer.mozilla.org/en-US/docs/Web/JavaScript
+- **JavaScript.info**: https://javascript.info/
+- **Can I Use**: https://caniuse.com/ (browser support)
+- **JSHint**: https://jshint.com/ (code quality)
+- **ESLint**: https://eslint.org/ (linting)
+- **Babel**: https://babeljs.io/ (transpiler)
+- **SRI Hash Generator**: https://www.srihash.org/
diff --git a/skills/html-coder/references/attributes.md b/skills/html-coder/references/attributes.md
new file mode 100644
index 000000000..2cd9347d4
--- /dev/null
+++ b/skills/html-coder/references/attributes.md
@@ -0,0 +1,368 @@
+# HTML Attributes Reference
+
+Comprehensive guide to common HTML attributes, input types, script configurations, and meta element usage.
+
+## Input Types (`` elements |
+
+### File and Media Input Types
+
+| Type | Purpose | Attributes |
+|------|---------|------------|
+| `file` | File upload | `accept`, `multiple`, `capture` |
+| `color` | Color picker | `value` (hex color) |
+| `image` | Graphical submit button | `src`, `alt`, `width`, `height` |
+
+### Button Input Types
+
+| Type | Purpose | Default Behavior |
+|------|---------|-----------------|
+| `button` | Generic button | None (requires JavaScript) |
+| `submit` | Form submission | Submits form to `action` URL |
+| `reset` | Form reset (not recommended) | Resets all fields to default |
+
+### Special Input Types
+
+| Type | Purpose |
+|------|---------|
+| `hidden` | Invisible data field |
+
+### Deprecated Input Type
+
+| Type | Status | Alternative |
+|------|--------|-------------|
+| `datetime` | Deprecated | Use `datetime-local` |
+
+## Common Input Attributes
+
+### Form Control Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `name` | All except image/button without form | Identifies field in form submission |
+| `value` | All | Initial/current value of control |
+| `id` | All | Unique identifier for labeling |
+| `required` | Most types | Field must be filled before submission |
+| `disabled` | All | Prevents interaction and submission |
+| `readonly` | Text-based types | Prevents editing but allows submission |
+| `autofocus` | All | Automatically focused on page load |
+| `placeholder` | Text-based types | Hint text displayed when empty |
+
+### Validation Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `pattern` | Text-based types | Regular expression for validation |
+| `min` | Numeric, date/time | Minimum value |
+| `max` | Numeric, date/time | Maximum value |
+| `minlength` | Text-based types | Minimum character count |
+| `maxlength` | Text-based types | Maximum character count |
+| `step` | Numeric, date/time | Increment value (`any` allows decimals) |
+
+### Autocomplete Attributes
+
+| Attribute | Purpose | Values |
+|-----------|---------|--------|
+| `autocomplete` | Browser autofill behavior | `on`, `off`, or specific values (e.g., `name`, `email`, `tel`) |
+| `list` | Links to `` | ID of datalist element |
+| `multiple` | Multiple values | For `email` and `file` types |
+
+### Form Override Attributes
+
+Valid only for `submit` and `image` types:
+
+| Attribute | Overrides |
+|-----------|-----------|
+| `formaction` | Form's `action` |
+| `formenctype` | Form's `enctype` |
+| `formmethod` | Form's `method` |
+| `formnovalidate` | Form's validation |
+| `formtarget` | Form's `target` |
+
+### Other Input Attributes
+
+| Attribute | Valid For | Purpose |
+|-----------|-----------|---------|
+| `checked` | `checkbox`, `radio` | Initially checked state |
+| `accept` | `file` | Allowed file types (e.g., `image/*`, `.pdf`) |
+| `capture` | `file` | Media capture method (`user`, `environment`) |
+| `size` | Text-based types | Visual width in characters |
+| `src` | `image` | Image URL |
+| `alt` | `image` | Alternative text |
+| `width`, `height` | `image` | Image dimensions |
+| `dirname` | Text types | Submits text directionality (`ltr`/`rtl`) |
+
+## Script Types (`
+```
+
+Access via: `JSON.parse(document.getElementById('data').textContent)`
+
+### Script Attributes
+
+| Attribute | Purpose | Compatible With |
+|-----------|---------|-----------------|
+| `async` | Load asynchronously, execute when ready | Classic scripts, external files |
+| `defer` | Load asynchronously, execute after parsing | Classic scripts, external files |
+| `src` | External script URL | All types |
+| `integrity` | SRI hash for security verification | External files |
+| `crossorigin` | CORS mode | External files (`anonymous`, `use-credentials`) |
+| `referrerpolicy` | Referrer policy | External files |
+| `nomodule` | Skip in module-supporting browsers | Fallback scripts |
+| `blocking="render"` | Blocks rendering until loaded | Scripts in `` |
+
+**Loading Behavior Comparison**:
+
+- **No attributes**: Blocks parsing, executes immediately
+- **`async`**: Loads in parallel, executes as soon as loaded (order not guaranteed)
+- **`defer`**: Loads in parallel, executes after DOM parsing in document order
+- **`type="module"`**: Deferred by default
+
+## Meta Element Attributes
+
+### Meta Charset
+
+Specifies character encoding (must be UTF-8):
+
+```html
+` with form controls
+3. **Validate appropriately**: Use HTML5 validation before JavaScript
+4. **Provide accessible names**: Use `aria-label` when labels aren't visible
+5. **Be specific with autocomplete**: Use detailed tokens for better UX
+6. **Avoid inline event handlers**: Use `addEventListener()` instead
+7. **Use `defer` for scripts**: Better performance than blocking scripts
+8. **Set proper viewport**: Essential for responsive mobile design
+9. **Include meta description**: Improves SEO and search result display
+10. **Use data attributes wisely**: For JavaScript-only data, not visible content
+
+## Resources
+
+- [MDN: Input Types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+- [MDN: Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+- [MDN: Script Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+- [MDN: Meta Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+- [MDN: Link Types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
+- [MDN: Autocomplete Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+- [MDN: Global Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
diff --git a/skills/html-coder/references/essentials.md b/skills/html-coder/references/essentials.md
new file mode 100644
index 000000000..c4f63c6a7
--- /dev/null
+++ b/skills/html-coder/references/essentials.md
@@ -0,0 +1,414 @@
+# HTML Essentials
+
+Essential HTML concepts, techniques, and best practices for modern web development.
+
+## HTML Comments
+
+Comments add notes to code without affecting display. Browsers ignore comments.
+
+**Syntax**:
+```html
+
+
+
+```
+
+**Usage**:
+- Add explanatory notes about code
+- Temporarily disable HTML without deleting it
+- Document complex sections
+- Leave notes for collaborators
+
+**Rules**:
+- Can be placed before/after DOCTYPE and ``
+- Can be used as content in most elements
+- **Cannot** be used inside tags (e.g., within attributes)
+- **Cannot** be nested
+- In raw-text/RCDATA elements like `
+```
+
+**Usage**:
+- Must start with `data-`
+- Followed by at least one character (no uppercase)
+- CamelCase in JavaScript (data-user-id → dataset.userId)
+- Ideal for passing data from HTML to JavaScript
+- Better than using class names for data storage
+
+---
+
+### `dir`
+
+**Purpose**: Text directionality
+
+**Values**:
+- `ltr` - Left-to-right (default for most languages)
+- `rtl` - Right-to-left (Arabic, Hebrew)
+- `auto` - Browser determines based on content
+
+**Example**:
+```html
+English text (left to right)
+مرحبا (right to left)
+Mixed content: Hello مرحبا
+```
+
+**Usage**:
+- Inherit to all child elements
+- Set on `` for entire document
+- Use `auto` for user-generated content with unknown direction
+
+---
+
+### `draggable`
+
+**Purpose**: Enable drag-and-drop functionality
+
+**Values**:
+- `true` - Element is draggable
+- `false` - Element is not draggable
+- `auto` - Browser default (images and links draggable)
+
+**Example**:
+```html
+Drag me!
+This is hidden
+Not displayed on page
+```
+
+**Usage**:
+- Equivalent to `display: none` in CSS
+- Element not rendered and not accessible
+- Screen readers ignore hidden content
+- Use `aria-hidden="true"` to hide from screen readers but keep visible
+- Can be toggled with JavaScript
+
+---
+
+### `id`
+
+**Purpose**: Unique identifier for element
+
+**Values**: Unique string (must be unique per document)
+
+**Example**:
+```html
+
+Submit
+Article content
+```
+
+**Usage**:
+- Must be unique within the document
+- Can be referenced by CSS (`#main-header`) and JavaScript
+- Used for fragment identifiers (`#main-header` in URLs)
+- Used with `` to associate labels with inputs
+- Convention: lowercase with hyphens or camelCase
+- May start with a number, but such IDs need escaping in some CSS selectors (for example, `#\31 23` to select `id="123"`)
+
+---
+
+### `inert`
+
+**Purpose**: Make element non-interactive
+
+**Values**: Boolean (no value needed)
+
+**Example**:
+```html
+
+```
+
+**Usage**:
+- Element and descendants cannot receive focus
+- Element and descendants removed from tab order
+- Element and descendants ignored by screen readers
+- Useful for modals (inert background content)
+- Relatively new attribute (check browser support)
+
+---
+
+### `inputmode`
+
+**Purpose**: Hint for virtual keyboard type
+
+**Values**:
+- `none` - No virtual keyboard
+- `text` - Standard text keyboard (default)
+- `decimal` - Numeric keyboard with decimal
+- `numeric` - Numeric keyboard
+- `tel` - Telephone number pad
+- `search` - Search-optimized keyboard
+- `email` - Email keyboard (@ symbol)
+- `url` - URL keyboard (/ and .com)
+
+**Example**:
+```html
+Click Me
+
+```
+
+**Usage**:
+- Used with Web Components
+- Extends built-in elements
+- Requires JavaScript custom element definition
+
+---
+
+### `itemid`, `itemprop`, `itemref`, `itemscope`, `itemtype`
+
+**Purpose**: Microdata attributes for structured data
+
+**Example**:
+```html
+
+
John Doe
+
Software Engineer
+
Email
+
+ Product Name
+ $29.99
+
+```
+
+**Usage**:
+- SEO: helps search engines understand content
+- Use with Schema.org types
+- Alternative to JSON-LD for structured data
+
+---
+
+### `lang`
+
+**Purpose**: Specify language of element content
+
+**Values**: Language code (ISO 639-1)
+
+**Example**:
+```html
+
+Hola, ¿cómo estás?
+Bonjour, comment ça va?
+Guten Tag!
+```
+
+**Common Language Codes**:
+- `en` - English
+- `en-US` - English (United States)
+- `en-GB` - English (United Kingdom)
+- `es` - Spanish
+- `fr` - French
+- `de` - German
+- `it` - Italian
+- `pt` - Portuguese
+- `ja` - Japanese
+- `zh` - Chinese
+- `ar` - Arabic
+- `ru` - Russian
+
+**Usage**:
+- Set on `` for primary page language
+- Override for sections in different languages
+- Helps screen readers with pronunciation
+- Assists search engines and translation tools
+
+---
+
+### `nonce`
+
+**Purpose**: Cryptographic nonce for Content Security Policy (CSP)
+
+**Values**: Random string (unique per page load)
+
+**Example**:
+```html
+
+
+ Click Me
+ 🔔
+
+
+
+```
+
+**Usage**: Advanced feature for Web Components
+
+---
+
+### `slot`
+
+**Purpose**: Assign content to named slot in Web Components
+
+**Values**: Slot name
+
+**Example**:
+```html
+
+ Card Title
+ Card content goes here.
+ Action
+
+```
+
+**Usage**: Used with Shadow DOM and Web Components
+
+---
+
+### `spellcheck`
+
+**Purpose**: Enable/disable spell checking
+
+**Values**:
+- `true` - Enable spell checking
+- `false` - Disable spell checking
+
+**Example**:
+```html
+Editable with spellcheck
+```
+
+**Usage**:
+- Works on editable content
+- Applies to `