Global Attributes Overview

<div id="container" class="main-wrapper">
  <h2 class="title" title="This is a helpful tooltip!">Global Attributes Demo</h2>
  <!-- ID and Class -->
  <p id="intro" class="highlight important">
    This paragraph has both an ID and multiple classes for styling.
  </p>
  <!-- Title attribute (tooltip) -->
  <p title="Hover over me to see the tooltip!">
    🎯 Hover to see a helpful tooltip
  </p>
  <!-- Data attributes -->
  <div
    class="user-card"
    data-user-id="12345"
    data-role="admin"
    data-active="true">
    <h3>User Profile</h3>
    <p>This element contains custom data-* attributes for JavaScript access.</p>
  </div>
  <!-- Tabindex (focus control) -->
  <div
    tabindex="0"
    class="focusable-box"
    title="Press Tab to focus on this element">
    Tab to focus me! 🎯
  </div>
  <!-- Contenteditable -->
  <p contenteditable="true" class="editable">
    ✏️ Click here to edit this text directly!
  </p>
  <!-- Hidden attribute -->
  <p id="secret" hidden>
    🔒 This paragraph is hidden by the 'hidden' attribute
  </p>
  <!-- Lang attribute -->
  <p lang="es" dir="ltr" class="spanish">
    ¡Hola Mundo! (Spanish text with lang attribute)
  </p>
  <p lang="ar" dir="rtl" class="arabic">
    مرحبا بالعالم (Arabic text with rtl direction)
  </p>
</div>

<div id="main-content" class="container primary-bg">
  <header id="page-header" class="header-section gradient-border">
    <h1 class="page-title">Global Attributes Demo</h1>
    <p class="subtitle">Master HTML identification attributes</p>
  </header>
  <section id="featured" class="featured-box highlighted">
    <h2 class="section-title">Featured Section</h2>
    <p class="section-text">
      This section uses ID for unique targeting and classes for styling.
    </p>
  </section>
  <div id="user-profile" class="card profile-card">
    <h3 class="card-title">User Profile</h3>
    <p class="card-text">Multiple classes allow flexible styling combinations.</p>
    <button class="btn btn-primary btn-lg">Get Started</button>
  </div>
  <footer id="page-footer" class="footer-section">
    <p class="footer-text">&copy; 2025 Your Site</p>
  </footer>
</div>

<h2>Product Showcase</h2>
<div class="products-container">
  <div class="product-card"
    data-product-id="001"
    data-price="99.99"
    data-category="electronics"
    data-in-stock="true"
    data-rating="4.5"
    data-tags="gadget,tech,popular">
    <div class="product-icon">📱</div>
    <h3 class="product-name">Smartphone</h3>
    <p class="product-price">$99.99</p>
    <p class="product-rating">⭐ 4.5/5 Stars</p>
    <p class="product-category">Electronics</p>
    <button class="btn-info">View Details</button>
  </div>
  <div class="product-card"
    data-product-id="002"
    data-price="199.99"
    data-category="electronics"
    data-in-stock="true"
    data-rating="4.8"
    data-tags="laptop,tech,professional">
    <div class="product-icon">💻</div>
    <h3 class="product-name">Laptop</h3>
    <p class="product-price">$199.99</p>
    <p class="product-rating">⭐ 4.8/5 Stars</p>
    <p class="product-category">Electronics</p>
    <button class="btn-info">View Details</button>
  </div>
  <div class="product-card"
    data-product-id="003"
    data-price="49.99"
    data-category="accessories"
    data-in-stock="false"
    data-rating="4.2"
    data-tags="headphones,audio">
    <div class="product-icon">🎧</div>
    <h3 class="product-name">Headphones</h3>
    <p class="product-price">$49.99</p>
    <p class="product-rating">⭐ 4.2/5 Stars</p>
    <p class="product-category">Accessories</p>
    <button class="btn-info" disabled>Out of Stock</button>
  </div>
</div>
<div class="info-box">
  <p>Click "View Details" to see product data in console (check browser DevTools)</p>
</div>

<h2>Accessibility Attributes</h2>
<div class="demo-container">
  <!-- Title attribute for tooltips -->
  <section class="section-box">
    <h3 title="This element provides helpful information on hover">Title Attribute Demo</h3>
    <p>
      <span title="Hover here to see a tooltip">Hover over this text</span> to see a helpful tooltip.
    </p>
    <div class="icon-group">
      <span title="Save your work">💾</span>
      <span title="Edit content">✏️</span>
      <span title="Delete item">🗑️</span>
    </div>
  </section>
  <!-- Language attribute -->
  <section class="section-box">
    <h3>Language Attribute</h3>
    <p lang="en">English: Hello, Welcome to our website!</p>
    <p lang="es">Spanish: ¡Hola, Bienvenido a nuestro sitio web!</p>
    <p lang="fr">French: Bonjour, Bienvenue sur notre site Web!</p>
    <p lang="de">German: Hallo, Willkommen auf unserer Website!</p>
  </section>
  <!-- Direction attribute -->
  <section class="section-box">
    <h3>Text Direction</h3>
    <p dir="ltr" class="text-ltr">
      ← Left to Right (English, German, French)
    </p>
    <p dir="rtl" class="text-rtl">
      اليمين إلى اليسار (العربية - Right to Left)
    </p>
    <p dir="rtl" class="text-rtl">
      מימין לשמאל (עברית - Hebrew)
    </p>
  </section>
  <!-- Combined example -->
  <section class="section-box highlight-box">
    <h3>Combined Accessibility Example</h3>
    <p lang="ar" dir="rtl" title="This text is in Arabic, displayed right-to-left">
      هذا نص توضيحي يجمع بين السمات المختلفة
    </p>
  </section>
</div>

<h2>Interactive Content Demo</h2>
<div class="container">
  <!-- Contenteditable Example -->
  <section class="demo-section">
    <h3>✏️ Editable Content</h3>
    <div class="editable-box" contenteditable="true">
      Click here and start typing! This entire section is editable.
      You can format text, add line breaks, and make changes directly in the browser.
    </div>
    <p class="instruction">Try editing the box above - changes are live!</p>
  </section>
  <!-- Hidden/Show Toggle -->
  <section class="demo-section">
    <h3>👁️ Visibility Control</h3>
    <button class="toggle-btn" onclick="toggleElement('secret-content')">
      Show Secret Content
    </button>
    <div id="secret-content" hidden class="hidden-box">
      🎉 This was hidden! Click the button again to hide it.
    </div>
  </section>
  <!-- Multiple Hidden Elements -->
  <section class="demo-section">
    <h3>📋 Expandable Sections</h3>
    <button class="toggle-btn" onclick="toggleElement('details-1')">
      Details 1
    </button>
    <div id="details-1" hidden class="details-box">
      <p>First expandable section with hidden attribute.</p>
    </div>
    <button class="toggle-btn" onclick="toggleElement('details-2')">
      Details 2
    </button>
    <div id="details-2" hidden class="details-box">
      <p>Second expandable section with hidden attribute.</p>
    </div>
  </section>
  <!-- Tabindex for Focus -->
  <section class="demo-section">
    <h3>⌨️ Focus Management</h3>
    <div class="focusable-card" tabindex="0" title="Press Tab to focus this element">
      Press Tab to focus me, then use keyboard to interact
    </div>
  </section>
</div>