🏷️ Obscure HTML Elements
Exploring lesser-known but semantically meaningful HTML elements
The <mark> element
Used to highlight or mark text for reference purposes, showing relevance in a particular context.
Using <mark> in a blockquote can be used to highlight sections of the quote that are particularly relevant to your current discussion.
The <time> element
Represents a specific period in time with a machine-readable datetime attribute.
The event will take place on . This helps search engines and assistive technologies understand the exact date being referenced.
The <output> element
Represents the result of a calculation or user action. The for attribute can list the ids of all contributing inputs.
The <abbr> element
Use this for abbreviations and acronyms. The title attribute provides the full expansion.
Examples: abbr,
mm,
mph,
kph,
HTML, and
CSS.
The <dfn> element
The definition element marks the term being defined within a sentence.
Use it only when first defining a term. Subsequent uses don't need <dfn>.
CSS is a language used to style HTML documents on the web.
💡 Why Use These?
These semantic elements improve:
- Accessibility - Screen readers can better interpret content
- SEO - Search engines understand content meaning
- Maintainability - Code is more self-documenting
- Future-proofing - Browsers can add special features for semantic elements