Foundations · advanced · Concept graph
data-* attributes
data-* attributes is an HTML concept in Avora Learn's visual programming encyclopedia — part of building structured, accessible web pages.
Definition
data-* attributes is an HTML concept in Avora Learn's visual programming encyclopedia — part of building structured, accessible web pages.
Visual
data-* attributes is one tile in the HTML structure mosaic.
Animation and voice-synced diagrams live in the interactive lesson.
Why use it
Understanding data-* attributes helps you write clearer markup that browsers, assistive tech, and search engines can interpret correctly.
When to use it
Use data-* attributes whenever your page structure or content needs this building block in a real HTML document.
Advantages
- Makes page meaning clearer for browsers and learners
- Connects to related HTML concepts in Avora's concept graph
Watch-outs
- Misusing data-* attributes can confuse outlines and accessibility tools
- Does not replace CSS or JavaScript by itself
Interactive demo
Sandboxed playgrounds and voice-synced visuals run in Avora's classroom — start the lesson to try this concept hands-on.
Browse HTML hub →Common errors
- Using data-* attributes without understanding its parent concepts in the document tree.
- Treating data-* attributes as a visual style tool instead of structural meaning (use CSS for look).
Interview
What is data-* attributes?
data-* attributes is an HTML concept in Avora Learn's visual programming encyclopedia — part of building structured, accessible web pages.
Quiz
1. data-* attributes primarily belongs to which layer of the web?