Modern HTML

Attributes that connect HTML to CSS and JavaScript, and interactive elements that browsers now provide for free, so you can write less code.

About 3 hours of study

Learning objectives

Lessons

  1. 1

    Global attributes and custom data Advanced

    The attributes every element accepts: id, class, title, hidden, lang and data-*, plus how HTML, CSS and JavaScript connect through them.

  2. 2

    Built-in interactive elements Advanced

    Disclosure widgets, dialogs, progress bars and meters that HTML provides for free, and how to reuse structure with the template element.

Module practice

Module quiz

1. You want to style six cards the same way. What do you give them?
2. Which is a valid custom attribute?
3. What is the best way to show a collapsible FAQ item?
4. Which element fits a measured value in a known range, like a score out of 10?
5. Why might a developer use template in place of building HTML strings in JavaScript?

‹ Meaningful, accessible pagesFinal assessment ›