<!-- Unique identifier -->
<section id="about">About Us</section>

<!-- Used for -->
<!-- 1. CSS targeting -->
<style>
  #about {
    background: blue;
  }
</style>

<!-- 2. JavaScript selection -->
<script>
  document.getElementById("about");
</script>

<!-- 3. Fragment links -->
<a href="#about">Jump to About</a>

<!-- 4. Label association -->
<label for="email">Email</label>
<input id="email" />

<!-- Single class -->
<div class="container">...</div>

<!-- Multiple classes -->
<button class="btn btn-primary large">Click</button>

<!-- CSS targeting -->
<style>
  .btn {
    padding: 10px;
  }
  .btn-primary {
    background: blue;
  }
  .large {
    font-size: 18px;
  }
</style>

<!-- JavaScript selection -->
<script>
  document.querySelectorAll(".btn");
  element.classList.add("active");
  element.classList.remove("active");
  element.classList.toggle("active");
</script>

<!-- Store custom data -->
<article
  data-id="123"
  data-category="technology"
  data-author-name="John Doe"
  data-published="2024-01-15"
>
  Article content...
</article>

<!-- Access via JavaScript -->
<script>
  const article = document.querySelector("article");

  // Using dataset
  console.log(article.dataset.id); // "123"
  console.log(article.dataset.category); // "technology"
  console.log(article.dataset.authorName); // "John Doe" (camelCase!)

  // Using getAttribute
  console.log(article.getAttribute("data-id")); // "123"
</script>

<!-- CSS selection -->
<style>
  [data-category="technology"] {
    border-left: 3px solid blue;
  }
  [data-published] {
    font-style: italic;
  }
</style>

<!-- Make element editable -->
<div contenteditable="true">Click here to edit this text...</div>

<!-- Rich text editor -->
<div id="editor" contenteditable="true">
  <p>Edit this content</p>
</div>

<!-- Values -->
<div contenteditable="true">Editable</div>
<div contenteditable="false">Not editable</div>
<div contenteditable="inherit">Inherits from parent</div>

<!-- Hide element from display and accessibility -->
<p hidden>This is hidden</p>

<!-- Toggle with JavaScript -->
<div id="message" hidden>Success!</div>
<script>
  document.getElementById("message").hidden = false;
</script>

<!-- Different from CSS display:none -->
<!-- hidden is semantic - element shouldn't be shown -->
<!-- display:none is presentational - element is visually hidden -->

<!-- Add to tab order (0 = natural order) -->
<div tabindex="0">Focusable div</div>

<!-- Remove from tab order but focusable via JS (-1) -->
<button tabindex="-1">Can't tab to this</button>

<!-- Custom order (avoid - confusing) -->
<input tabindex="2" />
<input tabindex="1" />
<input tabindex="3" />

<!-- Make element draggable -->
<div draggable="true">Drag me</div>

<!-- Disable default dragging (like images) -->
<img draggable="false" src="nodrag.jpg" alt="Can't drag" />

<!-- Enable spell checking -->
<textarea spellcheck="true">Check my spelling</textarea>

<!-- Disable spell checking -->
<input type="text" spellcheck="false" value="username123" />

<!-- Allow translation -->
<p translate="yes">This text may be translated.</p>

<!-- Don't translate (brand names, code) -->
<p>Developed by <span translate="no">TechCorp Inc.</span></p>