HTML Attributes – The Complete Guide

<!-- Syntax: element name, then space, then name="value" -->
<a href="https://ylearner.org" target="_blank">ylearner</a>
<!--  ^ element   ^ attribute 1              ^ attribute 2  -->

<img src="/assets/logo.png" alt="ylearner logo" width="120">

<input type="email" id="email" name="email" required placeholder="you@example.com">

<!-- Fragment link: clicking this jumps to the section below -->
<a href="#about">Jump to About section</a>

<!-- Target section with id -->
<section id="about">
  <h2>About ylearner</h2>
  <p>Free coding tutorials for everyone.</p>
</section>

<!-- CSS targeting -->
<style>
  #about { background: #f0f4ff; padding: 2rem; }
</style>

<!-- JavaScript targeting -->
<script>
  const about = document.getElementById('about');
  about.style.border = '2px solid blue';
</script>

<!-- Multiple classes on one element -->
<button class="btn btn-primary btn-large">Start Learning</button>

<!-- Multiple elements sharing the same class -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card--featured">Featured Card</div>

<!-- CSS targeting all cards -->
<style>
  .card { border: 1px solid #dee2e6; padding: 1rem; border-radius: 8px; }
  .card--featured { border-color: #0d6efd; }
</style>

<!-- JavaScript targeting all cards -->
<script>
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => card.classList.toggle('card--active'));
  });
</script>

<!-- Acceptable: one-off dynamic styles set by JavaScript -->
<p id="status" style="color: green; font-weight: bold;">Online</p>

<!-- Better: use a class instead -->
<p id="status" class="status status--online">Online</p>

<!-- Inline styles are fine for email HTML where external CSS won't work -->
<td style="padding: 12px; background-color: #f8f9fa;">Email cell</td>

<!-- Tooltip on a link -->
<a href="/html/core-elements/tables.html" title="Learn to build data tables in HTML">
  HTML Tables
</a>

<!-- Tooltip on an abbreviation -->
<p>Written in <abbr title="HyperText Markup Language">HTML</abbr>.</p>

<!-- Tooltip on an image -->
<img src="chart.png" alt="Bar chart of course completion rates" title="Data from Jan–June 2026">

<!-- Store data on elements for JavaScript to read -->
<button class="enroll-btn" data-course-id="html-101" data-price="0">
  Enrol Free
</button>

<ul class="lesson-list">
  <li data-lesson-id="1" data-duration="5">Introduction to HTML</li>
  <li data-lesson-id="2" data-duration="8">HTML Document Structure</li>
  <li data-lesson-id="3" data-duration="10">Block vs Inline Elements</li>
</ul>

// Read data attributes with dataset
const btn = document.querySelector('.enroll-btn');
console.log(btn.dataset.courseId);  // "html-101"
console.log(btn.dataset.price);     // "0"

// dataset uses camelCase for hyphenated attribute names
// data-course-id  →  dataset.courseId
// data-lesson-id  →  dataset.lessonId

// Iterate over lessons and total their duration
let totalMinutes = 0;
document.querySelectorAll('[data-duration]').forEach(item => {
  totalMinutes += parseInt(item.dataset.duration, 10);
});
console.log(`Total: ${totalMinutes} minutes`); // "Total: 23 minutes"

<!-- Boolean attributes: presence = true, absence = false -->

<!-- Disable a button -->
<button disabled>Submit</button>

<!-- Pre-check a checkbox -->
<input type="checkbox" checked>

<!-- Mark an input as required -->
<input type="email" required>

<!-- Make an input read-only -->
<input type="text" value="gmostafa1210@gmail.com" readonly>

<!-- Allow multiple file selection -->
<input type="file" multiple>

<!-- Autoplay a video (muted required in most browsers) -->
<video src="intro.mp4" autoplay muted loop></video>

<!-- Hide an element -->
<div hidden>This won't render on screen</div>

<!-- All of these are equivalent for boolean attributes: -->
<input required>
<input required="">
<input required="required">