data-* attributes are the standard place to put per-element state and configuration: a card's data-card-id, a tab's data-active, a button's data-target. They are valid HTML, do not collide with future spec additions, and round-trip cleanly between CSS attribute selectors and the JavaScript element.dataset API. The naming convention is kebab-case in HTML (data-user-id) and camelCase in JS (element.dataset.userId). Use them for state machines and small config; do not abuse them for large blobs of JSON, since attributes are strings and parsing on every read is wasteful (use a <script type="application/json"> tag for that).

These five elements are the semantic equivalents of <span> for specific kinds of inline content. <mark> says "this text is highlighted/relevant in the surrounding context", which is far more meaningful than a yellow-background CSS class. <kbd>, <samp>, and <var> form a trio for technical writing: keyboard input, sample program output, and mathematical or programming variables. <dfn> marks the first occurrence of a term being defined, which screen readers can use to navigate jargon. Reach for these before wrapping text in a generic <span> because they carry meaning to assistive tech, search engines, and even browsers' reader modes.

Multi-source media elements let the browser pick the best format it can play; list more efficient codecs first (WebM/Opus) and fall back to MP4/MP3. The <track> element adds captions and subtitles via WebVTT files, which is a baseline accessibility requirement, not a nicety; mark the default language with the default attribute. The preload attribute controls how much of the media the browser pre-fetches: none saves bandwidth for off-screen players, metadata (the implicit default) loads just enough to show duration and dimensions, auto lets the browser load as much as it wants. Always include fallback content (a download link or a paragraph) inside the element so users on legacy browsers still see something.