HTML Global Attributes
Give an article a course identifier through a custom data attribute.
Understand the topic
Global attributes provide common features across HTML elements. id identifies an element, class groups styling hooks, lang sets language, dir sets text direction, and data-* stores custom application data. hidden removes content from normal display, while inert disables user interaction in a subtree. Use tabindex carefully and avoid positive values that reorder keyboard navigation.
Worked example
<p lang="fr">Bonjour</p>
<p dir="auto">Text direction follows the content.</p>
<article id="course-html" class="course" data-course="html"><h2>HTML course</h2></article>
<p hidden>This message is currently hidden.</p>Language metadata helps pronunciation, while direction addresses layout of bidirectional text. data-course is available to JavaScript as element.dataset.course.
Practice
Give an article a course identifier through a custom data attribute.
Show a suggested answer
<article data-course-id="html"><h2>HTML</h2></article>Common mistake
Do not use a positive tabindex to repair an illogical source order. Fix the document order instead.