Tabula Rasa logo — the DevTools box model diagram Tabula Rasa The CSS Periodic Table Taxonomy of All HTML Elements

Every HTML element arrives with baggage.

<h1> is enormous and bold. <ul> has bullets and indentation you never asked for. <blockquote> sits forty pixels in from the edge for reasons rooted in 1990s print conventions. Browsers ship a user-agent stylesheet, and that stylesheet has opinions.

This project strips those opinions away — one element at a time.

The logo is the thesis.

That box at the top of the page isn't decoration. It's the DevTools box model — margin, border, padding, content — the diagram every developer sees the moment they open the inspector. Tabula Rasa is built around what's actually in the browser, not what the specification claims. The logo states the method up front: open the inspector, look at the real thing, then decide.

A periodic table for HTML.

Every HTML element is a tile. Like a chemistry periodic table encodes atomic number, mass, and electron configuration, this taxonomy encodes three properties for every element:

The properties are visible on every tile; the colour is the element's group. Four facts per element, readable at a glance, no documentation required to parse them.

Cosmetics, not semantics.

This project sorts HTML by how browsers render elements, not by what the spec says they mean. MDN and the WHATWG explain why <em> emphasises and why <address> marks contact information — they do that work better than any one person could. Tabula Rasa catalogues cosmetics: the shape, size, weight, style, decoration, and spacing the browser applies by default, and how to strip it. <address> lives in Vanity because the browser renders it italic, not because italic is what it semantically deserves. <sub> and <sup> live in Size because they shrink and shift, not because subscript carries chemical meaning. The project is honest about its scope: appearance, not meaning. For meaning, the spec is still over there.

Groups with attitude.

Most HTML references use functional labels — sectioning, phrasing, metadata, embedded. Accurate but anonymous. Tabula Rasa names every group as a claim about what its elements are. Vanity for the purely presentational (<b>, <i>, <u>) — elements that exist to make text look a certain way and admit to nothing more. Ghosts for parser-level constructs that aren't really elements at all (<!DOCTYPE>, comments, CDATA). Zombie for the deprecated dead that browsers refuse to bury (<big>, <acronym>, <strike>, <tt>). Taxonomy with a voice.

The tug of war.

HTML is not a one-way street. Some elements are proposed by standards bodies and never implemented by browsers — they exist only on paper. Others are invented by browser vendors, shipped to millions of users, and only later (if ever) become standards. Tabula Rasa documents both.

<command> died in a specification. <marquee> lived in browsers. <template> came from both. The periodic table does not care where an element came from. It only cares what the browser actually does — and that story is messy, political, and fascinating.

This catalogue is not a love letter to the standards process. It is a map of the battlefield.

A 20px grid, hidden in plain sight.

The reset establishes a typographic spine: 10px at the root, 14px body text, 20px line height. Every phrasing element — <b>, <em>, <code>, <span>, every text-level tag — is reset to display: inline-block, not inline. This is deliberate. An inline element has no measurable height in DevTools — the inspector shows the line-box, not the element. inline-block makes every element a real, inspectable box, snapped to one 20px grid cell, ready to be measured, padded, and reasoned about. The reset's job is verifiability as much as neutralisation.

Open the inspector.

Every element gets its own page. Every page shows the user-agent stylesheet on the left and the Tabula Rasa reset on the right, each rendered inside a live inspect-me iframe. The CSS rules are printed beneath. Below them, editorial commentary explains why <u> uses text-decoration: underline, why <body> has eight pixels of margin, why <hgroup> was dropped and resurrected. The prose isn't a label affixed to the code — it's the project's voice explaining a system to a reader who is presumed adult, curious, and capable of opening DevTools to confirm what the browser is actually doing.

Opt in, zero specificity, no apology.

Every reset rule is wrapped in :where(), which contributes zero specificity to the cascade — your author styles always win without !important, without specificity wars, without inherited surprises. The reset is also opt-in: rules apply only to elements that carry the matching data-* attribute. <html data-html> activates the root reset. <body data-body> activates the body reset. <p data-p> resets a paragraph. The author chooses, element by element, where the reset takes effect. Nothing happens to elements that don't ask for it.

Interaction-state pseudo-classes — :link, :visited, :hover, :active, :focus-visible — are also neutralised. This is a real trade-off: keyboard users rely on visible focus indication. The reset removes it on the bet that the author will put it back, deliberately, in the style they want. If you use this reset, add your focus styles back.

Built to grow.

HTML evolves. New elements slot into existing groups when they fit; new groups arrive when no existing one can honestly absorb them; deprecated elements move to Zombie. What's meant to be durable is the way of seeing — named groups, four-axis tiles, side-by-side verification — not the specific contents of any one column.

↓ tabula_rasa.css 17 KB

AI-generated overview

This is an 8-minute video overview of the project, generated by Google's NotebookLM from the catalogue's source files. The voices are not real people; their interpretations are computational.

This entire section is wrapped in the <ai> element — the same element the catalogue's Proposed group argues for. A standard marker for AI-generated content. Until that proposal lands somewhere real, this is how the project uses it on itself.

  • infinite.svg one.svg Cardinality
  • block.svg inline.svg display.svg Layout
  • non_void.svg void.svg no_close.svg Voidity

Proposed proposed_group.svg

AI <ai></ai> ai.svg

User Agent StyleSheet

<ai>AI-generated content goes here</ai>
element.style {
}

Tabula Rasa StyleSheet

<ai data-ai>AI-generated content goes here</ai>
:where([data-ai]) {
	display: inline-block;
}
Comments : -
  • Semantics: proposed element — not in any specification, working group, or browser roadmap. Proposed here as a semantic container for AI-generated content (text, images, code, video, audio). Catalogue groups it under Proposed — elements that do not yet exist but should.
  • Group: Proposed Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <div class="ai-generated"> with ARIA label "AI-generated content". No native semantic element for AI content currently exists.
  • User Agent: no CSS rules — element.style { }. Browser implies display: inline for any unrecognised element.
  • Tabula Rasa: promotes it to display: inline-block — AI-generated text typically appears as inline phrases within prose, but authors should be able to apply width, height, and vertical spacing.
  • Note: useful for accessibility — screen readers could announce "AI-generated" before reading content. Could be styled to visually distinguish AI content from human-written content (e.g., gray background, italic, special border). As AI-generated content becomes more common on the web, a semantic marker becomes increasingly necessary — both for transparency and for regulatory compliance (EU AI Act, disclosure requirements).
  • Verdict: Worth proposing — but we wait and see. Likely to appear in some form within 5 years.
  • MDN Web Docs — No entry (proposed element)
  • Can I Use — No support (proposed element)

Advertisement <add></add> add.svg

User Agent StyleSheet

<add>
	Advertisement content
</add>
element.style {
}

Tabula Rasa StyleSheet

<add data-add>
	Advertisement content
</add>
:where([data-add]) {
	display: block;
}
Comments : -
  • Semantics: proposed element — not in any specification, working group, or browser roadmap. Proposed here as a semantic container for advertisements. Catalogue groups it under Proposed — elements that do not yet exist but should.
  • Group: Proposed Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div class="advertisement"> with ARIA role role="region" or role="complementary". No native semantic element for ads currently exists.
  • User Agent: no CSS rules — element.style { }. Browser implies display: inline for any unrecognised element.
  • Tabula Rasa: overrides to display: block — most advertisements are block-level interruptions in flow (banner ads, sidebar boxes, in-article placements), not inline annotations.
  • Note: could enable native browser ad-blocking, privacy controls, and accessibility announcements (screen readers could announce "advertisement" before reading content). Politically difficult to implement because advertising networks fund the web, and browser vendors are conflicted. The <add> proposal is deliberately provocative — a test of whether the platform prioritizes users or advertisers.
  • Verdict: Great idea — but politically difficult to implement. Unlikely to ever ship, but worth proposing to start the conversation.
  • MDN Web Docs — No entry (proposed element)
  • Can I Use — No support (proposed element)

Document document_group.svg

Html <html></html> html.svg

User Agent StyleSheet 

<html>
</html>
html[Attributes Style] {
	-webkit-locale: "en";
}

:root {
	view-transition-name: root;
}

html {
	display: block;
}

Tabula Rasa StyleSheet 

<html data-html>
</html>
:where([data-html]) {
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 1; /* 10px */
}

:where([data-html]) {
	color-scheme: light;
	color: #000;
	background-color: #fff;
}

@media (prefers-color-scheme: dark) {
	:where([data-html]) {
		color-scheme: dark;
		color: #fff;
		background-color: #000;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:where([data-html]) {
		scroll-behavior: smooth;
	}
}
Comments : -
  • Semantics: the root element of the document — the wrapper every HTML page is. Targetable by the html selector and the :root pseudo-class, but :root has higher specificity. Catalogue groups it under Document — the structural foundation of every page.
  • Group: Document Cardinality: One Layout: Block Voidity: Non Void
  • Alternatives: none. <html> is structurally mandated — every HTML document has exactly one. The parser will insert an implicit html element if you omit it, but that's the browser fixing your mistake, not an alternative.
  • User Agent: applies display: block. The -webkit-locale attribute style is browser-internal (sets document language). The :root pseudo-class gets view-transition-name: root for cross-document view transitions. Font-family, font-size, and line-height come from the user's system and browser preferences (Times New Roman, 16px, line-height normal). DevTools shows these under Computed, not user-agent stylesheet.
  • Tabula Rasa: substitutes the cascade's typography baseline — Arial, 10px, black on white. The 10px root anchors the project's rem system. The reset detects the user's light/dark preference via prefers-color-scheme and sets explicit colors accordingly — light mode: black on white, dark mode: white on black. scroll-behavior: smooth is applied conditionally: only when the user has prefers-reduced-motion: no-preference, respecting accessibility settings for users with vestibular disorders. Tested and confirmed working.
  • Note: the element you can legally omit and still get. The HTML parser constructs an <html> automatically — any document without one gets an implicit root. The reset does not use CanvasText or system color keywords — those delegate color decisions to the OS, which is the kind of external opinion this reset exists to strip away. Authors who want different dark mode colors can override these rules.
  • Verdict: the invisible wrapper you never style directly, but every CSS reset touches it because it controls the root font size that powers rem units across the entire page. Smooth scrolling is opt-in and motion-aware. Light/dark colors respect user preference without delegating to system keywords.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Body <body></body> body.svg

User Agent StyleSheet 

<body>
</body>
body {
	display: block;
	margin: 8px;
}

Tabula Rasa StyleSheet 

<body data-body>
</body>
:where([data-body]) {
	margin: 0px;
	font-size: 1.4rem; /* 14px */
	line-height: 1.428571428571429;	/* 20px */
}
Comments : -
  • Semantics: the container for all rendered content — one of only two children the <html> element permits, the other being <head>. Catalogue groups it under Document — the visible half of every HTML page.
  • Group: Document Cardinality: One Layout: Block Voidity: Non Void
  • Alternatives: none. <body> is structurally mandated — every HTML document has exactly one. The parser will insert an implicit body if you omit it, but that's the browser fixing your mistake, not an alternative.
  • User Agent: applies display: block and margin: 8px. The 8px margin is the conventional viewport gutter inherited from the 1990s.
  • Tabula Rasa: removes the margin (margin: 0px) and sets the typography baseline — font-size: 1.4rem (14px) with line-height: 1.428571428571429 (20px), a clean 14/20 vertical rhythm. The display: block is preserved as it's structural, not cosmetic.
  • Note: the element you can legally omit and still get. The HTML parser constructs a <body> automatically — any content written before a <body> tag gets scooped into an implicit body. The body's background-color and background-image also propagate to the viewport canvas when <html>'s background is unset — which is why setting a background on <body> fills the entire window, not just the content area.
  • Verdict: the visible container you almost never think about, but everything you see lives inside it. The reset's margin removal is the first step toward predictable layouts.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Blocks blocks_group.svg

Divisions <div></div> division.svg

User Agent StyleSheet 

<div>
	Division
</div>
div {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<div data-div>
	Division
</div>
:where([data-div]) {
}
Comments : -
  • Semantics: the generic flow container — no semantic meaning, just a styling and scripting hook when no more specific element fits. Catalogue groups it under Blocks, where block-layout flow containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a semantic element when one fits — <section> for thematic content, <article> for self-contained pieces, <aside> for tangential content, <nav> for navigation, <header>/<footer>/<main> for document structure. Reach for <div> only after exhausting the semantic options.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout, not a cosmetic; unicode-bidi: isolate governs how bidirectional text (Arabic, Hebrew) interacts with surrounding content — a behaviour the reset has no business removing.
  • Note: the most-used HTML element on the web. Authors reach for it constantly, often when a semantic element would serve better. Frameworks (React, Vue) generate <div>s by the thousands per page. Together with <span>, it's the universal solvent of HTML — dissolves any other element if you stop thinking about meaning.
  • Verdict: the element that won by saying nothing. Use it last, not first.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headers <header></header> header.svg

User Agent StyleSheet 

<header>
	Header
</header>
header {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<header data-header>
	Header
</header>
:where([data-header]) {
}
Comments : -
  • Semantics: the introductory container — title bars, mastheads, section openings. Scoped to its nearest sectioning ancestor, not the document; a page can have many headers, one per article or section. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div role="banner"> when only the page-level masthead is intended and pre-HTML5 accessibility-tree compatibility matters. A plain <div> with a class when the element exists only as a styling hook, not a sectioning landmark.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the most-used and least-understood sectioning element of HTML5. The spec scopes <header> to its nearest <article>, <section>, <aside>, or <nav> — so an article's header is the article's masthead, not the page's. In production, virtually nobody honours this; <header> shows up as button bars, card titles, navigation, breadcrumbs — anywhere a div would have done.
  • Verdict: HTML5's semantic ambition met production's pragmatism, and pragmatism won. The element is now a slightly-more-semantic div.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Main <main></main> main.svg

User Agent StyleSheet 

<main>
	Main
</main>
main {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<main data-main>
	Main
</main>
:where([data-main]) {
}
Comments : -
  • Semantics: the dominant content container — the one Block element you use exactly once. One <main> per document, holding the central content unique to that page; not nested inside <article>, <aside>, <header>, <footer>, or <nav>. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: One Layout: Block Voidity: Non Void
  • Alternatives: <div role="main"> for pre-HTML5 accessibility-tree compatibility — the ARIA role predates the element and still works. Otherwise none: <main> is the purpose-built answer, and there's no reason to substitute when you can use the real thing.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the only sectioning element the spec restricts to a single instance. Screen readers expose it as the "main content" landmark — "skip to main content" jumps here. The one-per-page rule isn't enforced by browsers (you can write three and nothing breaks visually), but assistive technology assumes exactly one, and multiple <main> elements confuse the landmark navigation it powers.
  • Verdict: the rare HTML5 element with a clear, enforceable contract — one per page, holds the point of the page. Honoured, it makes "skip to content" work. Ignored, it quietly breaks the feature it exists to provide.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Sections <section></section> section.svg

User Agent StyleSheet 

<section>
	Section
</section>
section {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<section data-section>
	Section
</section>
:where([data-section]) {
}
Comments : -
  • Semantics: the generic thematic block — content that belongs together and is introduced by a heading. The fallback when <article>, <aside>, and <nav> don't fit. A section without a heading is technically wrong; use <div> instead. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> when the grouping is purely visual and carries no thematic meaning — if there's no heading and no reason a screen reader should announce a boundary, a div is the honest choice. <article> when the content is self-contained and independently distributable.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the most misused sectioning element after <header>. The spec is explicit — <section> needs a heading to be meaningful, because it represents a thematic grouping that should appear in the document outline. In practice it gets used as a styling wrapper, a layout box, a generic container — exactly the job <div> exists to do. The document-outline algorithm that would have made <section> meaningful was never implemented by browsers, which removed the last practical reason to choose it over a div.
  • Verdict: an element whose whole purpose depended on an outline algorithm that never shipped. Without it, <section> is a div that makes you feel more semantic. Use it only when a real heading justifies it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Articles <article></article> article.svg

User Agent StyleSheet 

<article>
	Article
</article>
article {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<article data-article>
	Article
</article>
:where([data-article]) {
}
Comments : -
  • Semantics: the syndicatable block — content that stands on its own and could be lifted out of the page intact. Blog posts, news stories, forum comments, product cards. If it makes sense in an RSS feed, it's an article. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <section> when the content is a thematic grouping within a page rather than an independently distributable unit, and <div> when there's no self-contained meaning at all. The test is portability: if it wouldn't make sense extracted and shown elsewhere, it isn't an article.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the sectioning element with the clearest test and the most consistent misuse. The "self-contained, independently distributable" definition is genuinely useful — a comment, a tweet embed, a product card all qualify, and nesting articles (comments inside a post inside a feed) is valid by design. Yet it's routinely swapped with <section> as though they were interchangeable. They're not: <article> is "could stand alone"; <section> is "part of a whole."
  • Verdict: one of the few HTML5 sectioning elements with a definition you can actually apply. The RSS-feed test settles most arguments. Used well, it's meaningful; the only real failure is confusing it with section.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Asides <aside></aside> aside.svg

User Agent StyleSheet 

<aside>
	Aside
</aside>
aside {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<aside data-aside>
	Aside
</aside>
:where([data-aside]) {
}
Comments : -
  • Semantics: the digression — content related to the page but not central to it. Sidebars, pull quotes, supplementary commentary, related-links boxes. If removing it wouldn't break the main argument, it's an aside. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> when the content is set apart purely for layout (a styled box with no tangential-content meaning), or a plain inline element for a brief parenthetical that doesn't warrant its own block. The aside is for content a reader could skip without losing the thread — not for everything that happens to sit in a sidebar.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the element everyone maps to "sidebar," which is half right and half wrong. <aside> is about relationship to content, not position on screen — a pull quote in the middle of an article is an aside; a sidebar full of primary navigation is not. The visual-sidebar association is so strong that authors reach for <aside> based on where content sits rather than what it means, which is exactly backwards.
  • Verdict: a semantically sound element undermined by its own nickname. "Sidebar" describes a position; <aside> describes a relationship. Use it for tangential content wherever it sits, not for whatever lands in the right-hand column.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Footers <footer></footer> footer.svg

User Agent StyleSheet 

<footer>
	Footer
</footer>
footer {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<footer data-footer>
	Footer
</footer>
:where([data-footer]) {
}
Comments : -
  • Semantics: the closing container — authorship, copyright, related links, contact details. Like <header>, scoped to its nearest sectioning ancestor; an article and the page can each have their own footer. Catalogue groups it under Blocks, where sectioning-level block containers live.
  • Group: Blocks Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div role="contentinfo"> for the page-level footer when pre-HTML5 accessibility-tree compatibility matters — note that only the top-level footer becomes the contentinfo landmark; nested footers inside articles don't. A plain <div> when the closing block carries no footer-meaning and exists only for layout.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text behaviour — neither is cosmetic.
  • Note: the mirror of <header>, and it inherits the same scoping rule and the same widespread confusion. A <footer> belongs to its nearest sectioning ancestor — so an article's footer (byline, tags, post date) is distinct from the page's footer (copyright, sitemap). Only the page-level one becomes the "contentinfo" landmark for screen readers; the nested ones don't. Authors who scatter footers inside every card and widget dilute nothing functionally, but they also gain nothing — the semantic weight only lands at the document level.
  • Verdict: header's bookend, with the same ambitions and the same fate. The scoping rule is real, mostly ignored, and rarely consequential. A more-semantic div that earns its keep only at the page boundary.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Nones none_group.svg

Head <head></head> head.svg

User Agent StyleSheet 

<head>
</head>
head {
	display: none;
}

Tabula Rasa StyleSheet 

<head data-head>
</head>
:where([data-head]) {
}
Comments : -
  • Semantics: the metadata container — holds <title>, <meta>, <link>, <style>, <script>. One of only two children the <html> element permits, the other being <body>. Catalogue groups it under Nones — elements the browser renders with display: none, present in the document but never drawn.
  • Group: Nones Cardinality: One Layout: None Voidity: Non Void
  • Alternatives: none. <head> is structurally mandated — every HTML document has exactly one, and the parser inserts an implicit one if you omit it. There is no substitute and no reason to want one.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. The head's contents are parsed, not rendered — they affect the page without ever appearing on it. Nothing here is cosmetic, so the reset leaves it untouched.
  • Note: one of the few elements you can omit entirely and still get. The HTML parser constructs a <head> automatically — metadata elements written before the first body content get scooped into an implicit head even if you never type the tag. It's also the rare container whose order of children matters for performance: <meta charset> must come early, render-blocking <link> and <script> placement determines how fast the page paints.
  • Verdict: the invisible half of every document. You rarely think about it, the parser builds it whether you write it or not, and yet what goes inside it decides how the visible half loads.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Metas <meta /> meta.svg

User Agent StyleSheet 

<meta />
meta {
	display: none;
}

Tabula Rasa StyleSheet 

<meta data-meta />
:where([data-meta]) {
}
Comments : -
  • Semantics: the residual metadata element — for information no other <head> element can express. Character encoding, viewport configuration, page description, HTTP-equivalent directives, Open Graph tags. Catalogue groups it under Nones — present in the document, rendered with display: none, never drawn.
  • Group: Nones Cardinality: Infinite Layout: None Voidity: Void
  • Alternatives: the dedicated <head> elements when one fits — <title> for the document title, <link> for external resources and relationships, <base> for the document base URL. Reach for <meta> only for metadata none of the purpose-built elements cover.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. A void element with no content — it speaks to the browser through its attributes, not through what it contains. Nothing cosmetic to neutralise.
  • Note: the catch-all of the head, and the element whose attributes have quietly absorbed enormous responsibility. <meta charset> decides how every byte after it is decoded — get it wrong or place it late and text breaks. <meta name="viewport"> single-handedly controls whether a page is mobile-usable. <meta name="description"> writes the snippet under your search result. <meta property="og:*"> decides what a shared link looks like on every social platform. None of it renders; all of it matters.
  • Verdict: a void tag that draws nothing and governs everything from text encoding to how the page looks when shared. The most consequential invisible element in HTML.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Title <title></title> title.svg

User Agent StyleSheet 

<title>title</title>
title {
	display: none;
}

Tabula Rasa StyleSheet 

<title data-title>title_data</title>
:where([data-title]) {
}
Comments : -
  • Semantics: the document's title — the text shown in the browser tab, the window chrome, the bookmark name, the search result heading. Exactly one per document, and it must live inside <head>. Catalogue groups it under Nones — present in the document, rendered with display: none, never drawn on the page itself.
  • Group: Nones Cardinality: One Layout: None Voidity: Non Void
  • Alternatives: none. <title> is the only element that sets the document title — no <meta> variant, no attribute, no API substitute (JavaScript's document.title just writes through to this element). Every document must have exactly one.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. The text inside is consumed by the browser chrome — the tab, the title bar, the bookmark — never the page body. Nothing cosmetic to neutralise.
  • Note: the most-read text you'll ever write that never appears on your page. It's the tab label across dozens of open windows, the bookmark name, the clickable blue heading in every search result, the title of the link when shared without Open Graph tags. SEO weighs it heavily — for many pages the <title> is the single strongest on-page ranking signal. A handful of words, rendered nowhere, doing more work than most of the visible page.
  • Verdict: invisible on the page, omnipresent everywhere else. The rare element whose entire job happens outside the document it lives in.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Base <base /> base.svg

User Agent StyleSheet 

<base />
base {
	display: none;
}

Tabula Rasa StyleSheet 

<base data-base />
:where([data-base]) {
}
Comments : -
  • Semantics: the document base URL and default link target. A void metadata element that lives in <head>, at most one per document. Catalogue groups it under Nones — rendered with display: none, never drawn on the page itself.
  • Group: Nones Cardinality: One Layout: None Voidity: Void
  • Alternatives: none. <base> is the only way to set a document-wide base URL. The same effect can be achieved per-link with absolute URLs, but that defeats the purpose.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. A void element with no content — its href and target attributes do the work. Nothing cosmetic to neutralise.
  • Note: the most dangerous element in HTML. A single <base> changes the resolution of every relative URL on the page — src="./image.png", href="page.html", even anchor links #section break. It also breaks single-page application routing, fragment navigation, and any JavaScript that assumes relative paths. Most developers never use it; those who do often regret it.
  • Verdict: powerful, destructive, and almost never necessary. Use only when you fully understand the consequences — which is why almost no one uses it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Styles <style></style> style.svg

User Agent StyleSheet 

<style>
</style>
style {
	display: none;
}

Tabula Rasa StyleSheet 

<style data-style>
</style>
:where([data-style]) {
}
Comments : -
  • Semantics: the inline CSS container — holds style rules that apply to the document. Conventionally placed in <head>, but allowed in <body> for component-level or scoped styles. Catalogue groups it under Nones — rendered with display: none, never drawn on the page itself.
  • Group: Nones Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: external stylesheets via <link> when you want cacheable, reusable styles across multiple pages. Inline styles via the style attribute for single-element exceptions. CSS-in-JS libraries for component-scoped styles in frameworks.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. The text inside is parsed as a stylesheet — the element is invisible, but its rules govern everything else on the page. Nothing cosmetic to neutralise.
  • Note: the invisible workhorse. Every line of CSS you've ever written that wasn't in an external .css file lives inside a <style> tag. It's also the historical reason "inline styles" are called that — they're in the style attribute, which is different from the <style> element. The naming confusion has plagued beginners for two decades.
  • Verdict: essential for quick prototypes, component-scoped styles, and critical-path CSS. Use external stylesheets for production, but know that <style> is always there when you need it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Scripts <script></script> script.svg

User Agent StyleSheet 

<script>
</script>
script {
	display: none;
}

Tabula Rasa StyleSheet 

<script data-script>
</script>
:where([data-script]) {
}
Comments : -
  • Semantics: the code container — embeds or references executable code, most commonly JavaScript, but also data blocks and module imports. Permitted in both <head> and <body>; loading behaviour is controlled by the async, defer, and type attributes. Catalogue groups it under Nones — rendered with display: none, never drawn on the page itself.
  • Group: Nones Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: <script src="..."> for external JavaScript files (better for caching and separation of concerns). <link rel="modulepreload"> for ES modules. onclick and other inline event handlers (not recommended — mixes behavior with structure).
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. The text inside is parsed as code, not rendered — the element is invisible, but its instructions move the page. Nothing cosmetic to neutralise.
  • Note: the element that made the web dynamic. Before <script>, every page was static HTML. After, everything changed — popups, form validation, AJAX, single-page apps, React, Vue, Angular, the entire modern frontend stack. It's also the reason your page might take 5 seconds to load while 3MB of JavaScript parses and executes. The same tag that brings interactivity also brings performance problems.
  • Verdict: the most powerful element in HTML, for better and worse. Use external files, learn async/defer, and remember: with great power comes great bundle size.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

No Scripts <noscript></noscript> no_script.svg

User Agent StyleSheet 

<noscript>
	No Script
</noscript>
element.style {
}

Tabula Rasa StyleSheet 

<noscript data-noscript>
	No Script
</noscript>
:where([data-noscript]) {
}
Comments : -
  • Semantics: the script-fallback element — content rendered only when JavaScript is disabled, unsupported, or blocked. Permitted in both <head> and <body>. Catalogue groups it under Nones — its visibility is parser-controlled, not CSS-controlled.
  • Group: Nones Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: progressive enhancement — build your site to work without JavaScript first, then add JS on top. <script> with noscript content is a signal of failure to progressively enhance, not a strategy itself.
  • User Agent: no CSS rules — element.style { }. The element's behaviour is parser-level, not style-level. With JS enabled, the parser excludes <noscript> children from the DOM entirely — the element is invisible. With JS disabled, the content is inserted and rendered as block-level text.
  • Tabula Rasa: empty rule. There's no cosmetic baggage to neutralise. The reset acknowledges that <noscript> operates outside CSS control.
  • Note: the element that admits failure. Every time you write <noscript>, you're declaring: "This page breaks without JavaScript." The modern web has moved toward progressive enhancement, where the site works without JS and <noscript> becomes unnecessary. But for dashboards, SPAs, and tools that genuinely require JS, <noscript> is the politest way to tell users: "Turn on JavaScript or leave."
  • Verdict: a band-aid for a deeper problem. Use it when you must, but prefer building sites that don't need it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Templates <template></template> template.svg

User Agent StyleSheet 

<template>
	Template
</template>
template {
	display: none;
}

Tabula Rasa StyleSheet 

<template data-template>
	Template
</template>
:where([data-template]) {
}
Comments : -
  • Semantics: the inert-markup container — HTML that's parsed by the browser but neither rendered nor executed. The contents live in a document fragment accessible via the content property, typically cloned into the live document by JavaScript or instantiated by web components. Catalogue groups it under Nones — rendered with display: none, never drawn on the page itself.
  • Group: Nones Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: hidden <div> with display: none (clunky, content still loads but is invisible). JavaScript template literals with innerHTML (no parsing protection). <script type="text/template"> (the pre-<template> hack). The <template> element is the only standard way to declare inert, parseable HTML that stays inert until activated.
  • User Agent: applies display: none.
  • Tabula Rasa: preserves it. Inside is real markup that doesn't render — inert until cloned into the live DOM, where the clones render as ordinary elements. Nothing cosmetic to neutralise.
  • Note: the element that made web components viable. Before <template>, frameworks invented their own ways to declare reusable markup — script tags with weird types, hidden divs, strings in JavaScript. <template> gave the platform a standard way: parse it, keep it inert, give me a clone when I ask. It's also the element most developers have never written directly, because React, Vue, and Angular all generate <template> internally from their own syntax.
  • Verdict: invisible infrastructure that powers every component framework. You rarely write it, but it's working for you every time you reuse a component.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Slot <slot></slot> slot.svg

User Agent StyleSheet

<slot>Default content</slot>
slot {
	display: contents;
}

Tabula Rasa StyleSheet

<slot data-slot>Default content</slot>
:where([data-slot]) {
}
Comments : -
  • Semantics: the Web Components projection point — used inside a shadow DOM to receive light-DOM content from the host. Any content between the slot's opening and closing tags serves as fallback when nothing is projected in. Catalogue groups it under Nones — the element generates no box of its own; projected content participates in the host's layout as if the slot weren't there.
  • Group: Nones Cardinality: Infinite Layout: contents Voidity: Non Void
  • Alternatives: none. <slot> is the only standard way to project light-DOM content into a shadow DOM. Before slots, web components used the deprecated <content> element (Web Components v0). Without slots, you'd pass content via JavaScript properties or attributes — clumsy, non-declarative, and invisible to CSS.
  • User Agent: applies display: contents — the element generates no box of its own. Its children are rendered as if they belonged directly to the parent. The slot itself is invisible to layout, but its projection behavior is governed by the shadow DOM spec, not CSS.
  • Tabula Rasa: preserves display: contents. This is not cosmetic — it's structural. Changing it would break how slots project content. The reset leaves it untouched.
  • Note: the element that made web components composable. <slot> is the reason you can write <my-button>Click Me</my-button> and have "Click Me" appear inside the button's shadow DOM. Before slots, every web component had to reinvent content projection. After slots, declarative composition became standard. The element itself never renders — display: contents makes it a ghost — but its children render exactly where you want them.
  • Verdict: invisible, indispensable, and the cornerstone of modern web components. You'll rarely write it directly (your framework's compiler does), but every reusable UI library depends on it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings headings_group.svg

Headings 1 <h1></h1> heading_1.svg

User Agent StyleSheet 

<h1>Heading 1</h1>
h1 {
	display: block;
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h1 data-h1>Heading 1</h1>
:where([data-h1]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the highest-rank heading — the principal title of its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="1" when you need a heading but cannot use <h1> (rare). Lower-rank headings (<h2>–<h6>) for subsections.
  • User Agent: applies display: block, font-size: 2em, margin-block-start: 0.67em, margin-block-end: 0.67em, font-weight: bold, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: multiple <h1> elements per document are technically valid under HTML5 sectioning semantics — each sectioning root can have its own <h1>. However accessibility guidance strongly favours one <h1> per page as the document's primary title. Screen reader users rely on heading structure to navigate; multiple top-level headings create confusion.
  • Verdict: the most important heading on your page. Use it once, make it count, and don't let the reset's visual stripping trick you into thinking it's less important — the semantics remain.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings 2 <h2></h2> heading_2.svg

User Agent StyleSheet 

<h2>Heading 2</h2>
h2 {
	display: block;
	font-size: 1.5em;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h2 data-h2>Heading 2</h2>
:where([data-h2]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the second-rank heading — a major subdivision within its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="2" when you need a heading but cannot use <h2> (rare). Higher or lower rank headings for different section levels.
  • User Agent: applies display: block, font-size: 1.5em, margin-block: 0.83em, font-weight: bold, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: same reset pattern as h1. The UA applies a smaller font size (1.5em vs 2em) and larger margins (0.83em vs 0.67em) for h2. The reset removes all of it — every heading becomes visually identical. This is intentional: the reset does not assume what your heading hierarchy should look like. That decision belongs to your design system, not the browser.
  • Verdict: a major structural heading. Use it to denote major sections under the main h1. The reset strips its visual weight, but screen readers still announce it as a level-2 heading.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings 3 <h3></h3> heading_3.svg

User Agent StyleSheet 

<h3>Heading 3</h3>
h3 {
	display: block;
	font-size: 1.17em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h3 data-h3>Heading 3</h3>
:where([data-h3]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the third-rank heading — a subsection within its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="3" when you need a heading but cannot use <h3> (rare). Higher or lower rank headings for different section levels.
  • User Agent: applies display: block, font-size: 1.17em, margin-block-start: 1em, margin-block-end: 1em, font-weight: bold, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: same reset pattern as h1 and h2. The UA applies a smaller font size (1.17em) and larger margins (1em) compared to higher-rank headings. The reset removes all of it — every heading becomes visually identical. This is intentional: the reset does not assume what your heading hierarchy should look like. That decision belongs to your design system, not the browser.
  • Verdict: a subsection heading. Use it for content nested under h2. The reset strips its visual weight, but screen readers still announce it as a level-3 heading.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings 4 <h4></h4> heading_4.svg

User Agent StyleSheet 

<h4>Heading 4</h4>
h4 {
	display: block;
	margin-block-start: 1.33em;
	margin-block-end: 1.33em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h4 data-h4>Heading 4</h4>
:where([data-h4]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the fourth-rank heading — a sub-subsection within its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="4" when you need a heading but cannot use <h4> (rare). Higher or lower rank headings for different section levels.
  • User Agent: applies display: block, margin-block-start: 1.33em, margin-block-end: 1.33em, font-weight: bold, and unicode-bidi: isolate. Note that h4 has no explicit font-size in the UA stylesheet — it inherits the body's size.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: same reset pattern as h1–h3. h4 is unique among headings because the UA does not apply a specific font-size — it inherits the body size (typically 16px). The reset reaffirms this inheritance. The UA margins (1.33em) are larger than h3 (1em), continuing the pattern where lower-rank headings have more margin despite smaller visual weight. The reset removes all margins regardless of rank.
  • Verdict: a deeply nested heading. Use it for content nested under h3. The reset strips its visual weight, but screen readers still announce it as a level-4 heading.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings 5 <h5></h5> heading_5.svg

User Agent StyleSheet 

<h5>Heading 5</h5>
h5 {
	display: block;
	font-size: 0.83em;
	margin-block-start: 1.67em;
	margin-block-end: 1.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h5 data-h5>Heading 5</h5>
:where([data-h5]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the fifth-rank heading — a deeply nested heading level within its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="5" when you need a heading but cannot use <h5> (rare). Higher or lower rank headings for different section levels.
  • User Agent: applies display: block, font-size: 0.83em, margin-block-start: 1.67em, margin-block-end: 1.67em, font-weight: bold, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: same reset pattern as h1–h4. The UA applies a smaller font size (0.83em) and larger margins (1.67em) compared to higher-rank headings — a pattern where lower-rank headings get more margin despite smaller text. The reset removes all of it. Every heading becomes visually identical. This is intentional: the reset does not assume what your heading hierarchy should look like. That decision belongs to your design system, not the browser.
  • Verdict: a very deeply nested heading. Use it for content nested under h4. By this level, you should question whether your document structure needs to be this deep. The reset strips its visual weight, but screen readers still announce it as a level-5 heading.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Headings 6 <h6></h6> heading_6.svg

User Agent StyleSheet 

<h6>Heading 6</h6>
h6 {
	display: block;
	font-size: 0.67em;
	margin-block-start: 2.33em;
	margin-block-end: 2.33em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold; /* computes to unitless 700 */
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<h6 data-h6>Heading 6</h6>
:where([data-h6]) {
	font-size: inherit;
	line-height: inherit;
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: the sixth-rank heading — the deepest heading level within its sectioning context. One of six ranks (h1–h6) that establish the document's heading hierarchy. Catalogue groups it under Headings — block-level elements whose only purpose is to denote section titles.
  • Group: Headings Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="heading" aria-level="6" when you need a heading but cannot use <h6> (rare). Higher rank headings for more important sections.
  • User Agent: applies display: block, font-size: 0.67em, margin-block-start: 2.33em, margin-block-end: 2.33em, font-weight: bold, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the margins (margin-block-start: 0px; margin-block-end: 0px), inherits typography (font-size: inherit; line-height: inherit), and removes bold (font-weight: normal). Visual hierarchy is stripped; semantic rank stays in the markup. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not visual presentation.
  • Note: same reset pattern as h1–h5. Note the UA's inverted margin pattern — h1 has the largest font (2em) with the smallest margin (0.67em), while h6 has the smallest font (0.67em) with the largest margin (2.33em). Smaller text gets more breathing room. The reset zeroes all margins, removing the asymmetry entirely. Every heading becomes visually identical. This is intentional: the reset does not assume what your heading hierarchy should look like. That decision belongs to your design system, not the browser.
  • Verdict: the lowest-rank heading. By this level, your document structure is likely too deep. Consider refactoring rather than reaching for h6. The reset strips its visual weight, but screen readers still announce it as a level-6 heading.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Lists lists_group.svg

Unordered Lists <ul></ul> unordered_list.svg

User Agent StyleSheet 

<ul>
	<li>Unordered List</li>
</ul>
ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<ul data-ul>
	<li>Unordered List</li>
</ul>
:where([data-ul]) {
	list-style-type: none;
	margin-block-start: 0px;
	margin-block-end: 0px;
	padding-inline-start: 0px;
}
Comments : -
  • Semantics: the unordered list — a collection where sequence is not meaningful. Permitted children: li, script, template. Catalogue groups it under Lists — block-level containers for collections of related items.
  • Group: Lists Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <ol> when sequence matters (numbered list). <menu> for semantic menus (identical styling). <div> with custom CSS when you need no list semantics at all.
  • User Agent: applies display: block, list-style-type: disc, margin-block: 1em, padding-inline-start: 40px, and unicode-bidi: isolate.
  • Tabula Rasa: removes the three things that make a list visually distinct: the bullet markers (list-style-type: none), the vertical margins (margin-block: 0px), and the 40-pixel left indent (padding-inline-start: 0px). After the reset, a ul is layout-equivalent to a div — the list semantic survives in the markup, the list look is the author's choice. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not presentation.
  • Note: the workhorse of navigation menus, todo lists, and bullet-point presentations. The UA's 40px indent is a print-era holdover from the days when lists were indented paragraphs with markers in the margin. The reset strips all of it, giving authors complete control over list styling — but also taking away the default visual hierarchy that made lists recognizable. Authors must explicitly re-add spacing, markers, or indentation if they want lists to look like lists.
  • Verdict: semantically essential, visually stripped. The reset treats ul as a structural container, not a presentational one. Add your own styles for bullets, spacing, and indentation.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Ordered Lists <ol></ol> ordered_list.svg

User Agent StyleSheet 

<ol>
	<li>Ordered List</li>
</ol>
ol {
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<ol data-ol>
	<li>Ordered List</li>
</ol>
:where([data-ol]) {
	list-style-type: none;
	margin-block-start: 0px;
	margin-block-end: 0px;
	padding-inline-start: 0px;
}
Comments : -
  • Semantics: the ordered list — a collection where sequence is meaningful. Supports the type, start, and reversed attributes to control marker style and numbering direction. Permitted children: li, script, template. Catalogue groups it under Lists — block-level containers for sequential collections.
  • Group: Lists Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <ul> when order doesn't matter (unordered list). <menu> for interactive command lists. <div> with custom CSS when you need no list semantics at all. <select> for compact ordered choice selection.
  • User Agent: applies display: block, list-style-type: decimal, margin-block: 1em, padding-inline-start: 40px, and unicode-bidi: isolate. Differs from ul by a single declaration — decimal instead of disc.
  • Tabula Rasa: removes the markers (list-style-type: none), the vertical margins (margin-block: 0px), and the left indent (padding-inline-start: 0px). After the reset, ol is visually identical to ul and menu. The ordering semantic survives only in the markup and in screen-reader announcements. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not presentation.
  • Note: the UA stylesheet differs from ul by a single declaration — list-style-type: decimal instead of disc. The reset strips that distinction entirely. After the reset, you cannot tell an ol from a ul by looking at it. The numbers are gone, the bullets are gone, the indent is gone. This is intentional: the reset does not assume what your ordered list should look like. If you want numbers, add them back with list-style-type: decimal or custom CSS counters.
  • Verdict: structurally sequential, visually stripped. The reset treats ol as a semantic container, not a presentational one. Add your own styles for numbers, spacing, and indentation. The sequence is in the markup — make it visible if your content requires it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

List Items <li></li> list_item.svg

User Agent StyleSheet 

<ul>
	<li>List Item</li>
</ul>
li {
	display: list-item;
	unicode-bidi: isolate;
}

/* Inherited from ul */
ul {
	list-style-type: disc;
}

/* Pseudo ::marker element */
::marker, ::before::marker, ::after::marker {
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	text-transform: none;
	text-indent: 0px !important;
	text-align: start !important;
	text-align-last: auto !important;
}

Tabula Rasa StyleSheet 

<ul>
	<li data-li>List Item</li>
</ul>
:where([data-li]) {
	display: inline-block;
	list-style-type: none;
}

:where([data-li])::marker {
	content: "";
	display: none;
}
Comments : -
  • Semantics: a single entry within an enclosing ul, menu, or ol. Supports the value attribute within an ordered list to override the computed item number. Catalogue groups it under Lists — the atomic unit of list structures.
  • Group: Lists Cardinality: Infinite Layout: list-item; Voidity: Non Void
  • Alternatives: <div> with ARIA role="listitem" when you need list item semantics but cannot use <li>. A plain <span> or <div> when you need no list semantics at all.
  • User Agent: applies display: list-item and unicode-bidi: isolate on the element. The marker appearance comes from the parent's list-style-type (e.g., disc on ul). The ::marker pseudo-element gets additional styling: unicode-bidi: isolate, font-variant-numeric: tabular-nums, and forced text alignment.
  • Tabula Rasa: a deliberate layout transformation. display: list-item becomes display: inline-block — list items flow horizontally rather than stacking vertically, anticipating modern usage in navigation menus, breadcrumbs, and tag clouds. The marker is suppressed twice: list-style-type: none on the element and content: ""; display: none on ::marker to handle browsers that ignore one or the other. Authors wanting classic vertical bulleted lists must opt back in by restoring display: list-item and list-style-type: disc. unicode-bidi: isolate is preserved on both the element and its marker as it governs bidirectional text handling, not presentation.
  • Note: the element that changed behavior completely under the reset. Historically, li was always vertical — one item per line, with a marker to the left. Tabula Rasa flips this assumption: list items become horizontal inline blocks, markers disappear entirely. This matches how most modern navigation bars, tag clouds, and inline badge lists are built. Authors who want traditional vertical lists (like this very commentary list) must explicitly restore display: list-item and marker styles. The reset chooses modern defaults over historical ones.
  • Verdict: transformed from vertical stack to horizontal flow. The reset assumes you want horizontal navigation or inline badges, not document-style bullet lists. If you want traditional lists, re-add display: list-item and list-style-type in your author styles.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Description Lists <dl></dl> description_list.svg

User Agent StyleSheet 

<dl>
	<dt>Description Term</dt>
	<dd>Description Details</dd>
</dl>
dl {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<dl data-dl>
	<dt>Description Term</dt>
	<dd>Description Details</dd>
</dl>
:where([data-dl]) {
	margin-block-start: 0px;
	margin-block-end: 0px;
}
Comments : -
  • Semantics: the description list — name–value pairs structured as one or more dt terms followed by one or more dd descriptions. Used for glossaries, metadata listings, key–value records, and any term-definition relationship. Catalogue groups it under Lists — block-level containers for associative pairs rather than sequential items.
  • Group: Lists Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <ul> with pairs inside li (less semantic, but visually similar). <div> with custom CSS and ARIA attributes when you need fine-grained control. A regular HTML table for tabular term-definition data. The dl is the only semantic container for definition lists.
  • User Agent: applies display: block, margin-block: 1em, and unicode-bidi: isolate. Unlike ul and ol, dl carries no markers, no left padding, no list-style-type — the structure of dt + dd pairs is the implicit indicator.
  • Tabula Rasa: zeroes the vertical margins (margin-block-start: 0px; margin-block-end: 0px). The layout is already minimal — no markers to strip, no padding to remove. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not presentation.
  • Note: the overlooked list element. Everyone knows ul and ol; dl is the third wheel that never got the same attention. Yet it's the perfect semantic choice for anything that follows a term → definition pattern: product specs, FAQ pages, metadata tables, API response documentation. The reset leaves it mostly untouched because there's almost nothing to reset — just the margins. The term-definition relationship stays visually and semantically intact.
  • Verdict: minimal reset, maximal semantic value. Use dl for key-value pairs, glossaries, and metadata. The reset only removes the outer margins; the term-definition structure remains visually as the browser intends.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Description Terms <dt></dt> description_term.svg

User Agent StyleSheet 

<dl>
	<dt>Description Term</dt>
	<dd>Description Details</dd>
</dl>
dt {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<dl>
	<dt data-dt>Description Term</dt>
	<dd>Description Details</dd>
</dl>
:where([data-dt]) {
}
Comments : -
  • Semantics: the description term — the name or label part of a name–value pair inside a dl (description list). Each term is typically followed by one or more dd (description details) elements that provide the definition or value. Catalogue groups it under Lists — the identifying label in a term-definition pair.
  • Group: Lists Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="term" when you cannot use <dt>. A plain <span> or <div> with custom styling when no semantic term-definition relationship is needed. The <dt> is the only semantic element specifically for the label side of a definition pair.
  • User Agent: applies display: block and unicode-bidi: isolate. The browser renders dt as a block regardless of its inline semantic nature — each term starts on its own line, creating vertical rhythm for definition lists. No default margins, no markers, no special fonts.
  • Tabula Rasa: applies no reset to dt. The element keeps its native block formatting — unlike li which gets transformed to inline-block, definition terms remain vertically stacked. unicode-bidi: isolate is preserved as it governs bidirectional text handling (e.g., English term with Arabic definition), not visual presentation.
  • Note: the browser renders dt as display: block regardless of its inline semantic nature — each term starts on its own line, creating vertical rhythm for definition lists. The reset specifically does NOT touch dt, preserving its native block behavior. Compare this to li, which gets transformed to inline-block. The asymmetry is intentional: definition terms stay vertical; list items go horizontal. If you want horizontal definition terms (e.g., inline metadata pairs), you must override dt yourself.
  • Verdict: untouched by the reset. Stays a block element, vertically stacked. The reset assumes definition lists are vertical by default, unlike unordered/ordered lists which become horizontal. If you want inline term-definition pairs, author your own styles.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Description Details <dd></dd> description_detail.svg

User Agent StyleSheet 

<dl>
	<dt>Description Term</dt>
	<dd>Description Details</dd>
</dl>
dd {
	display: block;
	margin-inline-start: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<dl>
	<dt>Description Term</dt>
	<dd data-dd>Description Details</dd>
</dl>
:where([data-dd]) {
	margin-inline-start: 0px;
}
Comments : -
  • Semantics: the description details — the definition or value part of a name–value pair inside a dl (description list). Each dd follows one or more dt (description term) elements and provides the associated definition, explanation, or value. Catalogue groups it under Lists — the defining value in a term-definition pair.
  • Group: Lists Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <div> with ARIA role="definition" when you cannot use <dd>. A plain <span> or <div> with custom styling when no semantic term-definition relationship is needed. The <dd> is the only semantic element specifically for the definition side of a definition pair.
  • User Agent: applies display: block, margin-inline-start: 40px, and unicode-bidi: isolate. The 40px left indent is the classic definition list look where descriptions sit visually subordinate to their terms.
  • Tabula Rasa: strips the left indent to margin-inline-start: 0px. The reset takes no position on how much space belongs between term and description; that decision moves entirely to author styles. Compare dt (no reset, keeps everything) to dd (margin stripped). The term keeps its native block formatting; the description loses its default offset. Intentional asymmetry.
  • Note: the browser renders dd as display: block with a 40px left indent — the classic definition list look where descriptions sit visually subordinate to their terms. Tabula Rasa strips that indent to 0px, giving authors complete control over spacing. Want a hanging indent? Add it back. Want the description on the same line as the term? Flexbox it. Want a colon after the term and the description indented? That's now your choice, not the browser's.
  • Verdict: margin stripped, structure preserved. The reset removes the default 40px indent but keeps dd as a block. Author your own spacing for term-definition pairs. The semantic relationship stays intact; the visual layout is now yours to define.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Quotations quotations_group.svg

Block Quotes <blockquote></blockquote> block_quote.svg

User Agent StyleSheet 

<blockquote>
	Block Quote
</blockquote>
blockquote {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 40px;
	margin-inline-end: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet 

<blockquote data-blockquote>
	Block Quote
</blockquote>
:where([data-blockquote]) {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
Comments : -
  • Semantics: the block quotation — represents an extended quotation that stands alone from the surrounding text, typically rendered as an indented block. The optional cite attribute may carry a URL pointing to the source of the quotation. Catalogue groups it under Quotations — block-level containers for cited passages.
  • Group: Quotations Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <q> for short inline quotations (with automatic quotation marks). <figure> with <figcaption> for quotations that need attribution displayed alongside. A plain <div> with custom styling and ARIA role="blockquote" when you need quotation semantics but cannot use <blockquote>.
  • User Agent: applies display: block, margin-block: 1em, margin-inline: 40px, and unicode-bidi: isolate. The 40px horizontal margins are the conventional indented block for extended quotations, inherited from print-era typography.
  • Tabula Rasa: strips all four margins to 0px. The reset takes no position on how much space belongs around a quotation or how far it should be indented; that decision moves entirely to author styles. unicode-bidi: isolate is preserved as it governs bidirectional text handling, not presentation.
  • Note: the browser renders blockquote as display: block with vertical margins of 1em and horizontal margins of 40px — the conventional indented block for extended quotations, inherited from print-era typography. Tabula Rasa strips all four margins to 0px. This is one of the most visually noticeable resets in the entire catalogue: a quoted passage that used to sit forty pixels in from both edges becomes flush with surrounding content. Authors who want the traditional indented look must explicitly add back margins or padding.
  • Verdict: indentation removed, semantic preserved. The reset treats blockquote as a structural quotation container, not a presentational indentation device. Add your own margins, borders, background colors, or typographic treatment to distinguish quoted content.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Inline Quotes <q></q> inline_quote.svg

User Agent StyleSheet 

<q>Inline Quote</q>
q {
	display: inline;
}

/* Pseudo ::before element */
q::before {
	content: open-quote;
}

/* Pseudo ::after element */
q::after {
	content: close-quote;
}

Tabula Rasa StyleSheet 

<q data-q>Inline Quote</q>
:where([data-q]) {
	display: inline-block;
}

:where([data-q])::before {
	quotes: none;
	content: none;
	display: none;
}

:where([data-q])::after {
	quotes: none;
	content: none;
	display: none;
}
Comments : -
  • Semantics: the inline quotation element — represents a short quotation cited within surrounding prose. The optional cite attribute may carry a URL pointing to the source document, though this value is not rendered by user agents. Catalogue groups it under Quotations — inline phrasing containers for cited passages.
  • Group: Quotations Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <blockquote> for extended multi-line quotations. Manual quotation marks with <span> or plain text (not recommended — loses semantic meaning). <cite> for citing the source title (different from quoting content).
  • User Agent: applies display: inline on the element. The ::before pseudo-element generates an opening quote via content: open-quote, and ::after generates a closing quote via content: close-quote. The actual quote characters are locale-appropriate, resolved against the quotes property and the document's language.
  • Tabula Rasa: promotes the element from inline to display: inline-block, making it a measurable, inspectable box snapped to the 20px grid. Both pseudo-elements (::before and ::after) are completely suppressed: quotes: none; content: none; display: none. The reset removes the automatic quotation marks entirely, deferring all quotation rendering to author styles. Authors who want quotes must add them back explicitly.
  • Note: the user agent generates locale-appropriate quotation marks around the element's content via the ::before and ::after pseudo-elements with the open-quote and close-quote keywords. The reset suppresses both pseudo-elements entirely. After the reset, <q> renders as plain text with no quotes at all — not even straight quotes. This is a deliberate choice: the reset takes no position on what quotation marks should look like, what language they should be in, or whether quotes should be present at all. Authors who want traditional quoted text must add their own ::before and ::after rules with explicit quote characters or reinstate open-quote/close-quote.
  • Verdict: quotes removed, semantic preserved. The reset strips the automatic quotation marks but keeps the inline quotation semantic. Authors who want quotes must add them back via CSS. This is consistent with the reset's philosophy: no browser-generated presentational content survives.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Citations <cite></cite> citation.svg

User Agent StyleSheet 

<cite>Citation</cite>
cite {
	font-style: italic;
}

Tabula Rasa StyleSheet 

<cite data-cite>Citation</cite>
:where([data-cite]) {
	display: inline-block;
	font-style: normal;
}
Comments : -
  • Semantics: the citation element — represents the title of a cited creative work, such as a book, article, film, song, or research paper. Not used for the author's name, and distinct from q and blockquote, which mark quoted text rather than the source's title. Catalogue groups it under Quotations — inline phrasing containers for source attribution.
  • Group: Quotations Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <i> for idiomatic text when no citation semantic is needed. <span> with custom styling for purely presentational italicization. A plain text citation with no semantic markup (loses machine-readable meaning). The <cite> element is the only semantic container specifically for work titles.
  • User Agent: applies font-style: italic. display resolves to its CSS initial value of inline.
  • Tabula Rasa: returns the slant to upright (font-style: normal) and promotes the element from inline to display: inline-block, making it a measurable, inspectable box snapped to the 20px grid. The reset strips the italic entirely, deferring all typographic and box-model differentiation to author styles.
  • Note: the sole user-agent declaration is font-style: italic; display resolves to its CSS initial value of inline. The reset returns the slant to upright and promotes the element to inline-block. This is one of the most minimal resets in the catalogue — just removing italics and switching to inline-block. After the reset, <cite> is typographically invisible: no italics, no bold, no special formatting. Authors who want citations to stand out must add their own styling (italics, small caps, a different color, or a subtle background). Note: it is easy to confuse the cite attribute with the <cite> element — they serve different purposes. The attribute (used on <blockquote> and <q>) carries a URL pointing to the source; the element marks up the title of a cited work. Neither renders the URL visually.
  • Verdict: italics removed, semantic preserved. The reset strips the default italic styling but keeps the citation semantic. Authors who want citations to be typographically distinct must add their own CSS. This is consistent with the reset's philosophy: no browser-generated presentational styling survives unless the author explicitly adds it back.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Medias medias_group.svg

Images <img /> img.svg

User Agent StyleSheet

<img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map name="testmap">
	<area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
img[Attributes Style] {
	width: 400px;
	height: 159px;
	aspect-ratio: auto 400 / 159;
}

img {
	overflow-clip-margin: content-box;
	overflow: clip;
}

Tabula Rasa StyleSheet

<img data-img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map data-map name="testmap">
	<area data-area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
:where([data-img]) {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
Comments : -
  • Semantics: a void element that embeds an image into the document. The src attribute specifies the resource URL, alt provides a textual alternative for assistive technologies and for when the image fails to load. The width and height attributes prevent layout shift by reserving space before the image loads. Catalogue groups it under Medias — elements that embed external resources into the document.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: CSS background-image for decorative images that carry no semantic meaning — they won't be announced by screen readers and can't have alt text. <picture> when you need responsive images with multiple sources. <figure> wrapping <img> when the image needs a caption.
  • User Agent: the width and height HTML attributes map to inline styles — width: 400px; height: 159px — and the browser computes aspect-ratio: auto 400 / 159 from them automatically. The UA also applies overflow-clip-margin: content-box and overflow: clip — constraining rendered pixels to the content box without establishing a scroll container. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: block — removes the mysterious bottom gap that inline images get from their descender space. Sets max-width: 100% and height: auto for responsive behaviour — the image shrinks to fit its container while maintaining its natural aspect ratio. Sets border: none for legacy browsers that applied a border to linked images.
  • Note: always include width and height attributes — even with a responsive reset. The browser uses them to compute the aspect ratio and reserve space before the image loads, preventing Cumulative Layout Shift (CLS). The reset's height: auto overrides the fixed pixel height for responsiveness while the aspect ratio is preserved from the attributes. When the resource fails to load, the user agent renders a placeholder glyph alongside the alt text — alternative — write meaningful alt text always.
  • Verdict: the most used media element on the web. The reset's three declarations — display: block, max-width: 100%, height: auto — are the universally agreed responsive image baseline. Everything else is author decision.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Maps <map></map> map.svg

User Agent StyleSheet

<img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map name="testmap">
	<area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
map {
	display: inline;
}

Tabula Rasa StyleSheet

<img data-img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map data-map name="testmap">
	<area data-area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
:where([data-map]) {
}
Comments : -
  • Semantics: an element associating a set of <area> children with an image, defining clickable regions on the referencing image. Activated by setting the <img>'s usemap attribute to the value of the <map>'s name attribute. Invisible — the map itself generates no visible box. Catalogue groups it under Medias — elements that work with embedded resources.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: SVG with clickable regions — more flexible and scalable than image maps. JavaScript click handlers on a positioned overlay. CSS pointer-events on layered elements. Image maps are an old technology — SVG or JavaScript solutions are preferred for modern projects.
  • User Agent: applies display: inline explicitly — one of the few elements where the browser actively declares inline rather than letting it resolve from the CSS initial value.
  • Tabula Rasa: empty rule. The element is invisible — it generates no box of its own. Nothing cosmetic to neutralise.
  • Note: the <map>, <img>, and <area> elements form a system — none makes sense without the others. The name attribute on <map> must match the usemap attribute on <img> exactly, including the leading #. Image maps are not responsive by default — the coords values are fixed pixels that don't scale with the image.
  • Verdict: a legacy system that predates CSS. Works fine for simple static images with clickable regions. For anything responsive or complex, use SVG or JavaScript instead.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Areas <area /> area.svg

User Agent StyleSheet

<img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map name="testmap">
	<area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
area {
	display: inline;
}

area:-webkit-any-link {
	cursor: pointer;
}

Tabula Rasa StyleSheet

<img data-img src="area.png" alt="Image map example" usemap="#testmap" width="400" height="159" />
<map data-map name="testmap">
	<area data-area shape="circle" coords="198,80,41" href="#" alt="Circle area" />
</map>
:where([data-area]) {
}
Comments : -
  • Semantics: a void element defining a single clickable region within a <map>. The shape and coords attributes describe the region's geometry — rect, circle, or poly. The href attribute turns it into a hyperlink with the same activation semantics as <a>. Invisible — generates no rendered box. Catalogue groups it under Medias — elements that work with embedded resources.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: SVG <a> elements wrapping shapes — more flexible, scalable, and accessible. JavaScript click handlers. <area> is part of the legacy image map system and shares its limitations.
  • User Agent: applies display: inline. When href is present, area:-webkit-any-link adds cursor: pointer — the same link affordance as <a>.
  • Tabula Rasa: empty rule. The element is invisible — it generates no rendered box. The cursor: pointer is preserved via the UA rule and not touched. Nothing cosmetic to neutralise.
  • Note: <area> elements must be children of a <map> which must be referenced by an <img> via usemap. The three elements — <img>, <map>, <area> — form an inseparable system. Image map coordinates are fixed pixels and don't scale with responsive images — a fundamental limitation of the technology.
  • Verdict: a legacy interactive system tied to the fixed-pixel image map. Still works but doesn't play well with responsive design. SVG or JavaScript are the modern alternatives.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Pictures <picture></picture> picture.svg

User Agent StyleSheet

<picture>
	<source media="(max-width: 600px)" srcset="mobile.png" />
	<source media="(max-width: 900px)" srcset="tablet.png" />
	<source media="(max-width: 1200px)" srcset="laptop.png" />
	<img src="desktop.png" alt="Description of image" />
</picture>
element.style {
}

Tabula Rasa StyleSheet

<picture data-picture>
	<source data-source media="(max-width: 600px)" srcset="mobile.png" />
	<source data-source media="(max-width: 900px)" srcset="tablet.png" />
	<source data-source media="(max-width: 1200px)" srcset="laptop.png" />
	<img src="desktop.png" alt="Description of image" />
</picture>
:where([data-picture]) {
	display: block;
}
Comments : -
  • Semantics: a container element for multiple <source> children and a single fallback <img>. The browser evaluates each <source> in order — checking the media attribute against the viewport and the type attribute against supported formats — and renders the first match. If no source matches or <picture> is unsupported, the fallback <img> renders. Catalogue groups it under Medias.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a single <img> with srcset and sizes attributes for resolution switching without art direction. <picture> is needed when you want different crops or compositions at different breakpoints — art direction — not just different resolutions.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline. The element itself generates no visible box — only the selected <source> or fallback <img> renders.
  • Tabula Rasa: promotes to display: block. The element is a container — block is the correct layout for a wrapper that holds an image. Nothing else to neutralise.
  • Note: the <img> inside <picture> still needs alt, width, and height attributes — the fallback carries the semantic and layout information for the whole element. The <source> elements are invisible — they provide alternatives, not content. The reset applies to <picture> as a container; the <img> inside gets its own reset via data-img.
  • Verdict: the right tool for art direction — serving fundamentally different images at different breakpoints. For simple resolution switching, srcset on <img> is simpler and sufficient.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Figures <figure></figure> figure.svg

User Agent StyleSheet

<figure>
	<img src="figure.jpg" alt="flamingo" />
	<figcaption>Flamingo</figcaption>
</figure>
figure {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 40px;
	margin-inline-end: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<figure data-figure>
	<img src="figure.jpg" alt="flamingo" />
	<figcaption data-figcaption>Flamingo</figcaption>
</figure>
:where([data-figure]) {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
Comments : -
  • Semantics: a block-level element representing self-contained content referenced from the main document flow — an image, diagram, code listing, or quotation. An optional <figcaption> child provides an associated caption. The figure can be moved to a different part of the document without affecting the main flow. Catalogue groups it under Medias — elements that present embedded content with context.
  • Group: Medias Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a <div> with a <p> caption — works visually but loses the semantic association between content and caption. <aside> for content that is tangentially related but not directly referenced from the main flow.
  • User Agent: applies display: block, vertical margins of 1em, horizontal margins of 40px, and unicode-bidi: isolate — producing the conventional indented figure block.
  • Tabula Rasa: zeroes all four margins — margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px. The 40px horizontal indent is a print convention that doesn't belong in a blank slate. unicode-bidi: isolate is preserved — structural, not cosmetic.
  • Note: the semantic difference between <figure> and a plain <div> is the association — <figure> signals that the content is a self-contained unit referenced from the surrounding prose. Screen readers may announce it as a figure. The <figcaption> is programmatically associated with the figure — assistive technologies can announce "Figure: Flamingo" without the author doing anything extra.
  • Verdict: use it whenever an image, diagram, or code block has a caption. The semantic association between figure and caption is the point — a <div> with a <p> below it doesn't communicate the same thing.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Figure Captions <figcaption></figcaption> figure_caption.svg

User Agent StyleSheet

<figure>
	<img src="figcaption.jpg" alt="macaque" />
	<figcaption>Macaque</figcaption>
</figure>
figcaption {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<figure>
	<img src="figcaption.jpg" alt="macaque" />
	<figcaption data-figcaption>Macaque</figcaption>
</figure>
:where([data-figcaption]) {
}
Comments : -
  • Semantics: a block-level element providing a caption or legend for its parent <figure>. Permitted as either the first or last child of <figure>, and at most once per figure. Programmatically associated with the figure — assistive technologies can announce the caption as belonging to the figure without any additional ARIA. Catalogue groups it under Medias.
  • Group: Medias Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a <p> below the image — works visually but loses the programmatic association with the figure. A title attribute on the <img> — appears as a tooltip, not a visible caption, and is not reliably announced by screen readers.
  • User Agent: applies display: block and unicode-bidi: isolate. No margins, no padding, no typography — the caption inherits everything from its parent.
  • Tabula Rasa: empty rule. Both UA declarations are structural — display: block is the intended layout and unicode-bidi: isolate governs bidirectional text handling. Nothing cosmetic to neutralise.
  • Note: position matters — <figcaption> as the first child places the caption above the figure content; as the last child it appears below. The convention is below. The caption text is the accessible name of the figure — write it to describe the content meaningfully, not just repeat the alt text.
  • Verdict: always use it when your figure needs a caption. The programmatic association is the point — a plain paragraph below an image doesn't communicate the same relationship to assistive technologies.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Videos <video></video> video.svg

User Agent StyleSheet

<video controls>
	<source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
video {
	object-fit: contain;
	overflow-clip-margin: content-box;
	overflow: clip;
}

Tabula Rasa StyleSheet

<video data-video controls>
	<source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
:where([data-video]) {
	display: block;
	max-width: 100%;
	height: auto;
}
Comments : -
  • Semantics: an element embedding video playback in the document. The src attribute or nested <source> children specify the resource. The controls attribute renders the browser's native playback interface. autoplay, loop, muted, and poster govern playback behaviour and pre-load presentation. Catalogue groups it under Medias — elements that embed external resources.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: an embedded <iframe> pointing to YouTube or Vimeo — offloads bandwidth and transcoding to the platform. A CSS animation or SVG for simple motion that doesn't need a video file. <canvas> with JavaScript for programmatic video manipulation.
  • User Agent: applies object-fit: contain — video maintains its aspect ratio and fits within its box, letterboxed if needed. Also applies overflow-clip-margin: content-box and overflow: clip. display resolves to the CSS initial value of inline. When no width or height is set and no intrinsic dimensions are available, the browser renders at the spec default of 1280 × 720 pixels.
  • Tabula Rasa: promotes to display: block, sets max-width: 100% and height: auto for responsive behaviour. object-fit: contain is preserved from the UA — correct for video, prevents distortion. overflow-clip-margin and overflow: clip are also preserved — structural, not cosmetic.
  • Note: without the controls attribute no playback interface is rendered — the element appears empty until autoplay begins or a poster image is set. Always include a fallback text node for browsers that don't support <video>. Always provide captions via <track kind="captions"> — video without captions fails WCAG 1.2.2.
  • Verdict: the standard way to embed video on the web. Use <source> children for format fallbacks, <track> for captions, and always include controls unless you have a deliberate reason not to.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Audios <audio></audio> audio.svg

User Agent StyleSheet

<audio controls>
	<source src="sample_audio.mp3" type="audio/mp3" />
	Your browser does not support the audio element.
</audio>
audio {
	width: 300px;
	height: 54px;
}

Tabula Rasa StyleSheet

<audio data-audio controls>
	<source src="sample_audio.mp3" type="audio/mp3" />
	Your browser does not support the audio element.
</audio>
:where([data-audio]) {
	display: block;
}
Comments : -
  • Semantics: an element embedding audio playback in the document. The src attribute or nested <source> children specify the resource. The controls attribute renders the browser's native playback interface. autoplay, loop, muted, and preload govern playback behaviour. Catalogue groups it under Medias — elements that embed external resources.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: the Web Audio API for programmatic audio — synthesis, effects, spatial audio. An <iframe> embedding a streaming service player. A custom JavaScript audio player for full visual control over the interface.
  • User Agent: applies width: 300px and height: 54px — fixed dimensions sized to accommodate the native control bar. display resolves to the CSS initial value of inline. An additional UA rule audio:not([controls]) { display: none !important; } hides the element entirely when controls is absent — the element has no intrinsic visual presence without its playback interface.
  • Tabula Rasa: promotes to display: block. The UA dimensions are preserved — the browser knows the correct size for its own native controls. Nothing else to neutralise.
  • Note: always include the controls attribute — without it the element is invisible and the user has no way to start playback unless you provide a custom JavaScript interface. Use <source> children for format fallbacks. Unlike <video>, <audio> has no poster attribute — it renders nothing until playback begins or controls are shown.
  • Verdict: the standard way to embed audio on the web. Simple, accessible via native controls, and supported everywhere. Use the Web Audio API when you need programmatic control.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Sources <source /> source.svg

User Agent StyleSheet

<video controls>
	<source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
element.style {
}

Tabula Rasa StyleSheet

<video controls>
	<source data-source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track data-track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
:where([data-source]) {
}
Comments : -
  • Semantics: a void element specifying one of multiple media resources for a parent <picture>, <audio>, or <video>. The browser evaluates siblings in order, choosing the first supported and matching resource based on type, media, and — for <picture> — srcset and sizes. Invisible — generates no rendered box. Catalogue groups it under Medias.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: a single src attribute on the parent <video> or <audio> when only one format is needed. For <picture>, a single <img> with srcset and sizes for resolution switching without art direction.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline. The element is purely declarative — it provides metadata to the browser's media selection algorithm but generates no box of its own.
  • Tabula Rasa: empty rule. The element is invisible — nothing cosmetic to neutralise.
  • Note: the browser reads <source> elements in source order and picks the first one it can play. Order matters — put preferred formats first. For video, WebM with VP9 before MP4 with H.264 gives smaller file sizes where supported. For <picture>, put the most specific media query first and the most general last — the fallback <img> is always the last resort.
  • Verdict: invisible but essential. The mechanism that makes format fallbacks and responsive images possible without JavaScript.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Tracks <track /> track.svg

User Agent StyleSheet

<video controls>
	<source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
element.style {
}

Tabula Rasa StyleSheet

<video data-video controls>
	<source data-source src="Lorem_Ipsum_Video.mp4" type="video/mp4" />
	<track data-track src="captions.vtt" kind="captions" srclang="en" label="English" />
	Your browser does not support the video element.
</video>
:where([data-track]) {
}
Comments : -
  • Semantics: a void element specifying a timed text track for a parent <audio> or <video>. The src attribute references a WebVTT file. The kind attribute defines the track type — captions, subtitles, descriptions, chapters, or metadata. The srclang, label, and default attributes govern language, display name, and auto-selection. Invisible — generates no rendered box. Catalogue groups it under Medias.
  • Group: Medias Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: JavaScript caption libraries like Video.js or Plyr — more customisable but require JavaScript. Hardcoded subtitles burned into the video — accessible but not selectable or translatable. <track> with WebVTT is the standard accessible solution.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline. The element is purely declarative — it registers a text track with the browser's media engine but generates no box of its own.
  • Tabula Rasa: empty rule. The element is invisible — nothing cosmetic to neutralise.
  • Note: captions and subtitles are not the same thing. kind="captions" includes non-speech information — sound effects, speaker identification, music cues — for deaf and hard-of-hearing users. kind="subtitles" is a translation of speech only. WCAG 1.2.2 requires captions for all prerecorded video with audio. Always include a <track kind="captions"> — it's not optional for accessible video.
  • Verdict: the accessibility element for video. Not optional — captions are required by WCAG. Use WebVTT format, always include kind="captions" for prerecorded video, and set default so captions auto-enable.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Vanity vanity_group.svg

Bolds <b></b> b.svg

User Agent StyleSheet

<b>Bring Attention To</b>
b {
	font-weight: bolder; /* computes to unitless 700 */
}

Tabula Rasa StyleSheet

<b data-b>Bring Attention To</b>
:where([data-b]) {
	display: inline-block;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: an inline element that draws attention to its content without conveying additional importance, emphasis, or alternate voice. Used for keywords, product names, and lede sentences — content that is stylistically offset from its surroundings but carries no extra semantic weight. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <strong> when the content carries genuine importance or urgency. A <span> with font-weight: bold when the bold is purely decorative with no semantic intent.
  • User Agent: applies font-weight: bolder — a relative keyword that steps the weight up the scale from the inherited value, typically resolving to unitless 700 when inherited from normal. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the weight to normal (font-weight: normal, unitless 400) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the semantic distinction between <b> and <strong> is real but subtle. <b> is a typographic signal — it says "look here." <strong> is a semantic signal — it says "this matters." Screen readers may announce <strong> with stress; they won't for <b>. The reset strips both to the same visual baseline — the distinction survives only in the markup.
  • Verdict: use it for typographic offset without semantic weight. Use <strong> when the content genuinely matters more than its surroundings.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Strongs <strong></strong> strong.svg

User Agent StyleSheet

<strong>Strong Importance, Seriousness, or Urgency</strong>
strong {
	font-weight: bolder; /* computes to unitless 700 */
}

Tabula Rasa StyleSheet

<strong data-strong>Strong Importance, Seriousness, or Urgency</strong>
:where([data-strong]) {
	display: inline-block;
	font-weight: normal; /* computes to unitless 400 */
}
Comments : -
  • Semantics: an inline element marking content of strong importance, seriousness, or urgency — semantically heavier than <b>, which draws attention without conveying additional weight. Used for warnings, critical information, and content that genuinely matters more than its surroundings. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <b> when the content is typographically offset but carries no extra semantic weight. <em> for stress emphasis. A <span> with font-weight: bold when the bold is purely decorative.
  • User Agent: applies font-weight: bolder — a relative keyword that steps the weight up the scale from the inherited value, typically resolving to unitless 700 when inherited from normal. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the weight to normal (font-weight: normal, unitless 400) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: screen readers may announce <strong> content with added stress — the semantic weight survives the visual reset. The distinction between <strong> and <b> matters most for accessibility: <strong> is a signal to assistive technologies that this content is important; <b> is not.
  • Verdict: use it when the content genuinely carries more weight than its surroundings — warnings, critical steps, key terms. Don't use it just to make text bold; that's <b>'s job, or better yet, CSS.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Idiomatics <i></i> i.svg

User Agent StyleSheet

<i>Idiomatic</i>
i {
	font-style: italic;
}

Tabula Rasa StyleSheet

<i data-i>Idiomatic</i>
:where([data-i]) {
	display: inline-block;
	font-style: normal;
}
Comments : -
  • Semantics: an inline element marking content set off from surrounding prose in idiomatic voice or alternate mood — technical terms, taxonomic names, foreign-language phrases, transliterations, thoughts, or ship and vessel names. Does not convey emphasis or importance. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <em> for stress emphasis. <cite> for titles of cited works. A <span> with font-style: italic when the slant is purely decorative with no semantic intent.
  • User Agent: applies font-style: italic. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the slant to upright (font-style: normal) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the semantic distinction between <i> and <em> is one of the most misunderstood in HTML. <i> is a voice shift — content in a different mode from the surrounding prose. <em> is stress — content that changes the meaning of the sentence when spoken aloud. "I said he <em>stole</em> it" vs "The ship <i>Titanic</i> sank". Both render italic by default. Neither should be used just to make text slant.
  • Verdict: use it for voice shifts and alternate mood. Use <em> for stress. Use CSS for decoration.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Emphasises <em></em> em.svg

User Agent StyleSheet

<em>Stress Emphasis</em>
em {
	font-style: italic;
}

Tabula Rasa StyleSheet

<em data-em>Stress Emphasis</em>
:where([data-em]) {
	display: inline-block;
	font-style: normal;
}
Comments : -
  • Semantics: an inline element marking content with stress emphasis — the word or phrase that changes the meaning of the sentence when spoken aloud. Distinct from <i> which shifts voice without adding stress. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <i> for idiomatic voice without stress. <strong> for importance rather than emphasis. A <span> with font-style: italic when the slant is purely decorative.
  • User Agent: applies font-style: italic. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the slant to upright (font-style: normal) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: stress emphasis is positional — the same words mean different things depending on which is emphasised. "I never said <em>he</em> stole it" implies someone else did. "I never said he <em>stole</em> it" implies he did something else. The visual italic is incidental — the semantic is in the markup. Screen readers may announce <em> with vocal stress. The reset removes the italic; the stress remains.
  • Verdict: use it for genuine stress emphasis — words that change meaning when stressed. Don't use it just to italicise text; that's CSS's job.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Definations <dfn></dfn> dfn.svg

User Agent StyleSheet

<dfn>Defining Instance</dfn>
dfn {
	font-style: italic;
}

Tabula Rasa StyleSheet

<dfn data-dfn>Defining Instance</dfn>
:where([data-dfn]) {
	display: inline-block;
	font-style: normal;
}
Comments : -
  • Semantics: an inline element marking the defining instance of a term — the first place a term is defined in a document. The term being defined is taken from the element's text content or, if present, the title attribute. The surrounding context supplies the definition itself. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <span> with font-style: italic when the term is purely presentational. A <dt> inside a <dl> when the term and its definition are both explicit in the markup.
  • User Agent: applies font-style: italic. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the slant to upright (font-style: normal) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the title attribute on <dfn> has a specific meaning — it holds the exact term being defined when the element's text content is an expansion or alternative form. For example: <dfn title="HyperText Markup Language">HTML</dfn>. Browsers may display the title as a tooltip. Only one <dfn> per term per document is the convention — subsequent uses of the term use <abbr> or plain text.
  • Verdict: underused but semantically precise. Use it exactly once per term, at the point of definition. Pair it with <abbr> for subsequent references.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Addresses <address></address> address.svg

User Agent StyleSheet

<address>
	Contact Information
</address>
address {
	display: block;
	font-style: italic;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<address data-address>
	Contact Information
</address>
:where([data-address]) {
	font-style: normal;
}
Comments : -
  • Semantics: a block-level element providing contact information for its nearest <article> or <body> ancestor — authorship details, postal addresses, email links, telephone numbers, or social-media references. Reserved for that purpose, not for arbitrary postal addresses appearing in prose. Catalogue groups it under Vanity — elements whose only cosmetic browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a <p> or <div> for contact information that isn't directly tied to the nearest article or body. A <footer> when the contact information belongs at the bottom of a section.
  • User Agent: applies display: block, font-style: italic, and unicode-bidi: isolate.
  • Tabula Rasa: returns the slant to upright (font-style: normal). display: block and unicode-bidi: isolate are preserved — both are structural, neither is cosmetic.
  • Note: one of the most misused elements in HTML. <address> is for the contact information of the author or owner of the nearest <article> or <body> — not for every postal address that appears on a page. A restaurant's list of branch locations is not a valid use. The author's email address in a blog post footer is. The distinction matters for accessibility — screen readers may announce <address> content differently.
  • Verdict: semantically precise but frequently misused. Use it only for contact information tied to the document or article author. For everything else, use a <p>.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Unarticulates <u></u> u.svg

User Agent StyleSheet

<u>Unarticulated Annotation</u>
u {
	text-decoration: underline;
}

Tabula Rasa StyleSheet

<u data-u>Unarticulated Annotation</u>
:where([data-u]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an inline element marking unarticulated annotation — content annotated in a non-textual way, such as a Chinese proper noun, a misspelling being highlighted, or text that needs to be distinguished from surrounding prose without conveying emphasis or importance. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <span> with text-decoration: underline when the underline is purely decorative. <em> for emphasis. <mark> for highlighted reference. Avoid <u> where it could be confused with a hyperlink.
  • User Agent: applies text-decoration: underline. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the underline (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the most dangerous inline element on the web. An underlined non-link looks exactly like a link. Users will click it expecting navigation and get nothing. Use <u> only when the underline carries genuine semantic meaning — Chinese proper nouns, deliberate misspelling annotation — and style it to look distinctly different from links, such as a wavy underline in a different colour.
  • Verdict: use with extreme caution. If it could be mistaken for a link, don't use it. The reset strips the underline entirely — the author must re-apply it deliberately and distinctively.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Inserts <ins></ins> ins.svg

User Agent StyleSheet

<ins>Inserted</ins>
ins {
	text-decoration: underline;
}

Tabula Rasa StyleSheet

<ins data-ins>Inserted</ins>
:where([data-ins]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an element marking content that has been inserted into the document — editorial additions, track-changes insertions, or content added since a previous version. The optional cite attribute references a URL explaining the change; datetime carries a machine-readable timestamp. Although typically inline, it accepts both phrasing and flow content. Catalogue groups it under Vanity — its only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <del> for its counterpart — deleted content. Used together they form a diff view. A <span> with text-decoration: underline when the insertion is purely presentational.
  • User Agent: applies text-decoration: underline. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the underline (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: <ins> and <del> are the HTML diff pair — the only elements that semantically represent a document's editing history. Used together with the datetime attribute they can mark exactly what changed and when. Screen readers may announce inserted content differently. The reset strips the underline — authors building diff views must re-apply their own visual treatment.
  • Verdict: use it when content was genuinely added as part of an edit. Pair with <del> for a complete diff. Don't use it just to underline text.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Abbreviations <abbr></abbr> abbr.svg

User Agent StyleSheet

<abbr title="HyperText Markup Language">HTML</abbr>
abbr[title] {
	text-decoration: underline dotted;
}

Tabula Rasa StyleSheet

<abbr data-abbr title="HyperText Markup Language">HTML</abbr>
:where([data-abbr]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an inline element marking an abbreviation or acronym. The title attribute provides the expansion — the full form of the abbreviated term — which browsers conventionally display as a tooltip. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment, and only when the title attribute is present.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <dfn> at the point where the abbreviation is first defined. Plain text when the abbreviation is universally understood and needs no expansion. <acronym> was the deprecated predecessor — use <abbr> for both abbreviations and acronyms.
  • User Agent: applies text-decoration: underline dotted via the abbr[title] selector — only when the title attribute is present. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the dotted underline (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the convention is to use <abbr> with title on first use and then plain text thereafter. The dotted underline signals to the user that a tooltip expansion is available — removing it in the reset means the author must provide an alternative affordance so users know they can hover for the expansion. A custom border-bottom: 1px dotted or a CSS tooltip is the typical replacement.
  • Verdict: use it for every abbreviation where the expansion aids comprehension. Always include title. Style it so users know the tooltip exists.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Strikethroughs <s></s> s.svg

User Agent StyleSheet

<s>Strikethrough</s>
s {
	text-decoration: line-through;
}

Tabula Rasa StyleSheet

<s data-s>Strikethrough</s>
:where([data-s]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an inline element marking content that is no longer accurate or relevant but is preserved in the document — superseded prices, withdrawn statements, outdated facts. Distinct from <del> which marks content removed as part of an edit. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <del> when the content was removed as part of an editorial edit. A <span> with text-decoration: line-through when the strikethrough is purely decorative with no semantic meaning.
  • User Agent: applies text-decoration: line-through. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the strikethrough (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the semantic distinction between <s> and <del> is temporal. <s> marks content that is no longer true — a price that has changed, a claim that has been corrected. <del> marks content that was deliberately removed as part of a tracked edit. Both render with strikethrough by default. The reset strips both — authors building e-commerce strikethrough prices or document diffs must re-apply the visual treatment explicitly.
  • Verdict: use it for content that is no longer accurate. Use <del> for editorial deletions. Don't use either just for decorative strikethrough.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Deletes <del></del> del.svg

User Agent StyleSheet

<del>Deleted text</del>
del {
	text-decoration: line-through;
}

Tabula Rasa StyleSheet

<del data-del>Deleted text</del>
:where([data-del]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an element marking content that has been removed from the document as part of an editorial edit. The optional cite attribute references a URL explaining the change; datetime carries a machine-readable timestamp. Although typically inline, it accepts both phrasing and flow content. Pairs semantically with <ins> for insertions. Catalogue groups it under Vanity — elements whose only browser default is a visual treatment.
  • Group: Vanity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <s> for content that is no longer accurate but wasn't removed as part of a tracked edit. A <span> with text-decoration: line-through when the strikethrough is purely decorative.
  • User Agent: applies text-decoration: line-through. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the strikethrough (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: <del> and <ins> are the HTML diff pair. Used together with datetime attributes they represent a complete editing history — what was removed, what was added, and when. Screen readers may announce deleted content differently. The cite attribute is machine-readable but not user-visible — it's metadata for tools, not humans. The reset strips the strikethrough; authors building diff views must re-apply their own visual treatment.
  • Verdict: use it for content removed as part of a tracked edit. Pair with <ins> for a complete diff. Don't use it just for decorative strikethrough — that's <s>'s job, or better yet, CSS.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Computer computer_group.svg

Sample <samp></samp> sample.svg

User Agent StyleSheet

<samp>Sample Output</samp>
samp {
	font-family: monospace;
}

Tabula Rasa StyleSheet

<samp data-samp>Sample Output</samp>
:where([data-samp]) {
	display: inline-block;
	font-family: Consolas, "Courier New", monospace;
}
Comments : -
  • Semantics: an inline element marking sample output from a computer program — console messages, error text, command results, or any verbatim machine-produced text. Distinct from <code> (source code), <kbd> (keyboard input), and <var> (variable names). Catalogue groups it under Computer — elements whose only browser default is a monospace typeface.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <code> for source code. <kbd> for keyboard input. <var> for variable names. A <span> with font-family: monospace when the monospace is purely presentational.
  • User Agent: applies font-family: monospace. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the typeface to the inherited value (font-family: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the four Computer group elements — <samp>, <code>, <kbd>, <var> — all render identically by default. The distinction is semantic, not visual. The reset strips the monospace from all four — authors who want monospace for computer-related text apply it once to the group rather than element by element.
  • Verdict: use it specifically for program output. The semantic precision helps screen readers, search engines, and developer tools understand what kind of computer text is on the page.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Code <code></code> code.svg

User Agent StyleSheet

<code>function hello() { return "world"; }</code>
code {
	font-family: monospace;
}

Tabula Rasa StyleSheet

<code data-code>function hello() { return "world"; }</code>
:where([data-code]) {
	display: inline-block;
	font-family: Consolas, "Courier New", monospace;
}
Comments : -
  • Semantics: an inline element marking a fragment of computer code — variable names, function names, HTML tags, file paths, or any short code snippet embedded in prose. For multi-line code blocks, wrap in <pre>. Distinct from <samp> (program output), <kbd> (keyboard input), and <var> (variable names). Catalogue groups it under Computer — elements whose only browser default is a monospace typeface.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <samp> for program output. <kbd> for keyboard input. <var> for variable names. <pre><code> for multi-line code blocks. A <span> with font-family: monospace when the monospace is purely presentational.
  • User Agent: applies font-family: monospace. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the typeface to the inherited value (font-family: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the convention for multi-line code blocks is <pre><code> — <pre> preserves whitespace and line breaks, <code> provides the semantic. Neither element alone does both jobs. The reset strips the monospace from <code> — authors who want code to look like code must re-apply font-family: monospace deliberately, which is the point.
  • Verdict: the most used element in the Computer group. Use it for every code snippet in prose. Wrap in <pre> for blocks. Style with a monospace font and optionally a syntax highlighter.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Variable <var></var> variable.svg

User Agent StyleSheet

<var>Variable</var>
var {
	font-style: italic;
}

Tabula Rasa StyleSheet

<var data-var>Variable</var>
:where([data-var]) {
	display: inline-block;
	font-style: normal;
}
Comments : -
  • Semantics: an inline element marking a variable in a mathematical expression or programming context — the unknown in an equation, a function parameter, or a placeholder name. Distinct from <code> (code fragments), <samp> (program output), and <kbd> (keyboard input). Catalogue groups it under Computer — elements whose only browser default is a visual treatment.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <code> when the variable is part of a larger code snippet. A <span> with font-style: italic when the slant is purely presentational with no semantic intent.
  • User Agent: applies font-style: italic. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the slant to upright (font-style: normal) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: <var> is the odd one out in the Computer group — its UA default is italic, not monospace, unlike <samp>, <code>, and <kbd>. The italic convention comes from mathematics, where variables are traditionally set in italics to distinguish them from operators and constants. The reset strips the italic — authors working with mathematical or scientific content must re-apply it.
  • Verdict: semantically precise for variables in equations and code. Use it; it's underused. The reset strips the italic — re-apply it deliberately if your content is mathematical.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Keyboard <kbd></kbd> keyboard.svg

User Agent StyleSheet

<kbd>Ctrl + C</kbd>
kbd {
	font-family: monospace;
}

Tabula Rasa StyleSheet

<kbd data-kbd>Ctrl + C</kbd>
:where([data-kbd]) {
	display: inline-block;
	font-family: Consolas, "Courier New", monospace;
}
Comments : -
  • Semantics: an inline element marking user keyboard input — key names, key combinations, or sequences of keys the user should press. Distinct from <samp> (program output), <code> (code fragments), and <var> (variable names). Catalogue groups it under Computer — elements whose only browser default is a monospace typeface.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <code> when the keyboard input is part of a larger code example. A <span> with font-family: monospace when the monospace is purely presentational. Many design systems style <kbd> to look like a physical keyboard key — a small box with a border.
  • User Agent: applies font-family: monospace. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the typeface to the inherited value (font-family: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: <kbd> can be nested to indicate key sequences and combinations. <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> — the outer <kbd> wraps the full combination, the inner ones mark individual keys. Most design systems style it as a physical key shape — small, bordered, slightly raised. The reset removes the monospace; the author decides whether it looks like a key.
  • Verdict: use it for every keyboard shortcut and key reference in documentation. Style it to look like a key — users instantly understand the visual convention.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Preformatted <pre></pre> pre.svg

User Agent StyleSheet

<pre>
	function hello() {
	return "world";
	}
</pre>
pre {
	display: block;
	font-family: monospace;
	unicode-bidi: isolate;
	white-space: pre;
	margin-block: 1em 1em;
	margin-inline: 0px;
}

Tabula Rasa StyleSheet

<pre data-pre>
	function hello() {
	return "world";
	}
</pre>
:where([data-pre]) {
	font-family: Consolas, "Courier New", monospace;
	margin-block: 0px;
}
Comments : -
  • Semantics: a block-level element that preserves whitespace and line breaks exactly as authored — spaces, tabs, and newlines are rendered literally. Conventionally used for code listings, ASCII art, and any content whose visual structure depends on its source formatting. Frequently paired with <code> nested inside for complete semantic and typographic meaning. Catalogue groups it under Computer.
  • Group: Computer Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <textarea readonly> for editable preformatted text. CSS white-space: pre on any block element when the preformatted behaviour is needed without the semantic. For code specifically, always use <pre><code> together.
  • User Agent: applies display: block, font-family: monospace, white-space: pre, unicode-bidi: isolate, and margin-block: 1em 1em.
  • Tabula Rasa: returns the typeface to the inherited value (font-family: inherit) and zeroes the vertical margins (margin-block: 0px). display: block, white-space: pre, and unicode-bidi: isolate are preserved — all three govern the element's defining behaviour, none are cosmetic.
  • Note: the convention <pre><code> gives you both: <pre> preserves the whitespace and line breaks, <code> provides the semantic signal that the content is code. Neither alone does both jobs. Syntax highlighters like Prism.js and highlight.js target <code> inside <pre> — the pairing is both semantic and practical.
  • Verdict: always pair with <code> for code blocks. The reset strips the monospace and margins — re-apply a monospace font and consider adding a background, border, and padding to make the code block visually distinct.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Mark <mark></mark> mark.svg

User Agent StyleSheet

<mark>highlighted text</mark>
mark {
	background-color: mark; /* system colour; typically yellow */
	color: marktext; /* system colour; typically black */
}

Tabula Rasa StyleSheet

<mark data-mark>highlighted text</mark>
:where([data-mark]) {
	display: inline-block;
	background-color: #ffd700;
	color: #000000;
}
Comments : -
  • Semantics: an inline element marking content of relevance or special interest in the current context — search result matches, passages being annotated, or text drawing the reader's attention within a quotation. Does not convey semantic emphasis or importance. Catalogue groups it under Computer — elements that communicate information about text in a technical or reference context.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <em> for stress emphasis. <strong> for importance. A <span> with a background colour when the highlight is purely decorative with no semantic meaning.
  • User Agent: applies background-color: mark and color: marktext — both CSS system colours that respond to platform conventions, typically resolving to yellow with black text. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the background to transparent and the colour to inherit, and promotes to display: inline-block. All visual differentiation is deferred to author styles.
  • Note: the system colours mark and marktext are part of the CSS Color Level 4 system colour keywords — they adapt to the user's OS theme and accessibility settings. On some high-contrast themes, yellow may be replaced with a more visible colour. The reset strips these entirely — authors who want the highlight to respect system colours can explicitly use background-color: mark; color: marktext in their own stylesheet.
  • Verdict: the right element for search result highlighting and annotation. The reset strips the yellow — re-apply it deliberately, or use your own highlight colour. Consider using mark and marktext system colours to respect user accessibility preferences.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Data <data></data> data.svg

User Agent StyleSheet

<data value="123">Product Name</data>
element.style {
}

Tabula Rasa StyleSheet

<data data-data value="123">Product Name</data>
:where([data-data]) {
	display: inline-block;
}
Comments : -
  • Semantics: an inline element associating a machine-readable value with its human-readable content. The required value attribute carries the canonical representation — a product ID, a price, a code — while the element's text supplies what the reader sees. For dates and times specifically, <time> is preferred. Catalogue groups it under Computer — elements that communicate structured information in a technical context.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <time> for dates and times — it has a defined datetime format. A data-* attribute on any element when the machine-readable value doesn't need to be in the content model. <meta> in the <head> for document-level structured data.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block. Nothing else to neutralise.
  • Note: the element that bridges human text and machine data. <data value="GBP12.99">£12.99</data> — the human reads the pound sign and formatted number; the machine reads the canonical currency value. Useful for microdata, search engine structured data, and JavaScript that needs to extract values without parsing visible text. Underused — most developers reach for data-* attributes instead, which is fine but loses the semantic wrapper.
  • Verdict: semantically precise when you need both human-readable and machine-readable representations of the same value. Use it; it's underused.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Time <time></time> time.svg

User Agent StyleSheet

<time datetime="2024-01-15">January 15, 2024</time>
element.style {
}

Tabula Rasa StyleSheet

<time data-time datetime="2024-01-15">January 15, 2024</time>
:where([data-time]) {
	display: inline-block;
}
Comments : -
  • Semantics: an inline element associating a machine-readable temporal value with its human-readable content. The optional datetime attribute carries the canonical representation in ISO 8601 format — a date, time, duration, or timezone offset — while the element's text supplies what the reader sees. Used for publication dates, event timestamps, opening hours, and durations. Catalogue groups it under Computer — elements that communicate structured information in a technical context.
  • Group: Computer Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <data> for non-temporal machine-readable values. A data-* attribute when the machine-readable value doesn't need a semantic wrapper. Plain text when the date is unambiguous and machine-readability isn't needed.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block. Nothing else to neutralise.
  • Note: the datetime attribute value must follow a defined machine-readable format — ISO 8601 for dates (2024-01-15), times (14:30), durations (PT2H30M), or combined (2024-01-15T14:30). The human-readable text can say anything — "January 15th", "last Tuesday", "two and a half hours" — the machine always reads the datetime attribute. Search engines use <time> to extract structured temporal data for rich results.
  • Verdict: use it for every date and time in your document. Always include datetime. It costs nothing and gives search engines, screen readers, and JavaScript a reliable temporal anchor.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Limbo limbo_group.svg

Hgroup <hgroup></hgroup> hgroup.svg

User Agent StyleSheet

<hgroup>
	<h1>Heading 1</h1>
	<p>Paragraph 1</p>
	<h2>Heading 2</h2>
	<p>Paragraph 2</p>
</hgroup>
hgroup {
	display: block;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<hgroup data-hgroup>
	<h1 data-h1>Heading 1</h1>
	<p data-p>Paragraph 1</p>
	<h2 data-h2>Heading 2</h2>
	<p data-p>Paragraph 2</p>
</hgroup>
:where([data-hgroup]) {
}
Comments : -
  • Semantics: a wrapper grouping a single heading (<h1>–<h6>) with one or more <p> elements representing a tagline, subtitle, or alternative title. Only the contained heading contributes to the document outline. Catalogue groups it under Limbo — an element with an unstable specification history.
  • Group: Limbo Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a plain heading element followed by a <p> — functionally identical and widely understood. <header> wrapping a heading and subheading when the group needs a sectioning landmark rather than a purely typographic pairing.
  • User Agent: applies display: block and unicode-bidi: isolate.
  • Tabula Rasa: preserves both. block is the intended layout; unicode-bidi: isolate governs bidirectional text handling — neither is cosmetic.
  • Note: introduced in HTML5 to wrap a heading with its subheadings, then dropped from the spec, then reintroduced in 2022 with a narrower definition — one heading, one or more tagline paragraphs. That journey from introduction to removal to reinstatement is precisely why the catalogue puts it in Limbo.
  • Verdict: a typographic convenience with a turbulent past. Useful when a heading genuinely needs an associated tagline in the markup; unnecessary when a plain heading followed by a paragraph will do.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

King king_group.svg

Paragraph <p></p> para.svg

User Agent StyleSheet

<p>Paragraph</p>
p {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<p data-p>Paragraph</p>
:where([data-p]) {
	margin-block-start: 0px;
	margin-block-end: 0px;
}
Comments : -
  • Semantics: the paragraph — a block-level container for a self-contained run of text. The foundational unit of prose in a document, and the conceptual basis for the King category in this taxonomy: the element every document uses more than any other. Catalogue groups it under King.
  • Group: King Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a <div> when you need a block container without paragraph semantics. A <br> pair for visual line breaks — technically achieves similar spacing but conveys no semantic grouping. Neither is a good substitute; <p> is correct for prose.
  • User Agent: applies display: block, margin-block-start: 1em, margin-block-end: 1em, margin-inline-start: 0px, margin-inline-end: 0px, and unicode-bidi: isolate.
  • Tabula Rasa: zeroes the vertical margins (margin-block-start: 0px; margin-block-end: 0px). display: block and unicode-bidi: isolate are preserved — block is the intended layout and isolate governs bidirectional text handling, neither is cosmetic.
  • Note: the browser's 1em top and bottom margins are where the conventional paragraph spacing comes from. Every developer who has ever wondered why paragraphs have a gap above and below them without writing any CSS has the user-agent stylesheet to thank. The reset removes that assumption entirely — paragraph spacing becomes a deliberate author choice.
  • Verdict: the king of HTML elements for good reason. Prose lives here. The reset's job is simply to get out of the way.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Span <span></span> span.svg

User Agent StyleSheet

<span>Span</span>
element.style {
}

Tabula Rasa StyleSheet

<span data-span>Span</span>
:where([data-span]) {
	display: inline-block;
}
Comments : -
  • Semantics: a generic inline container with no semantic meaning — a styling and scripting hook for when no more specific element fits. The inline counterpart to <div>, and alongside <p>, the conceptual basis for the King category in this taxonomy. Catalogue groups it under King.
  • Group: King Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: any more specific inline element when semantics apply — <em> for emphasis, <strong> for importance, <code> for code. Use <span> only when nothing more meaningful fits. A <div> when the hook needs to be block-level.
  • User Agent: no explicit rule — element.style { }. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block so that block-level box properties — width, height, vertical margins, padding — become measurable and inspectable in DevTools. No other declarations; there is nothing cosmetic to neutralise.
  • Note: the most-used element with the least meaning. Its power is precisely its blankness — it carries whatever class, id, or data attribute you give it and nothing more. The reset's inline-block promotion makes every span a real, inspectable box, snapped to the 20px grid.
  • Verdict: the inline king. Use it sparingly — if a more specific element fits, prefer that. When nothing else does, <span> is the right tool.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Super Glue super_glue_group.svg

Anchor <a></a> anchor.svg

User Agent StyleSheet

<a href="#">Link</a>
a:-webkit-any-link {
	color: -webkit-link; /* :link computes to rgb(0, 0, 238) and :visited computes to rgb(85, 26, 139) */
	text-decoration: underline;
	cursor: pointer;
}

a:-webkit-any-link:active {
	color: -webkit-activelink; /* :active computes to rgb(255, 0, 0) */
}

:focus-visible {
	outline: -webkit-focus-ring-color auto 1px; /* computes to rgb(16, 16, 16) */
}

a:-webkit-any-link:focus-visible {
	outline-offset: 1px;
}

a:-webkit-any-link:read-write {
	cursor: text;
}

Tabula Rasa StyleSheet

<a data-a href="#">Link</a>
:where([data-a]) {
	display: inline-block;
	text-decoration: none;
}

:where([data-a]):link {
	color: rgb(0, 0, 238);
}

:where([data-a]):visited {
	color: rgb(85, 26, 139);
}

:where([data-a]):hover {
	text-decoration: underline;
}

:where([data-a]):active {
	color: rgb(255, 0, 0);
}

:where([data-a]):target-current {
	outline: none;
}

:where([data-a]):read-write {
	cursor: inherit;
}
Comments : -
  • Semantics: the anchor — an inline element creating a hyperlink to another resource, document fragment, telephone number, email address, or arbitrary URI. The href attribute supplies the destination; target, rel, download, type, and hreflang govern navigation behaviour, security posture, and metadata. The conceptual basis for the Super Glue category — the element that binds the document graph of the web. Catalogue groups it under Super Glue.
  • Group: Super Glue Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <button> when the action triggers behaviour rather than navigates. A <form> for POST submissions. window.location in JavaScript for programmatic navigation — but always prefer a real <a> when a URL is involved; it's keyboard navigable, right-clickable, and opens in new tabs correctly.
  • User Agent: applies color: -webkit-link, text-decoration: underline, and cursor: pointer via a:-webkit-any-link. The :active state changes color to -webkit-activelink. Keyboard focus triggers a global :focus-visible outline rule plus an anchor-specific outline-offset: 1px. Inside a contenteditable context (:read-write), the cursor switches from pointer to text. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the underline and all state-dependent colours by inheriting from the surrounding context. Promotes to display: inline-block. Removes the focus outline. All link affordances — colour, underline, cursor, focus ring — are deferred entirely to author styles.
  • Note: the LVHA rule — :link, :visited, :hover, :active — is the recommended order for styling link states to avoid specificity conflicts. Interestingly the UA stylesheet itself does not follow it: there is no explicit :hover rule at all. The blue unvisited color (rgb(0, 0, 238)), purple visited (rgb(85, 26, 139)), and red active (rgb(255, 0, 0)) are all handled — but hover is left entirely to the author. An <a> without an href attribute loses all link behaviour — no color, no underline, no pointer cursor, no keyboard focus, no :link or :visited states. It becomes a semantically empty inline element, indistinguishable from a <span>. Use a <button> instead for JavaScript-triggered actions.
  • Verdict: the element that makes the web a web. Without <a> there are no links, no navigation, no hypertext — just documents. The reset strips every browser default and hands all affordance decisions to the author.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Size size_group.svg

Small <small></small> small.svg

User Agent StyleSheet

<p>This text is <small>smaller</small> than other text.</p>
small {
	font-size: smaller;
}

Tabula Rasa StyleSheet

<p data-p>This text is <small data-small>smaller</small> than other text.</p>
:where([data-small]) {
	display: inline-block;
	font-size: inherit;
}
Comments : -
  • Semantics: an inline element marking side comments and small print — copyright notices, legal disclaimers, attributions, licensing terms. Does not convey emphasis or de-emphasis; it is purely a typographic signal for supplementary fine print. Catalogue groups it under Size — elements whose only browser default is to alter the rendered size of text.
  • Group: Size Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <span> with a reduced font-size when fine print is purely presentational and carries no semantic meaning. <sub> or <sup> when the size reduction is tied to subscript or superscript positioning rather than fine-print convention.
  • User Agent: applies font-size: smaller — a relative keyword that steps the size down one notch from the inherited value rather than resolving to a fixed measurement. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the size to the inherited value (font-size: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: font-size: smaller is a relative keyword, not a fixed value — it steps down the inherited size on the browser's internal font-size scale. The exact pixel reduction depends on what the parent inherits. The reset replaces this with inherit, meaning <small> renders at exactly the same size as surrounding text until the author says otherwise.
  • Verdict: semantically honest about its purpose — fine print, not emphasis. The reset removes the size distinction entirely; the author decides whether fine print actually looks small.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Subscript <sub></sub> sub.svg

User Agent StyleSheet

H<sub>2</sub>O
sub {
	vertical-align: sub;
	font-size: smaller;
}

Tabula Rasa StyleSheet

H<sub data-sub>2</sub>O
:where([data-sub]) {
	display: inline-block;
	vertical-align: bottom;
	font-size: 0.9em;
	line-height: 1;
}
Comments : -
  • Semantics: an inline element rendering its content as subscript — conventionally lowered below the baseline and reduced in size. Used for typographic conventions that carry meaning: chemical formulas (H2O), mathematical indices, footnote references, and certain alphabetic notations. Catalogue groups it under Size — elements whose only browser default is to alter the rendered size and position of text.
  • Group: Size Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <span> with vertical-align: sub and a reduced font-size when the positioning is purely presentational. CSS font-variant-position: sub for OpenType fonts that include a dedicated subscript glyph — sharper than browser-synthesised scaling.
  • User Agent: applies vertical-align: sub and font-size: smaller — a relative keyword stepping the size down one notch from the inherited value. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns alignment to baseline (vertical-align: baseline), returns size to the inherited value (font-size: inherit), and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the reset deliberately removes the lowering and shrinking. A subscript that doesn't look like a subscript is a deliberate choice — the author must re-apply vertical-align: sub and a size reduction if the visual convention is wanted. This is correct: not every use of <sub> needs to look like a chemistry textbook.
  • Verdict: semantically precise — use it when the content is genuinely subscript in meaning, not just visually smaller. The reset strips the appearance; the semantic stays in the markup.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Superscript <sup></sup> sup.svg

User Agent StyleSheet

x<sup>2</sup>
sup {
	vertical-align: super;
	font-size: smaller;
}

Tabula Rasa StyleSheet

x<sup data-sup>2</sup>
:where([data-sup]) {
	display: inline-block;
	vertical-align: top;
	font-size: 0.9em;
	line-height: 1;
}
Comments : -
  • Semantics: an inline element rendering its content as superscript — conventionally raised above the baseline and reduced in size. Used for typographic conventions that carry meaning: mathematical exponents (x2), ordinal indicators, footnote markers, and certain abbreviation conventions. Catalogue groups it under Size — elements whose only browser default is to alter the rendered size and position of text.
  • Group: Size Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <span> with vertical-align: super and a reduced font-size when the positioning is purely presentational. CSS font-variant-position: super for OpenType fonts that include a dedicated superscript glyph — sharper than browser-synthesised scaling.
  • User Agent: applies vertical-align: super and font-size: smaller — a relative keyword stepping the size down one notch from the inherited value. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns alignment to baseline (vertical-align: baseline), returns size to the inherited value (font-size: inherit), and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the mirror of <sub> — same reset logic, opposite direction. The raising and shrinking are removed; the author re-applies vertical-align: super and a size reduction when the visual convention is genuinely needed. Mathematical notation, footnote numbers, and ordinal suffixes all look different from each other — the reset gives the author a clean slate to style each case appropriately.
  • Verdict: semantically precise — use it when the content is genuinely superscript in meaning, not just visually raised. The reset strips the appearance; the semantic stays in the markup.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Ghosts ghosts_group.svg

DOCTYPE <!DOCTYPE html> doctype.svg

Syntax

<!DOCTYPE html>
/* No matching selector or style */

Notes

<!DOCTYPE html>
/* Not an HTML element — no CSS reset needed */
Comments : -
  • Semantics: a document type declaration — not an HTML element. Required as the very first line of every HTML document, before the opening <html> tag. The parser recognises it as a preamble, not as content. Catalogue groups it under Ghosts — parser-level constructs that are not elements at all.
  • Group: Ghosts
  • Alternatives: none. Omitting the doctype causes browsers to fall back to quirks mode — a legacy rendering path that emulates pre-standardisation behaviour. There is no substitute; every HTML document needs exactly this declaration, exactly here.
  • User Agent: no CSS rules. As a parser directive rather than an element, it cannot be targeted by any selector and carries no associated styles.
  • Tabula Rasa: no reset needed or possible. The declaration has no visual representation and no box in the rendering tree.
  • Note: its sole effect is to trigger no-quirks (standards) rendering mode. Without it, the browser applies quirks mode — legacy layout rules retained for backward compatibility with documents authored before standardisation. The declaration itself is case-insensitive; <!DOCTYPE html>, <!doctype html>, and <!DoCtYpE hTmL> are all equivalent.
  • Verdict: one line, written once, never touched again — but it controls whether the entire document renders in standards mode or not. Always include it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Comment <!-- comment --> comments.svg

Syntax

<!-- HTML comment -->
<!--#include virtual="header.html" -->
<?php include 'header.php'; ?>
/* No matching selector or style */

Notes

<!-- HTML comment -->
<!--#include virtual="header.html" -->
<?php include 'header.php'; ?>
/* Not HTML elements — no CSS reset needed */
Comments : -
  • Semantics: a parser-level construct, not an HTML element. Recognised by the HTML tokeniser as content to be ignored and stripped before rendering — used for in-source developer notes, conditional markup hints, or temporarily disabled code. Catalogue groups it under Ghosts — parser-level constructs that are not elements at all.
  • Group: Ghosts
  • Alternatives: none for source annotations — comments are the only native way to leave notes in HTML markup. For conditionally rendered content, modern practice prefers server-side templating or JavaScript over comment-based hacks.
  • User Agent: no CSS rules. Comments cannot be targeted by any CSS selector and carry no associated styles — they are stripped from the DOM entirely.
  • Tabula Rasa: no reset needed or possible. Comments have no visual representation and no box in the rendering tree.
  • Note: server-side include directives such as <!--#include virtual="..." --> borrow the comment syntax but are processed by the web server before the response reaches the client — the browser never sees the directive, only its substituted output. Server-side language tags such as <?php ... ?> are unrelated to comment syntax entirely; they belong to their respective language parsers and are likewise evaluated before the document reaches the browser.
  • Verdict: invisible to the browser, visible to anyone who opens DevTools or views source. Write comments for the next developer — including yourself six months from now. Don't leave sensitive information in them.
  • HTML Living Standard — Specification

CDATA <![CDATA[ ... ]]> cdata.svg

Syntax

<![CDATA[ This is CDATA content ]]>
/* No matching selector or style */

Notes

<![CDATA[ This is CDATA content ]]>
/* Not an HTML element — no CSS reset needed */
Comments : -
  • Semantics: an XML construct, not an HTML element. Instructs the parser to treat its contents as literal character data rather than parsing them as markup — useful for embedding raw text containing <, >, or & without escaping. Catalogue groups it under Ghosts — parser-level constructs that are not elements at all.
  • Group: Ghosts
  • Alternatives: HTML entity encoding — &lt;, &gt;, &amp; — for embedding reserved characters in HTML. Within <script> and <style> elements, the content is already treated as raw text by the HTML parser, so CDATA wrapping is unnecessary.
  • User Agent: no CSS rules. As a parser-level construct it cannot be targeted by any selector and carries no associated styles.
  • Tabula Rasa: no reset needed or possible. CDATA has no visual representation and no box in the rendering tree.
  • Note: in HTML, the construct has no defined meaning — the HTML parser recognises it as a malformed comment and discards it. The one practical exception is within inline <svg> or <math> subtrees embedded in HTML, where the foreign-content parser applies XML rules and CDATA sections retain their original semantics. Outside those contexts, writing CDATA in HTML does nothing.
  • Verdict: an XML relic that survives only inside SVG and MathML embedded in HTML. Everywhere else it is either ignored or unnecessary. Know it exists; rarely write it.
  • MDN Web Docs — Reference
  • HTML Living Standard — Specification

PCDATA PCDATA pcdata.svg

Definition

Parsed character data — text content in HTML
/* No matching selector or style */

Notes

Parsed character data — text content in HTML
/* Not an HTML element — no CSS reset needed */
Comments : -
  • Semantics: a term inherited from SGML and XML denoting "parsed character data" — the text content between element tags that the parser inspects for entity references and markup. Not formally defined in the HTML5 specification, which uses the terms "text" and "character data" instead; the label survives informally to distinguish ordinary text from CDATA sections where parsing is suspended. Catalogue groups it under Ghosts — constructs that are not elements at all.
  • Group: Ghosts
  • Alternatives: not applicable — PCDATA is not an element but a category of content. Text nodes in the DOM are its implementation. There is no alternative to text content; it is the foundation of everything rendered on the page.
  • User Agent: no CSS rules. Text nodes cannot be targeted directly by any CSS selector — styling is achieved by targeting the containing element.
  • Tabula Rasa: no reset needed or possible. PCDATA has no element, no box, and no user-agent declarations to neutralise.
  • Note: the distinction between PCDATA and CDATA matters in XML — PCDATA is parsed for entities and markup, CDATA is not. In HTML the distinction is largely academic; the HTML parser has its own rules for raw text elements (<script>, <style>) that predate the CDATA concept. The term appears here because it still shows up in older documentation, DTDs, and conversations about the web's SGML heritage.
  • Verdict: not something you write — something the parser does to everything you write. Every character between tags is PCDATA. Understanding it clarifies why &lt; is necessary and why <script> content behaves differently from paragraph text.
  • XML 1.0 Specification — Reference
  • HTML Living Standard — Specification

Zombie zombie_group.svg

Big <big></big> big.svg

User Agent StyleSheet

<big>Larger text</big>
big {
	font-size: larger;
}

Tabula Rasa StyleSheet

<big data-big>Larger text</big>
:where([data-big]) {
	font-size: inherit;
	display: inline-block;
}
Comments : -
  • Semantics: an obsolete inline element historically used to render text one size larger than its surrounding context. Deprecated in HTML5, retained by user agents for legacy compatibility, and superseded by the font-size CSS property or by semantically appropriate elements such as <strong> or a styled <span>. Catalogue groups it under Zombie — deprecated elements the browsers refuse to bury.
  • Group: Zombie Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: a <span> with an explicit font-size when larger text is purely presentational. A semantically appropriate element — <strong>, <em>, a heading — when the size increase is meant to convey importance or hierarchy.
  • User Agent: applies font-size: larger — a relative keyword that steps the size up one notch from the inherited value. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the size to the inherited value (font-size: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the exact inverse of <small> — same mechanism, opposite direction, same fate. Where <small> survived deprecation by finding a semantic niche (fine print), <big> did not. It was purely presentational with no semantic argument to save it. Browsers still render it correctly; the spec simply no longer endorses it.
  • Verdict: dead but functional. Don't write it in new code — use CSS or a semantic element. The reset is there for legacy documents that still contain it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Acronym <acronym></acronym> acronym.svg

User Agent StyleSheet

<acronym title="HyperText Markup Language">HTML</acronym>
acronym[title] {
	text-decoration: underline dotted;
}

Tabula Rasa StyleSheet

<acronym data-acronym title="HyperText Markup Language">HTML</acronym>
:where([data-acronym]) {
	display: inline-block;
	text-decoration: none;
}
Comments : -
  • Semantics: an obsolete inline element historically used to mark acronyms — words formed from the initial letters of a phrase and pronounced as a word, distinct from general abbreviations. Deprecated in HTML5 in favour of <abbr>, which covers both acronyms and abbreviations under a single semantic, and retained by user agents for legacy compatibility. Catalogue groups it under Zombie — deprecated elements the browsers refuse to bury.
  • Group: Zombie Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <abbr> — the living replacement, covering both acronyms and abbreviations. Pair it with a title attribute for the expanded form. No other element is needed; <abbr> handles every case <acronym> was designed for.
  • User Agent: applies text-decoration: underline dotted via the acronym[title] selector — only when the title attribute is present. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the underline (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the distinction between an acronym (NATO, laser, radar — pronounced as a word) and an initialism (HTML, CSS, FBI — spelled out letter by letter) was considered meaningful enough to warrant a separate element. HTML5 disagreed and collapsed both into <abbr>. The linguistic distinction still exists; the element no longer does.
  • Verdict: replaced entirely by <abbr>. Don't write it in new code. The reset exists for legacy documents that still contain it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Strikethrough <strike></strike> strike.svg

User Agent StyleSheet

<strike>Strikethrough text</strike>
strike {
	text-decoration: line-through;
}

Tabula Rasa StyleSheet

<strike data-strike>Strikethrough text</strike>
:where([data-strike]) {
	text-decoration: none;
	display: inline-block;
}
Comments : -
  • Semantics: an obsolete inline element historically used to render text with a horizontal line through its centre. Deprecated in HTML5 in favour of <s>, which marks content that is no longer accurate or relevant, and <del>, which marks content removed as part of an edit. Retained by user agents for legacy compatibility. Catalogue groups it under Zombie — deprecated elements the browsers refuse to bury.
  • Group: Zombie Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <s> for content that is no longer accurate or relevant. <del> for editorially removed content, paired with <ins> for what replaced it. A <span> with text-decoration: line-through when the strikethrough is purely decorative with no editorial meaning.
  • User Agent: applies text-decoration: line-through. display resolves to the CSS initial value of inline.
  • Tabula Rasa: removes the strikethrough (text-decoration: none) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the element that split into two. HTML5 recognised that strikethrough carries two distinct meanings — inaccurate content (<s>) and deleted content (<del>) — and deprecated the single presentational <strike> in favour of the semantic pair. The visual result is identical; the meaning is now explicit in the markup.
  • Verdict: replaced by <s> and <del>. Don't write it in new code. The reset exists for legacy documents that still contain it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Teletype <tt></tt> teletype.svg

User Agent StyleSheet

<tt>Teletype text</tt>
tt {
	font-family: monospace;
}

Tabula Rasa StyleSheet

<tt data-tt>Teletype text</tt>
:where([data-tt]) {
	font-family: Consolas, "Courier New", monospace;
	display: inline-block;
}
Comments : -
  • Semantics: an obsolete inline element historically used to render text in a fixed-width monospaced typeface evocative of teletype terminals and early computer output. Deprecated in HTML5 in favour of semantically appropriate elements — <code> for code, <samp> for sample output, <kbd> for keyboard input, <var> for variables — or styled with font-family when the monospace is purely presentational. Retained by user agents for legacy compatibility. Catalogue groups it under Zombie — deprecated elements the browsers refuse to bury.
  • Group: Zombie Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <code> for inline code snippets. <samp> for sample program output. <kbd> for keyboard input. <var> for variable names. A <span> with font-family: monospace when none of the semantic elements fit and the monospace is purely decorative.
  • User Agent: applies font-family: monospace. display resolves to the CSS initial value of inline.
  • Tabula Rasa: returns the typeface to the inherited value (font-family: inherit) and promotes to display: inline-block. All typographic and box-model differentiation is deferred to author styles.
  • Note: the element that had one job — monospace — and got replaced by four elements that do the same job with meaning attached. The visual result of <tt>, <code>, <samp>, <kbd>, and <var> is identical by default; what differs is what the markup communicates to screen readers, search engines, and the next developer reading the source.
  • Verdict: entirely replaced by the Computer group. Don't write it in new code. The reset exists for legacy documents that still contain it.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Relics relics_group.svg

Comment <comment></comment> comment.svg

User Agent StyleSheet

<comment data="URL">This content should be invisible</comment>
element.style {
}

Tabula Rasa StyleSheet

<comment data-comment data="URL">This content should be invisible</comment>
:where([data-comment]) {
}
Comments : -
  • Semantics: a non-standard element invented by Tim Berners-Lee in the early 1990s, intended to create invisible comment containers that could carry a data attribute pointing to a related resource (similar in spirit to cite on blockquote). Never adopted into any official HTML specification. Catalogue groups it under Relics — elements that were never standard but linger in forgotten corners of the web.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: standard HTML comments <!-- --> for truly invisible developer notes. <div> with style="display: none" if you need an invisible container that still exists in the DOM. The <comment> element has never worked as intended in most browsers.
  • User Agent: no CSS rules — element.style { }. The browser applies no default styling. display resolves to its CSS initial value of inline, so the element's content renders as visible plain text in modern browsers.
  • Tabula Rasa: empty rule. The reset takes no position on this element — it remains visible, documenting what browsers actually do rather than what was originally intended. The element is not invisible; its content shows up on the page as regular text.
  • Note: the element that was supposed to be invisible but isn't. Honoured only by Internet Explorer 8 and earlier; every other browser renders it as visible plain text. The data attribute was meant to hold a URL, but no browser ever implemented that behavior. Not to be confused with the standard HTML comment syntax (<!-- -->), which actually IS invisible. This is a relic of a relic — a dead idea preserved only because early websites used it and browsers can't break compatibility.
  • Verdict: a historical curiosity. It doesn't work as intended. Don't use it. If you want invisible content, use real HTML comments or CSS display: none. The reset leaves it visible because that's what browsers actually do.
  • MDN Web Docs — No entry (non-standard element)
  • Can I Use — No support (non-standard element)

Spacer <spacer></spacer> spacer.svg

User Agent StyleSheet

Before spacer
<spacer type="horizontal" size="50"></spacer>
After spacer
element.style {
}

Tabula Rasa StyleSheet

Before spacer
<spacer data-spacer type="horizontal" size="50"></spacer>
After spacer
:where([data-spacer]) {
}
Comments : -
  • Semantics: a historical element from the early web, predating the standard <img> element. Never officially adopted into the HTML specification. Catalogue groups it under Relics — elements that the parser silently transforms into something else.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <img> — the standard, correct, universally supported image element. There is never a reason to use <image> instead of <img>.
  • User Agent: the element never exists in the DOM as <image>. The parser converts it to <img> before the DOM is constructed. As a result, it inherits all UA styles from img: overflow-clip-margin: content-box and overflow: clip.
  • Tabula Rasa: because the element becomes <img> at the parser level, the reset treats it as img. If data-img is present and survives conversion, the element receives the same reset styles as img: display: inline-block, width: 100%, max-width: 100%, height: auto, and object-fit: fill. If data-img is not present, the element reverts to standard img behavior — no reset.
  • Note: the element that tried to be an image and got demoted. In the very early web, before the standard settled, some people wrote <image> expecting it to work. Browsers had to decide what to do. The decision: silently rewrite <image> to <img> at the parser level. The element never exists as <image> in the DOM — it's <img> from the moment the parser sees it. If you write <image src="#"></image>, the browser shows an image. But you shouldn't. Use <img>.
  • Verdict: a historical curiosity that still works by accident. The parser converts it to <img>, so it functions — but it's not standard, not correct, and not guaranteed to stay that way. Use <img>.
  • MDN Web Docs — Reference (historical note)
  • Can I Use — Works in all browsers (due to parser conversion), but not standard

Image <image></image> image.svg

User Agent StyleSheet

<image src="#"></image>
/* Element is converted to <img> at parser level and gets the same styles as <img> */

Tabula Rasa StyleSheet

<image data-img src="#"></image>
/* Element is converted to <img> at parser level and gets the same styles as <img> */
Comments : -
  • Semantics: a historical element from the early web, predating the standard <img> element. Never officially adopted into the HTML specification. Catalogue groups it under Relics — elements that the parser silently transforms into something else.
  • Group: Relics Cardinality: Infinite Layout: Inline (becomes <img> at parser level) Voidity: Non Void (but behaves as void after conversion)
  • Alternatives: <img> — the standard, correct, universally supported image element. There is never a reason to use <image> instead of <img>.
  • User Agent: the element never exists in the DOM as <image>. The parser converts it to <img> before the DOM is constructed. As a result, it inherits all UA styles from img: overflow-clip-margin: content-box and overflow: clip.
  • Tabula Rasa: because the element becomes <img> at the parser level, the reset treats it as img. If data-img is present and survives conversion, the element receives the same reset styles as img: display: inline-block, width: 100%, max-width: 100%, height: auto, and object-fit: fill. If data-img is not present, the element reverts to standard img behavior (no reset).
  • Note: the element that tried to be an image and got demoted. In the very early web, before the standard settled, some people wrote <image> expecting it to work. Browsers had to decide what to do. The decision: silently rewrite <image> to <img> at the parser level. The element never exists as <image> in the DOM — it's <img> from the moment the parser sees it. Preserved here for historical documentation and because many early websites used this tag, creating a legacy dependency browsers cannot drop. If you write <image src="#"></image>, the browser shows an image. But you shouldn't. Use <img>.
  • Verdict: a historical curiosity that still works by accident. The parser converts it to <img>, so it functions — but it's not standard, not correct, and not guaranteed to stay that way. Use <img>. The reset handles it the same as img when data-img is present.
  • MDN Web Docs — Reference (historical note)
  • Can I Use — Works in all browsers (due to parser conversion), but not standard

Applet <applet></applet> applet.svg

User Agent StyleSheet

<applet code="MyApplet.class" width="300" height="300">
	<param name="color" value="blue">
	Your browser does not support Java applets.
</applet>
element.style {
}

Tabula Rasa StyleSheet

<applet data-applet code="MyApplet.class" width="300" height="300">
	<param data-param name="color" value="blue">
	Your browser does not support Java applets.
</applet>
:where([data-applet]) {
}
Comments : -
  • Semantics: legacy element used to embed Java applets in web pages. Obsolete — removed from HTML specification. Catalogue groups it under Relics — elements that died because the technology they depended on died with them.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <object>, <embed>, Canvas API, WebAssembly, or plain JavaScript. Anything but this.
  • User Agent: no CSS rules — element.style { }. The element defaults to display: inline (CSS initial value) when rendered. Modern browsers have removed NPAPI plugin support entirely, so nothing renders.
  • Tabula Rasa: empty rule. There's nothing to neutralise on an element that no longer functions. The reset leaves it untouched.
  • Note: the element that powered interactive web content before JavaScript grew up. From the mid-1990s to the late 2000s, Java applets were everywhere — games, charts, visualizations, animations. Then security happened. NPAPI plugins were a constant vulnerability. Apple banned them. Chrome followed. Firefox followed. Oracle deprecated Java applets in Java 9 (2017) and removed them entirely in Java 17 (2021). Modern browsers have completely removed NPAPI support. The element renders nothing. The content inside (the fallback text) shows instead. A tombstone for a once-revolutionary technology.
  • Verdict: dead and buried. The reset leaves it alone because there's nothing left to reset. Use modern web technologies instead.
  • MDN Web Docs — Reference
  • Can I Use — No support (obsolete, removed from browsers)

Param <param /> param.svg

User Agent StyleSheet

<applet code="MyApplet.class" width="300" height="300">
	<param name="color" value="blue">
	Your browser does not support Java applets.
</applet>
param {
	display: none;
}

Tabula Rasa StyleSheet

<applet data-applet code="MyApplet.class" width="300" height="300">
	<param data-param name="color" value="blue">
	Your browser does not support Java applets.
</applet>
:where([data-param]) {
}
Comments : -
  • Semantics: a void element used to define parameters for an <applet> or <object> element. Obsolete — removed from HTML specification. Catalogue groups it under Relics — configuration data for dead technologies.
  • Group: Relics Cardinality: Infinite Layout: None Voidity: Void
  • Alternatives: JavaScript configuration objects, data attributes, or JSON. Anything that doesn't require a plugin.
  • User Agent: applies display: none. The element is never rendered. Only the name and value attributes were ever used — and now nothing uses them.
  • Tabula Rasa: empty rule. Preserves display: none. Nothing to neutralise on an element that was always invisible.
  • Note: the element that passed notes to a dead technology. Like <applet>, this element died because the plugins it configured were removed from browsers. NPAPI is gone. Java applets are gone. <param> sits in the DOM, invisible, doing nothing — a configuration file for a program that was never installed.
  • Verdict: completely obsolete. The reset leaves it untouched. Use modern JavaScript configuration instead.
  • MDN Web Docs — Reference
  • Can I Use — No support (obsolete)

Marquee <marquee></marquee> marquee.svg

User Agent StyleSheet

<marquee>This text would scroll across the screen in 1990s IE</marquee>
:host {
	display: inline-block;
	overflow: hidden;
	text-align: initial;
	white-space: nowrap;
}

marquee {
	display: inline-block;
	width: -webkit-fill-available;
}

Tabula Rasa StyleSheet

<marquee data-marquee>This text would scroll across the screen in 1990s IE</marquee>
:where([data-marquee]) {
}
Comments : -
  • Semantics: a Microsoft Internet Explorer-specific element from the 1990s that created scrolling text. Never adopted into any HTML specification. Catalogue groups it under Relics — a living fossil from the browser wars.
  • Group: Relics Cardinality: Infinite Layout: Inline-Block Voidity: Non Void
  • Alternatives: CSS animations for intentional motion. A static element for everything else.
  • User Agent: applies explicit styles: :host { display: inline-block; overflow: hidden; white-space: nowrap; } and marquee { display: inline-block; width: -webkit-fill-available; }. The element defaults to scrolling right-to-left. This behavior is not specified in any standard — it's pure legacy.
  • Tabula Rasa: empty rule. The reset preserves this behavior. Resetting a living fossil would erase the history.
  • Note: unlike <blink>, the <marquee> element still animates in modern browsers — a cockroach after nuclear winter, still scrolling while <blink> is truly dead.
  • Verdict: living fossil. Still scrolls. Use CSS animations instead — and use them sparingly.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Center <center></center> center.svg

User Agent StyleSheet

<center>This text is centered in older browsers</center>
center {
	display: block;
	text-align: -webkit-center;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<center data-center>This text is centered in older browsers</center>
:where([data-center]) {
}
Comments : -
  • Semantics: an obsolete HTML element that centers its content horizontally. Deprecated in HTML4, removed in HTML5. Catalogue groups it under Relics — presentational elements that CSS replaced.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: CSS text-align: center on the parent for inline content, or margin: 0 auto on block elements. Flexbox and Grid offer better centering options.
  • User Agent: applies display: block, text-align: -webkit-center (or -moz-center in Firefox), and unicode-bidi: isolate.
  • Tabula Rasa: empty rule. The reset preserves its historical behavior. Resetting centering would be taking a position — the reset doesn't do that.
  • Note: the element that taught a generation of developers that centering was hard. Before CSS matured, <center> was the only reliable way to center anything. Then CSS happened. Flexbox happened. Grid happened. Now <center> is just a bad memory. Modern browsers still support it for legacy compatibility, but it should not be used in new websites.
  • Verdict: obsolete. Use CSS instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Directory <dir></dir> directory.svg

User Agent StyleSheet

<dir>
	<li>File 1</li>
	<li>File 2</li>
	<li>File 3</li>
</dir>
dir {
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<dir data-dir>
	<li>File 1</li>
	<li>File 2</li>
	<li>File 3</li>
</dir>
:where([data-dir]) {
}
Comments : -
  • Semantics: an obsolete HTML element used to create directory lists. Deprecated in HTML4, removed in HTML5. Intended for lists of files or directories — a use case that never materialized. Catalogue groups it under Relics — elements that lost their purpose.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <ul> for unordered lists. <ol> for ordered lists. There is no reason to use <dir>.
  • User Agent: applies the same styles as <ul>: display: block, list-style-type: disc, margin-block: 1em, padding-inline-start: 40px, and unicode-bidi: isolate.
  • Tabula Rasa: empty rule. Relics are preserved as-is. No reset applied.
  • Note: a solution in search of a problem. The <dir> element was meant for file directories — a use case that never justified a separate element. Browsers just style it exactly like <ul> and always have. Use <ul> instead. It's clearer, more flexible, and not obsolete.
  • Verdict: obsolete and redundant. Use <ul> instead.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Command <command></command> command.svg

User Agent StyleSheet

<command label="Say Hi" onclick="alert('Hi')">Command</command>
element.style {
}

Tabula Rasa StyleSheet

<command data-command label="Say Hi" onclick="alert('Hi')">Command</command>
:where([data-command]) {
}
Comments : -
  • Semantics: an experimental HTML element proposed in HTML5 to represent executable commands (menu items, toolbar buttons). Never implemented in any browser. Removed from the HTML specification. Catalogue groups it under Relics — elements that died before they were born.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <button> for clickable commands. <a> for navigation. JavaScript event handlers for custom behavior.
  • User Agent: no CSS rules — element.style { }. No browser ever implemented this element.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser supports.
  • Note: the element that never was. Intended for use with <menu> elements, but the feature never shipped. No modern browser supports it. Was intended to represent toolbar buttons, menu items, and other interactive commands. Removed from the specification when it became clear no one would implement it.
  • Verdict: never implemented. Completely useless. Use <button> instead.
  • MDN Web Docs — Reference
  • Can I Use — No support (never implemented)

Plaintext <plaintext> plaintext.svg

User Agent StyleSheet

<p>Before plaintext</p>
<plaintext>After plaintext, everything is raw text <b>bold</b> won't work
plaintext {
	display: block;
	font-family: monospace;
	unicode-bidi: isolate;
	white-space: pre;
	margin-block: 1em 1em;
	margin-inline: 0px;
}

Tabula Rasa StyleSheet

<p data-p>Before plaintext</p>
<plaintext data-plaintext>After plaintext, everything is raw text <b>bold</b> won't work
:where([data-plaintext]) {
}
Comments : -
  • Semantics: an obsolete HTML element that causes everything after it to be rendered as plain text — no HTML parsing occurs. From the very early web (pre-1995). Never officially adopted into the HTML specification. Catalogue groups it under Relics — the nuclear option of early HTML.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: No Close
  • Alternatives: <pre> with escaped HTML characters. CSS white-space: pre. Or just don't stop parsing HTML — that's usually the right answer.
  • User Agent: applies display: block, font-family: monospace, white-space: pre, margin-block: 1em, and unicode-bidi: isolate.
  • Tabula Rasa: empty rule. The reset takes no position on this ancient disaster. It keeps its monospace font and block display.
  • Note: the element that broke HTML. Unlike every other element, <plaintext> has no closing tag — not even />. Everything after the opening tag becomes raw text, including any subsequent HTML tags or closing brackets. Type <plaintext> anywhere in your document and the rest of your page becomes plain text. No exceptions. This is not a bug. It was designed this way. In 1993. Use <pre> with escaped HTML characters or CSS white-space: pre instead.
  • Verdict: dangerously obsolete. One tag kills your entire page. Never use it. The reset leaves it untouched, but you should leave it untouched too — by never writing it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional — unfortunately)

Xmp <xmp></xmp> xmp.svg

User Agent StyleSheet

<xmp>
	<b>This bold tag is not parsed</b> — it appears as raw text.
</xmp>
xmp {
	display: block;
	font-family: monospace;
	unicode-bidi: isolate;
	white-space: pre;
	margin-block: 1em 1em;
	margin-inline: 0px;
}

Tabula Rasa StyleSheet

<xmp data-xmp>
	<b>This bold tag is not parsed</b> — it appears as raw text.
</xmp>
:where([data-xmp]) {
}
Comments : -
  • Semantics: an obsolete HTML element used to display example text — content inside is not parsed as HTML. From the very early web (pre-1995). Never officially adopted into the HTML specification. Catalogue groups it under Relics — the safer cousin of <plaintext>.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <pre> with escaped HTML characters. CSS white-space: pre. Or just use normal HTML — parsing is usually what you want.
  • User Agent: applies display: block, font-family: monospace, white-space: pre, margin-block: 1em, and unicode-bidi: isolate — identical to <plaintext>.
  • Tabula Rasa: empty rule. The reset preserves its historical behavior. No reset applied.
  • Note: unlike <plaintext> (which has no closing tag and breaks the entire page), <xmp> only affects content between its opening and closing tags. It's the safer, more polite version of "stop parsing HTML." Still obsolete. Still shouldn't be used. But at least it won't nuke the rest of your document. Use <pre> with escaped HTML characters instead.
  • Verdict: obsolete but less dangerous than <plaintext>. Still, don't use it. Use <pre> with escaped HTML instead.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Listing <listing></listing> listing.svg

User Agent StyleSheet

<listing>
	This is preformatted text preserved exactly as written.
</listing>
listing {
	display: block;
	font-family: monospace;
	unicode-bidi: isolate;
	white-space: pre;
	margin-block: 1em 1em;
	margin-inline: 0px;
}

Tabula Rasa StyleSheet

<listing data-listing>
	This is preformatted text preserved exactly as written.
</listing>
:where([data-listing]) {
}
Comments : -
  • Semantics: an obsolete HTML element used to display preformatted text (like <pre>). From the very early web (pre-1995). Not to be confused with list elements (<ul>, <ol>, <dl>) — the name "listing" is misleading. Catalogue groups it under Relics — the forgotten middle child of early preformatted elements.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: <pre> for preformatted text. CSS white-space: pre. <code> for code snippets. Anything but this.
  • User Agent: applies display: block, font-family: monospace, white-space: pre, margin-block: 1em, and unicode-bidi: isolate — identical to <xmp>.
  • Tabula Rasa: empty rule. The reset preserves its historical behavior. No reset applied.
  • Note: the element with the misleading name. "Listing" sounds like a list — but it's actually preformatted text, a slightly different variant of <pre>. Why does it exist? Early web. Browser wars. Competing standards. The important thing: it's obsolete. Use <pre> for preformatted text. Don't use <listing>. Your future self will thank you.
  • Verdict: obsolete and confusingly named. Use <pre> instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Keygen <keygen> keygen.svg

User Agent StyleSheet

<keygen name="security">
element.style {
}

Tabula Rasa StyleSheet

<keygen data-keygen name="security">
:where([data-keygen]) {
}
Comments : -
  • Semantics: an obsolete HTML element used to generate key pairs for form submission. Part of HTML5, then removed. Intended for client-side certificate generation in web applications — a good idea that never took off. Catalogue groups it under Relics — good intentions, poor adoption.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: No Close
  • Alternatives: JavaScript + Web Crypto API. Modern TLS and certificate management. Server-side key generation. Anything that doesn't rely on a dead HTML element.
  • User Agent: no CSS rules — element.style { }. The element defaults to display: inline. Modern browsers have removed support entirely.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no modern browser supports.
  • Note: a solution in search of a problem. Born in HTML5 (2014), dead by 2018. Chrome removed it in 2018. Firefox followed. Safari never really supported it. The Web Crypto API and modern TLS made it irrelevant before it ever gained traction. Unlike most Relics which died slowly through neglect, <keygen> was actively removed — browsers explicitly dropped support rather than just ignoring it. Use JavaScript + Web Crypto instead.
  • Verdict: obsolete. Removed from browsers. Use Web Crypto API instead. The reset leaves it untouched, but you won't find a browser that still supports it.
  • MDN Web Docs — Reference
  • Can I Use — No support (removed from browsers)

Layer <layer></layer> layer.svg

User Agent StyleSheet

<layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
element.style {
}

Tabula Rasa StyleSheet

<layer data-layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer data-ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer data-nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
:where([data-layer]) {
}
Comments : -
  • Semantics: a Netscape Navigator 4 proprietary element (1997) for absolute positioning — the precursor to CSS position: absolute. Used alongside <ilayer> (inline layer) and <nolayer> (fallback for non-supporting browsers). Never adopted into any HTML specification. Catalogue groups it under Relics — a solution that became obsolete the moment CSS caught up.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS position: absolute or position: fixed. Flexbox and Grid for layout. The entire modern CSS positioning model replaced this element entirely.
  • User Agent: no CSS rules — element.style { }. Modern browsers treat it as an unknown inline element. The top, left, width, and height attributes have no effect.
  • Tabula Rasa: empty rule. Nothing to neutralise — the element does nothing in modern browsers.
  • Note: Netscape Navigator 4 introduced a proprietary positioning system based on <layer> (absolute) and <ilayer> (inline/relative) elements. It was Netscape's answer to positioning before CSS position was widely supported. Internet Explorer went a different route with CSS. CSS won. Netscape lost. The entire layer system — <layer>, <ilayer>, and <nolayer> — became obsolete the moment CSS 2 positioning was adopted. These three elements share a single test file because they only make sense together.
  • Verdict: a fascinating dead end from the browser wars. CSS replaced it entirely. Don't use it.
  • MDN Web Docs — Reference
  • Can I Use — No support (Netscape only, never standardised)

Ilayer <ilayer></ilayer> ilayer.svg

User Agent StyleSheet

<layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
element.style {
}

Tabula Rasa StyleSheet

<layer data-layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer data-ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer data-nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
:where([data-ilayer]) {
}
Comments : -
  • Semantics: a Netscape Navigator 4 proprietary element (1997) for inflow (relative) positioning — the precursor to CSS position: relative. Catalogue groups it under Relics — the inline layer that couldn't survive CSS.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS position: relative. CSS transform. CSS Grid. CSS Flexbox. Literally anything modern.
  • User Agent: no CSS rules — element.style { }. The element defaults to display: inline as an unrecognised tag. Modern browsers ignore the left, top, and z-index attributes completely.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser implements.
  • Note: part of the Netscape layer trilogy — <layer> (absolute), <ilayer> (inline/relative), and <nolayer> (fallback). <ilayer> was supposed to position content inline, flowing with surrounding text while still being offset. CSS2's position: relative arrived in 1998 and did the same thing, but better, without new elements. Modern browsers treat <ilayer> as an unrecognized tag. The left and top attributes do nothing. The content renders as plain inline text — no offset, no layering, just words. A historical curiosity for positioning nerds.
  • Verdict: completely obsolete. Use CSS position: relative instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — No support (obsolete, removed from browsers)

Nolayer <nolayer></nolayer> nolayer.svg

User Agent StyleSheet

<layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
element.style {
}

Tabula Rasa StyleSheet

<layer data-layer top="100" left="50">
	<p>This is an absolute layer floating over the page.</p>
</layer>

<p>
	This text is normal,
	<ilayer data-ilayer left="20">this text is pushed right</ilayer>,
	and this text continues normally.
</p>

<nolayer data-nolayer>
	<p>Your browser does not support Netscape layers. Please download Netscape Navigator 4.0!</p>
</nolayer>
:where([data-nolayer]) {
}
Comments : -
  • Semantics: a Netscape Navigator 4 proprietary element (1997) for fallback content — rendered only by browsers that did not support layers (like Internet Explorer). Catalogue groups it under Relics — the pleading element that begged users to upgrade.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: progressive enhancement. Feature detection. @supports in CSS. Nothing needs a fallback for layers because layers don't exist anymore.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser implements.
  • Note: "Please download Netscape Navigator 4.0!" That's what <nolayer> was for — a desperate plea to users stuck on Internet Explorer, asking them to switch browsers just to see your fancy layers. It didn't work. Layers died. Internet Explorer won that round. Modern browsers treat <nolayer> as an unrecognized tag — its content renders as plain inline text, which means the fallback text meant for non-supporting browsers now shows for everyone. The irony is complete. Use feature detection instead.
  • Verdict: completely obsolete. Use feature detection or progressive enhancement instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — No support (obsolete, removed from browsers)

Isindex <isindex> isindex.svg

User Agent StyleSheet

<isindex prompt="Search this site:">

	<noindex>
		<p>This content is hidden from search engines.</p>
	</noindex>
element.style {
}

Tabula Rasa StyleSheet

<isindex data-isindex prompt="Search this site:">

	<noindex data-noindex>
		<p>This content is hidden from search engines.</p>
	</noindex>
:where([data-isindex]) {
}
Comments : -
  • Semantics: a primitive HTML element from 1991 (HTML 2.0) that created a single-line search box — before <form> and <input> existed. Invented by Tim Berners-Lee for the first web browser. Catalogue groups it under Relics — the original search box that started it all.
  • Group: Relics Cardinality: One Layout: Inline Voidity: No Close
  • Alternatives: <form> with <input type="search">. The modern web has many better ways to build search.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline. Modern browsers have removed support entirely — the element renders as an empty inline box with no search input.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no modern browser supports.
  • Note: the element that taught the web to search. Before Google, before AltaVista, before any search engine — there was <isindex>. You put it on your page. The browser rendered a text input and a "Search" button. When submitted, the query was appended to the URL as ?key=value. No backend required. No JavaScript. No PHP. Just a primitive search box that talked directly to your server's CGI script. Invented by Tim Berners-Lee in 1991. Made obsolete by HTML forms in 1995. Removed from HTML5. A true pioneer.
  • Verdict: obsolete. Historically fascinating. Completely useless today. Use <form> and <input> instead.
  • MDN Web Docs — Reference
  • Can I Use — No support (removed from browsers)

Noindex <noindex></noindex> noindex.svg

User Agent StyleSheet

<isindex prompt="Search this site:">

	<noindex>
		<p>This content is hidden from search engines.</p>
	</noindex>
element.style {
}

Tabula Rasa StyleSheet

<isindex data-isindex prompt="Search this site:">

	<noindex data-noindex>
		<p>This content is hidden from search engines.</p>
	</noindex>
:where([data-noindex]) {
}
Comments : -
  • Semantics: a non-standard HTML element invented by Yandex (Russian search engine) to hide content from search crawlers. Never adopted into any HTML specification. Catalogue groups it under Relics — an SEO hack that never worked outside one search engine.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <meta name="robots" content="noindex" /> — the standard, correct, universally supported way to control search engine indexing.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline. Modern search engines (Google, Bing) ignore this tag completely.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element that never worked outside one search engine's internal experiment.
  • Note: the SEO hack that didn't work. Yandex (Russian search engine, ~20% market share in Russia) invented this tag to hide content from search crawlers while keeping it visible to users. Other search engines ignored it. Google never supported it. Bing never supported it. The standard way to control indexing is <meta name="robots" content="noindex" />. Use that instead. This tag is a relic of a forgotten SEO arms race.
  • Verdict: non-standard, ineffective outside Yandex, and completely unnecessary. Use <meta name="robots"> instead.
  • MDN Web Docs — No entry (non-standard element)
  • Can I Use — Yandex only (not standard)

Frameset <frameset></frameset> frameset.svg

User Agent StyleSheet

<frameset cols="25%, 75%">
	<frame src="menu.html" name="menu">
		<frame src="content.html" name="content">
			<noframes>
				<body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
frameset {
	display: block;
	border-color: inherit;
}

Tabula Rasa StyleSheet

<frameset data-frameset cols="25%, 75%">
	<frame data-frame src="menu.html" name="menu">
		<frame data-frame src="content.html" name="content">
			<noframes data-noframes>
				<body data-body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
:where([data-frameset]) {
}
Comments : -
  • Semantics: an obsolete HTML element that replaces <body> and defines a grid layout for frames. Part of the 1990s frameset model. Catalogue groups it under Relics — the layout system that broke the web.
  • Group: Relics Cardinality: One Layout: Block Voidity: Non Void
  • Alternatives: CSS Grid. CSS Flexbox. <iframe> for embedded content. Anything but frames.
  • User Agent: applies display: block and border-color: inherit. The element replaces <body> entirely — no body element exists when frameset is present.
  • Tabula Rasa: empty rule. The reset preserves its historical behavior. Relics are not resets.
  • Note: the element that defined the 1990s web. Every corporate website. Every web portal. Every "under construction" page — all built on frames. <frameset> replaced <body> entirely. No body element. No scrolling. Just rigid panels of HTML documents mashed together. Horrible for accessibility. Horrible for SEO. Horrible for usability. Removed from HTML5. Modern browsers still support it for legacy pages but should not be used. Use CSS Grid or Flexbox instead. Let frames rest in peace.
  • Verdict: obsolete. Use CSS Grid or Flexbox instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Frame <frame /> frame.svg

User Agent StyleSheet

<frameset cols="25%, 75%">
	<frame src="menu.html" name="menu">
		<frame src="content.html" name="content">
			<noframes>
				<body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
frame {
	display: block;
}

Tabula Rasa StyleSheet

<frameset data-frameset cols="25%, 75%">
	<frame data-frame src="menu.html" name="menu">
		<frame data-frame src="content.html" name="content">
			<noframes data-noframes>
				<body data-body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
:where([data-frame]) {
}
Comments : -
  • Semantics: an obsolete HTML element that defines a single frame within a <frameset>. Part of the 1990s frameset model. Catalogue groups it under Relics — the panel that trapped content in a grid.
  • Group: Relics Cardinality: Infinite Layout: Block Voidity: Void
  • Alternatives: <iframe> for embedded content. CSS Grid for layout. CSS Flexbox for layout. Anything but frames.
  • User Agent: applies display: block and removes borders. The src attribute loads another HTML document into the panel.
  • Tabula Rasa: empty rule. The reset preserves its historical behavior. Relics are not resets.
  • Note: the element that trapped your content in a box. Every <frame> loaded a separate HTML document. Each had its own URL. Each broke the back button. Each broke deep linking. Each broke accessibility. The src attribute pointed to another page. The name attribute let links target that frame. The result: a website that felt like an application and worked like a nightmare. Removed from HTML5. Modern browsers still support it for legacy pages but should not be used. Use <iframe> if you need embedded content. Use CSS Grid if you need layout. Let frames die.
  • Verdict: obsolete. Use <iframe> for embedded content or CSS Grid for layout. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Noframes <noframes></noframes> noframes.svg

User Agent StyleSheet

<frameset cols="25%, 75%">
	<frame src="menu.html" name="menu">
		<frame src="content.html" name="content">
			<noframes>
				<body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
noframes {
	display: none;
}

Tabula Rasa StyleSheet

<frameset data-frameset cols="25%, 75%">
	<frame data-frame src="menu.html" name="menu">
		<frame data-frame src="content.html" name="content">
			<noframes data-noframes>
				<body data-body>Your browser does not support frames.</body>
			</noframes>
		</frameset>
:where([data-noframes]) {
}
Comments : -
  • Semantics: an obsolete HTML element that provides fallback content for browsers that do not support frames. Part of the 1990s frameset model. Catalogue groups it under Relics — the apology for using frames.
  • Group: Relics Cardinality: One Layout: None Voidity: Non Void
  • Alternatives: Progressive enhancement. Responsive design. Modern layout techniques that don't need fallbacks because they actually work.
  • User Agent: applies display: none — the content is only rendered when frames are not supported. In modern browsers, this never happens, so the content never shows.
  • Tabula Rasa: empty rule. The reset preserves display: none. Relics are not resets.
  • Note: "Your browser does not support frames." That was the message. The apology. The admission that you built a site that excluded anyone not using Netscape Navigator 4.0 with frames enabled. <noframes> was where you put the fallback — a <body> element with real content for browsers that couldn't handle your frameset. But here's the thing: if you had to write a fallback, maybe frames were a bad idea. Modern browsers support frames (legacy), but they also support <noframes>. The content inside never renders because frames always work. The fallback is forever invisible. Use progressive enhancement instead. Build sites that work everywhere, not sites that need apologies.
  • Verdict: obsolete. Use progressive enhancement instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional — the content never renders because frames always work)

Font <font></font> font.svg

User Agent StyleSheet

<head>
	<basefont size="3" color="blue" face="Verdana">
	</head>
	<body>
		<font size="5" color="red" face="Arial">Red Arial text</font>
		<p>Paragraph inherits from basefont</p>
		<font size="7" color="green">Green size 7 text</font>
	</body>
font[Attributes Style] {
	font-size: x-large;
	color: rgb(255, 0, 0);
	font-family: Arial;
}

Tabula Rasa StyleSheet

<head>
	<basefont data-basefont size="3" color="blue" face="Verdana">
	</head>
	<body data-body>
		<font data-font size="5" color="red" face="Arial">Red Arial text</font>
		<p data-p>Paragraph inherits from basefont</p>
		<font data-font size="7" color="green">Green size 7 text</font>
	</body>
:where([data-font]) {
}
Comments : -
  • Semantics: an obsolete inline element used to change font size, color, and face. Deprecated in HTML4, removed in HTML5. Catalogue groups it under Relics — the presentational element that CSS made irrelevant.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS properties: font-size, color, font-family. Use them. Always.
  • User Agent: the browser applies no explicit CSS rules. Instead, the size, color, and face attributes are mapped directly to CSS properties internally — DevTools shows this as font[Attributes Style]. size="5" maps to font-size: x-large. color maps directly. face maps to font-family. The element defaults to display: inline.
  • Tabula Rasa: empty rule. The reset takes no position on this obsolete element. It keeps its attribute-based styling. Relics are not resets.
  • Note: the element that taught a generation to hate inline styling. Before CSS was widely supported, <font> was the only way to change text appearance. Want red text? <font color="red">. Want bigger text? <font size="5">. Want Arial? <font face="Arial">. The result was spaghetti code — presentational markup tangled with content, impossible to maintain. CSS fixed this. Use CSS instead. The size attribute values (1-7) map to xx-small through xx-large. size="5" is x-large. Useless trivia. Don't use this tag.
  • Verdict: obsolete. Use CSS instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Basefont <basefont /> basefont.svg

User Agent StyleSheet

<head>
	<basefont size="3" color="blue" face="Verdana">
	</head>
	<body>
		<font size="5" color="red" face="Arial">Red Arial text</font>
		<p>Paragraph inherits from basefont</p>
		<font size="7" color="green">Green size 7 text</font>
	</body>
basefont {
	display: none;
}

Tabula Rasa StyleSheet

<head>
	<basefont data-basefont size="3" color="blue" face="Verdana">
	</head>
	<body data-body>
		<font data-font size="5" color="red" face="Arial">Red Arial text</font>
		<p data-p>Paragraph inherits from basefont</p>
		<font data-font size="7" color="green">Green size 7 text</font>
	</body>
:where([data-basefont]) {
}
Comments : -
  • Semantics: an obsolete void element that set the default font properties for the entire document. Deprecated in HTML4, removed in HTML5. Catalogue groups it under Relics — the global style rule before CSS existed.
  • Group: Relics Cardinality: One Layout: None Voidity: Void
  • Alternatives: CSS on the <body> element: font-size, color, font-family. That's it. That's all you need.
  • User Agent: applies display: none. The element is not rendered, but its size, color, and face attributes set defaults inherited by all text in the document.
  • Tabula Rasa: empty rule. The reset preserves display: none. Relics are not resets.
  • Note: the element that tried to be CSS before CSS existed. <basefont> set document-wide defaults: font size, color, typeface. Every text element inherited these unless overridden by a <font> tag. It was a good idea — global styling from a single declaration. Then CSS arrived. body { font-family: Verdana; font-size: 16px; color: blue; } does the same thing, but better, without inventing a new element. The size attribute (1-7) maps to xx-small through xx-large. size="3" is the default. Useless trivia. Use CSS instead.
  • Verdict: obsolete. Use CSS on <body> instead. The reset leaves it untouched, but you shouldn't use it.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but functional)

Element <element> element.svg

User Agent StyleSheet

<element name="x-example" extends="div">
	<template>
		<content></content>
	</template>
</element>

<content select=".title"></content>

<shadow></shadow>

<x-example>Custom element content</x-example>
element.style {
}

Tabula Rasa StyleSheet

<element data-element name="x-example" extends="div">
	<template>
		<content data-content></content>
	</template>
</element>

<content data-content select=".title"></content>

<shadow data-shadow></shadow>

<x-example>Custom element content</x-example>
:where([data-element]) {
}
Comments : -
  • Semantics: part of the Web Components v0 specification (2013–2016). The declarative syntax for defining a custom element — a way to register <x-example> in HTML rather than in JavaScript. Catalogue groups it under Relics — the declarative custom element that never shipped.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: customElements.define() — the JavaScript API that replaced this entire declarative approach. Modern Web Components (v1) are imperative, not declarative.
  • User Agent: no CSS rules — element.style { }. The element defaults to display: inline as an unknown tag. No browser ever implemented this element.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser ever supported.
  • Note: Died alongside <content> and <shadow>. The three were a system — define with <element>, project with <content>, attach with <shadow>. The v0 committee killed them as a unit when v1 chose the JavaScript-first path. A declarative Web Components syntax was a good idea pursued at the wrong moment. JavaScript won that round, decisively. Modern Web Components are defined with customElements.define(), not HTML tags. The declarative dream lives on in frameworks like Vue and Angular, but never made it to the platform.
  • Verdict: never implemented. Use customElements.define() instead. The reset leaves it untouched, but no browser will ever recognize it.
  • MDN Web Docs — Reference
  • Can I Use — No support (never implemented)

Content <content> content.svg

User Agent StyleSheet

<element name="x-example" extends="div">
	<template>
		<content></content>
	</template>
</element>

<content select=".title"></content>

<shadow></shadow>

<x-example>Custom element content</x-example>
element.style {
}

Tabula Rasa StyleSheet

<element data-element name="x-example" extends="div">
	<template>
		<content data-content></content>
	</template>
</element>

<content data-content select=".title"></content>

<shadow data-shadow></shadow>

<x-example>Custom element content</x-example>
:where([data-content]) {
}
Comments : -
  • Semantics: part of the Web Components v0 specification (2013–2016). An insertion point inside a custom element's template — the slot where the host's light-DOM children appeared. The select attribute filtered which children landed where. Catalogue groups it under Relics — the projection point that <slot> replaced.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <slot> — the v1 replacement, with named slots and a cleaner projection model. Modern Web Components use <slot>, not <content>.
  • User Agent: no CSS rules — element.style { }. Treated as an unknown inline element by current browsers. No browser ever shipped support for this element.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser ever supported.
  • Note: Died alongside <element> and <shadow> in the v0-to-v1 transition. <slot> took the projection role, took it cleaner, took it for good. The select attribute was supposed to work like CSS selectors, filtering which light-DOM children landed in which insertion point. The v1 committee decided named slots (<slot name="title">) were simpler and more predictable. They were right. "Content" was already the most overloaded word in HTML. <slot> was a fresh start. Modern Web Components use <slot>. This is dead.
  • Verdict: never implemented. Use <slot> instead. The reset leaves it untouched, but no browser will ever recognize it.
  • MDN Web Docs — Reference
  • Can I Use — No support (never implemented)

Shadow <shadow> shadow.svg

User Agent StyleSheet

<element name="x-example" extends="div">
	<template>
		<content></content>
	</template>
</element>

<content select=".title"></content>

<shadow></shadow>

<x-example>Custom element content</x-example>
element.style {
}

Tabula Rasa StyleSheet

<element data-element name="x-example" extends="div">
	<template>
		<content data-content></content>
	</template>
</element>

<content data-content select=".title"></content>

<shadow data-shadow></shadow>

<x-example>Custom element content</x-example>
:where([data-shadow]) {
}
Comments : -
  • Semantics: part of the Web Components v0 specification (2013–2016). The declarative shadow-root attachment point — where the encapsulated DOM tree would live, separated from the host's light DOM. Catalogue groups it under Relics — the shadow DOM syntax that died so that attachShadow() could live.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: element.attachShadow({ mode: 'open' }) — the v1 imperative API that replaced this declarative form. Modern Web Components use JavaScript to attach shadow roots, not HTML tags.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline. No browser ever shipped support for this element.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no browser ever supported.
  • Note: the third of the v0 trio. Define with <element>, project with <content>, attach with <shadow> — a coherent declarative system replaced by a coherent imperative one. The declarative web lost this fight. Shadow DOM survived; this syntax for invoking it did not. Modern shadow roots are created with attachShadow(), not <shadow> tags. The v1 committee decided that shadow roots are better managed in JavaScript, not declarative HTML. They were probably right. But the declarative dream never died — it just moved to frameworks.
  • Verdict: never implemented. Use attachShadow() instead. The reset leaves it untouched, but no browser will ever recognize it.
  • MDN Web Docs — Reference
  • Can I Use — No support (never implemented)

Bgsound <bgsound> bgsound.svg

User Agent StyleSheet

<bgsound src="bgsound.wav">
	<p>This page has background sound in Internet Explorer.</p>
element.style {
}

Tabula Rasa StyleSheet

<bgsound data-bgsound src="bgsound.wav">
	<p>This page has background sound in Internet Explorer.</p>
:where([data-bgsound]) {
}
Comments : -
  • Semantics: an Internet Explorer-specific element from 1996 that played audio automatically when a page loaded. Never adopted into any HTML specification. Catalogue groups it under Relics — the autoplay nightmare that taught the web to require user consent.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: No Close
  • Alternatives: the modern <audio> element with explicit user controls. The Web Audio API for programmatic sound. Both require user interaction to play in modern browsers — autoplay-with-sound is now blocked by every major engine.
  • User Agent: no CSS rules — element.style { }. As an unrecognised element, it falls back to display: inline. Modern browsers don't recognise the tag at all; the audio never plays.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no modern browser implements.
  • Note: The defining sound of the 1996–2000 web was a MIDI file blasting out of cheap PC speakers the moment a page loaded — a personal homepage's theme song, beyond the user's control. <bgsound> was the mechanism. Pages played Star Wars themes, anime intros, Geocities owners' favourite songs, often at full volume, with no pause button and no warning. The src attribute pointed to a sound file. The loop attribute made it repeat. The volume attribute (0-100) controlled loudness. Nothing gave the user a choice. Autoplay-with-sound is the reason modern browsers ship with that behaviour permanently disabled — a generation of users learned to hate it, and the platform learned with them. Use <audio> with user controls instead. Let the user decide.
  • Verdict: completely obsolete. Use <audio> with user controls instead. The reset leaves it untouched, but you shouldn't use it — and even if you did, it wouldn't work.
  • MDN Web Docs — Reference
  • Can I Use — No support (removed from browsers)

Server <server></server> server.svg

User Agent StyleSheet

<server>
	write("Hello from the server");
</server>
element.style {
}

Tabula Rasa StyleSheet

<server data-server>
	write("Hello from the server");
</server>
:where([data-server]) {
}
Comments : -
  • Semantics: a 1996 Netscape element that wrapped server-side JavaScript. Code inside <server>...</server> ran on the Netscape Enterprise Server before the page was sent to the browser; the server replaced the tags with whatever HTML the JavaScript emitted via write(). The browser never saw the original element. Catalogue groups it under Relics — the false start of server-side JavaScript.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: any modern server-side rendering — Node.js with Express or Next.js, PHP, Python (Django/Flask), Ruby on Rails, ASP.NET. The architectural idea (JavaScript on the server) won in 2009 with Node.js; the syntactic idea (mixing JS inline with HTML via custom tags) lost.
  • User Agent: no CSS rules — element.style { }. As an unrecognised element, it falls back to display: inline. Modern browsers don't recognise the tag at all; the contained "code" renders as plain text.
  • Tabula Rasa: empty rule. Nothing to neutralise on an element no modern browser implements.
  • Note: Part of Netscape's LiveWire technology, included in Enterprise Server 2.0 (1996). Competed with Microsoft's ASP and the emerging PHP for the late-1990s server-scripting market. Write JavaScript on the server, embed it in HTML using <server> tags, and the server would execute it before sending the page to the browser. LiveWire was famously buggy. Netscape's server business faded through 1998-2000. Server-Side JavaScript itself went dormant for nearly a decade until Node.js revived the idea in 2009 with a completely different architecture (event-loop, npm, no HTML embedding). The right idea — JavaScript on the server — pursued with the wrong architecture. It took thirteen years and a completely fresh start before SSJS won. The <server> tag was the false start.
  • Verdict: completely obsolete. Use Node.js, PHP, Python, Ruby, or any modern backend instead. The reset leaves it untouched, but you shouldn't use it — and even if you did, no server would run it.
  • MDN Web Docs — No entry (the element predates MDN's coverage of removed features)
  • Can I Use — No support (obsolete, never standard)

Multicol <multicol></multicol> multicol.svg

User Agent StyleSheet

<multicol cols="3" gutter="20" width="600">
	<p>This text should appear in three columns in Netscape Navigator 3 or 4.</p>
	<p>In modern browsers, this element is unrecognized. It defaults to inline display with no column behavior.</p>
	<p>The cols, gutter, and width attributes do nothing in modern browsers.</p>
</multicol>
element.style {
}

Tabula Rasa StyleSheet

<multicol data-multicol cols="3" gutter="20" width="600">
	<p>This text should appear in three columns in Netscape Navigator 3 or 4.</p>
	<p>In modern browsers, this element is unrecognized. It defaults to inline display with no column behavior.</p>
	<p>The cols, gutter, and width attributes do nothing in modern browsers.</p>
</multicol>
:where([data-multicol]) {
}
Comments : -
  • Semantics: a Netscape-proprietary element from 1996 that placed content into multiple columns. Never adopted into any HTML specification. Catalogue groups it under Relics — an idea that was right but arrived too early.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS Multi-column Layout — column-count, column-width, and the shorthand columns property. The same concept, properly standardized.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline. In Netscape 3–4, the element actually created columns. Modern browsers treat it as an unknown inline element — the cols, gutter, and width attributes do nothing.
  • Tabula Rasa: empty rule. Relics are preserved as-is. The reset takes no position on an element that no longer functions.
  • Note: the element that predicted CSS columns. In 1996, Netscape shipped <multicol> with three attributes: cols (required, number of columns), gutter (space between columns in pixels), and width (total layout width). It worked beautifully — in Netscape 3 and 4. Then Netscape 6 dropped the column behavior. The tag survived; the feature didn't. It took another 15 years for CSS Multi-column Layout to become standard — column-count, column-gap, column-width. Same concept. Same layout behavior. Standardized. The right idea, wrong era.
  • Verdict: a prophetic relic. The idea was right; the timing was wrong. Use CSS column-count instead.
  • MDN Web Docs — No entry (non-standard element)
  • Can I Use — No support (obsolete)

Nobr <nobr></nobr> nobr.svg

User Agent StyleSheet

<nobr>This text will not wrap. It stays on one line.</nobr>
nobr {
	white-space: nowrap;
}

Tabula Rasa StyleSheet

<nobr data-nobr>This text will not wrap. It stays on one line.</nobr>
:where([data-nobr]) {
}
Comments : -
  • Semantics: a non-standard element that prevents text wrapping inside it. Never adopted into any HTML specification. Catalogue groups it under Relics — the inline cage that CSS replaced.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS white-space: nowrap on any inline or inline-block element. The same effect, properly standardized.
  • User Agent: applies white-space: nowrap. The element prevents text wrapping via CSS, not intrinsic behavior.
  • Tabula Rasa: empty rule. Relics are preserved as-is. The reset takes no position on an element that works but was never standard.
  • Note: the element that refused to break — literally. <nobr> was invented by Netscape and IE to prevent text wrapping, long before CSS had white-space. It works in every browser. It never became standard. The irony? <br> (breaks lines) is standard. <nobr> (prevents breaks) is not. Both control line behavior. One had no CSS equivalent in 1995. The other did.
  • Verdict: non-standard but functional. Works everywhere. Don't use it. Use CSS white-space: nowrap instead.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, non-standard)

Noembed <noembed></noembed> noembed.svg

User Agent StyleSheet

<embed src="example.swf" width="300" height="200">
<noembed>
	<p>Your browser does not support embedded content.</p>
</noembed>
noembed {
	display: none;
}

Tabula Rasa StyleSheet

<embed src="example.swf" width="300" height="200">
<noembed data-noembed>
	<p>Your browser does not support embedded content.</p>
</noembed>
:where([data-noembed]) {
}
Comments : -
  • Semantics: an obsolete, non-standard element that provides fallback content for browsers that do not support <embed> or the type of embedded content. Deprecated in HTML 4.01, never standard. Catalogue groups it under Relics — the plugin fallback that outlived its purpose.
  • Group: Relics Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: <object> with fallback content between its opening and closing tags. Or simply don't use plugins — modern web technologies (HTML5 video, Canvas, WebGL) replace most plugin use cases.
  • User Agent: applies display: none. The fallback content is hidden when <embed> is supported — which is always in modern browsers.
  • Tabula Rasa: empty rule. Preserves display: none. Relics are preserved as-is.
  • Note: the fallback that never fires. <noembed> was meant to show content only when <embed> wasn't supported. But every modern browser supports <embed>. So <noembed> content is permanently hidden — a fallback for a condition that no longer exists. Use <object> with fallback content instead. Or better, don't use plugins at all.
  • Verdict: obsolete and useless. Every modern browser supports <embed>, so the fallback never shows. Use <object> instead.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but hidden)

Rb <rb></rb> rb.svg

User Agent StyleSheet

<ruby>
	<rb>漢</rb>
	<rtc><rt>かん</rt></rtc>
	<rtc lang="en"><rt>Kanji</rt></rtc>
</ruby>
/* inherited from ruby */
rb {
	text-indent: inherit;
}

Tabula Rasa StyleSheet

<ruby>
	<rb data-rb>漢</rb>
	<rtc><rt>かん</rt></rtc>
	<rtc lang="en"><rt>Kanji</rt></rtc>
</ruby>
:where([data-rb]) {
}
Comments : -
  • Semantics: an element used to delimit the base text component of a <ruby> annotation — the text being annotated with pronunciation or translation guides. Deprecated and removed from HTML spec. Catalogue groups it under Relics — a standard that became obsolete.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: Place base text directly inside <ruby> without <rb>. Browsers automatically infer base text from whatever directly precedes <rt>.
  • User Agent: no direct CSS rules — inherits from <ruby> (which applies text-indent: 0px).
  • Tabula Rasa: empty rule. Relics are preserved as-is. The reset takes no position on a deprecated element.
  • Note: born in HTML5, died in HTML5. <rb> was introduced to simplify ruby annotation parsing, then dropped because browsers figured out how to infer base text without it. The markup got simpler. The element got deprecated. Use <ruby>base <rt>annotation</rt></ruby> instead.
  • Verdict: deprecated and unnecessary. Omit it. Place base text directly inside <ruby>.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but deprecated)

Rtc <rtc></rtc> rtc.svg

User Agent StyleSheet

<ruby>
	<rb>漢</rb>
	<rtc><rt>かん</rt></rtc>
	<rtc lang="en"><rt>Kanji</rt></rtc>
</ruby>
rtc[Attributes Style] {
	-webkit-locale: "en";
}

/* inherited from ruby */
rtc {
	text-indent: inherit;
}

Tabula Rasa StyleSheet

<ruby>
	<rb>漢</rb>
	<rtc data-rtc><rt>かん</rt></rtc>
	<rtc data-rtc lang="en"><rt>Kanji</rt></rtc>
</ruby>
:where([data-rtc]) {
}
Comments : -
  • Semantics: an element that groups <rt> elements for secondary ruby annotations (translations, meanings). Deprecated and removed from HTML spec. Catalogue groups it under Relics — a standard that died because CSS could do it better.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: CSS Ruby Layout Module — use display: ruby-text-container to achieve the same structural spacing. Or simply don't use multi-layer ruby annotations.
  • User Agent: no direct CSS rules — inherits from <ruby> (which applies text-indent: 0px).
  • Tabula Rasa: empty rule. Relics are preserved as-is. The reset takes no position on a deprecated element.
  • Note: the element that grouped pronunciation containers. <rtc> was introduced to allow multiple annotation layers — one for pronunciation, one for translation. But browsers never fully agreed on rendering, CSS Ruby Layout evolved, and <rtc> was dropped. Use CSS instead.
  • Verdict: deprecated and unnecessary. Use CSS Ruby Layout Module or rely on standard <rt> alone.
  • MDN Web Docs — Reference
  • Can I Use — Works in all browsers (legacy, but deprecated)

Nextid <nextid /> nextid.svg

User Agent StyleSheet

<head>
	<nextid n="z124">
	</head>
	<!-- parser moves <nextid> to <body> -->
element.style {
}

Tabula Rasa StyleSheet

<head>
	<nextid data-nextid n="z124">
	</head>
	<!-- parser moves <nextid> to <body> -->
:where([data-nextid]) {
}
Comments : -
  • Semantics: an obsolete, non-standard element that provided a naming hint to automated web authoring tools (specifically the NeXT editor) so they knew what ID to assign to the next anchor element. Formalized in HTML 2.0, quickly deprecated. Catalogue groups it under Relics — automation from an era when IDs were tracked manually.
  • Group: Relics Cardinality: One Layout: Inline Voidity: Non Void
  • Alternatives: standard id attributes on elements. Write unique IDs manually. No automation needed.
  • User Agent: no CSS rules — element.style { }. Although written in <head>, the HTML parser does not recognise <nextid> as a valid head element and silently moves it to <body>. display resolves to its CSS initial value of inline. The n attribute has no effect in any modern browser.
  • Tabula Rasa: empty rule. Nothing to neutralise — the element renders as an empty inline box.
  • Note: the forgotten ID generator. Born in HTML 2.0 for NeXT's authoring tool — the same NeXT workstation Tim Berners-Lee used to invent the web. The n attribute held the next available ID in alphanumeric sequence so the editor knew what to assign. Nobody else ever used it. Modern browsers silently move it from <head> to <body> — a relic so obscure that not even the parser knows where it belongs.
  • Verdict: completely useless. Use standard id attributes instead.
  • MDN Web Docs — No entry (obsolete)
  • Can I Use — No support (ignored by parsers)

Hp0 <hp0></hp0> hp.svg

User Agent StyleSheet

<hp0>Normal text</hp0>
element.style {
}

Tabula Rasa StyleSheet

<hp0 data-hp0>Normal text</hp0>
:where([data-hp0]) {
}
Comments : -
  • Semantics: an SGML "Highlighted Phrase" tag from early HTML drafts. <hp0> represented roman (plain/normal) text. Never valid in any HTML specification. Catalogue groups it under Relics — the prehistoric ancestor of inline styling.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: plain text or a <span> with CSS font-style: normal; font-weight: normal.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline.
  • Tabula Rasa: empty rule. Relics are preserved as-is.
  • Note: the original phrase tag from SGML. <hp0> through <hp3> appeared in Tim Berners-Lee's earliest HTML drafts, inherited from SGML's highlighting phrase concept. No browser ever rendered them properly — even Tim's WorldWideWeb browser parsed them but displayed them as plain text. Dropped before HTML 2.0. Replaced by <i> and <b>.
  • Verdict: prehistoric relic. Never worked. Use <span> or CSS instead.
  • MDN Web Docs — No entry (never standard)
  • Can I Use — No support (never implemented)

Hp1 <hp1></hp1> hp.svg

User Agent StyleSheet

<hp1>Italic text</hp1>
element.style {
}

Tabula Rasa StyleSheet

<hp1 data-hp1>Italic text</hp1>
:where([data-hp1]) {
}
Comments : -
  • Semantics: an SGML "Highlighted Phrase" tag from early HTML drafts. <hp1> was meant to represent italic text. Never valid in any HTML specification. Catalogue groups it under Relics — the prehistoric ancestor of <i>.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <em> for emphasis or <i> for idiomatic text. CSS font-style: italic for purely visual styling.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline.
  • Tabula Rasa: empty rule. Relics are preserved as-is.
  • Note: the original italic tag from SGML. <hp0> through <hp3> appeared in Tim Berners-Lee's earliest HTML drafts, inherited from SGML's highlighting phrase concept. No browser ever rendered them properly. Dropped before HTML 2.0. Replaced by <i>.
  • Verdict: prehistoric relic. Never worked. Use <em>, <i>, or CSS font-style: italic instead.
  • MDN Web Docs — No entry (never standard)
  • Can I Use — No support (never implemented)

Hp2 <hp2></hp2> hp.svg

User Agent StyleSheet

<hp2>Bold text</hp2>
element.style {
}

Tabula Rasa StyleSheet

<hp2 data-hp2>Bold text</hp2>
:where([data-hp2]) {
}
Comments : -
  • Semantics: an SGML "Highlighted Phrase" tag from early HTML drafts. <hp2> was meant to represent bold text. Never valid in any HTML specification. Catalogue groups it under Relics — the prehistoric ancestor of <b>.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <strong> for importance or <b> for attention. CSS font-weight: bold for purely visual styling.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline.
  • Tabula Rasa: empty rule. Relics are preserved as-is.
  • Note: the original bold tag from SGML. <hp0> through <hp3> appeared in Tim Berners-Lee's earliest HTML drafts, inherited from SGML's highlighting phrase concept. No browser ever rendered them properly. Dropped before HTML 2.0. Replaced by <b>.
  • Verdict: prehistoric relic. Never worked. Use <strong>, <b>, or CSS font-weight: bold instead.
  • MDN Web Docs — No entry (never standard)
  • Can I Use — No support (never implemented)

Hp3 <hp3></hp3> hp.svg

User Agent StyleSheet

<hp3>Bold italic text</hp3>
element.style {
}

Tabula Rasa StyleSheet

<hp3 data-hp3>Bold italic text</hp3>
:where([data-hp3]) {
}
Comments : -
  • Semantics: an SGML "Highlighted Phrase" tag from early HTML drafts. <hp3> was meant to represent bold italic text. Never valid in any HTML specification. Catalogue groups it under Relics — the prehistoric ancestor of nested emphasis.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: <strong><em></em></strong> or <b><i></i></b>. CSS font-style: italic; font-weight: bold for purely visual styling.
  • User Agent: no CSS rules — element.style { }. display resolves to its CSS initial value of inline.
  • Tabula Rasa: empty rule. Relics are preserved as-is.
  • Note: the original bold italic tag from SGML. <hp0> through <hp3> appeared in Tim Berners-Lee's earliest HTML drafts, inherited from SGML's highlighting phrase concept. No browser ever rendered them properly. Dropped before HTML 2.0. Replaced by nesting <i> and <b>.
  • Verdict: prehistoric relic. Never worked. Use CSS font-style: italic; font-weight: bold instead.
  • MDN Web Docs — No entry (never standard)
  • Can I Use — No support (never implemented)

XML Data Island <xml></xml> xml.svg

User Agent StyleSheet

<xml id="tasty">
	<combomeal>
		<burger>Tasty Burger</burger>
		<fries size="large" />
		<drink size="large" flavor="Cola" />
	</combomeal>
</xml>
element.style {
}

Tabula Rasa StyleSheet

<xml data-xml id="tasty">
	<combomeal>
		<burger>Tasty Burger</burger>
		<fries size="large" />
		<drink size="large" flavor="Cola" />
	</combomeal>
</xml>
:where([data-xml]) {
}
Comments : -
  • Semantics: a proprietary Microsoft element introduced in Internet Explorer 5 for embedding islands of XML data directly into an HTML document. The id attribute names the island so scripts can reference it; the src attribute points to an external XML file instead. Never adopted into any HTML specification and ignored entirely by every non-IE browser. Catalogue groups it under Relics — a data architecture from a parallel universe where Microsoft won the web.
  • Group: Relics Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: JSON embedded in a <script type="application/json"> block for inline structured data. The Fetch API for loading external XML files. <template> for inert HTML fragments. None are a direct equivalent — the XML Data Island concept never found a clean successor in standards-track HTML.
  • User Agent: no CSS rules — element.style { }. The browser applies no default styling. display resolves to its CSS initial value of inline. Modern browsers treat <xml> as an unknown inline element and render its contents as visible text.
  • Tabula Rasa: empty rule. Nothing to neutralise — the element has no UA declarations and no cosmetic defaults. The reset takes no position.
  • Note: Internet Explorer 5's XML Data Islands were a genuinely ambitious idea — structured data embedded in the page, bindable to HTML elements via DHTML data binding, updatable without a page reload. In 1999 that was remarkable. The problem was it was entirely IE-only and built on Microsoft's proprietary MSXML parser. Every other browser ignored the element completely. The web standardised on AJAX and JSON instead, and the XML Data Island became a curiosity. The child tags — <combomeal>, <burger> and so on — are parsed as unknown HTML elements by modern browsers and their text content renders on the page.
  • Verdict: a fascinating dead end. The right idea — structured data in the page — arrived at the wrong time, in the wrong browser, with the wrong format. Don't use it. JSON and the Fetch API do everything it attempted, better and for every browser.
  • MDN Web Docs — No entry (non-standard element)
  • Can I Use — No support (non-standard, IE only)

Sudoh sudoh_group.svg

Selection ::selection selection.svg

User Agent StyleSheet

<p>Select this text to see the default <code>::selection</code> styling.</p>
/* Not exposed in DevTools */
/* Spec defines defaults as CSS system colours */

/* Active window */
::selection {
	background-color: Highlight; /* resolves to #3367D1 in Chrome */
	color: HighlightText; /* resolves to #ffffff in Chrome */
}

/* Inactive window */
::selection {
	background-color: #C8C8C8;
	color: #000000;
}

Tabula Rasa StyleSheet

<p data-selection>Select this text to see the reset <code>::selection</code> styling.</p>
/* ::selection is handled universally */
:where([data-html] *::selection) {
	background-color: #3367D1;
	color: #ffffff;
}
Comments : -
  • Semantics: a CSS pseudo-element that styles the portion of text a user has selected with their cursor or keyboard. One of the few pseudo-elements that responds to live user input rather than document structure. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: none. No JavaScript API, no other CSS selector, no HTML element targets the user-selected text range. ::selection is the only way to style it.
  • User Agent: no rule is exposed in DevTools — no selector, no source, no expandable section. The CSS spec defines the defaults as system colour keywords — background-color: Highlight and color: HighlightText — which the OS resolves per platform, theme, and accessibility settings. In Chrome these resolve to #3367D1 and #ffffff in an active window, and #C8C8C8 and #000000 when the window loses focus.
  • Tabula Rasa: replaces the OS-resolved defaults with explicit values — background-color: #3367D1; color: #fff — so selection looks consistent across every platform and theme. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-selection])::selection.
  • Note: only a narrow set of CSS properties are honoured — color, background-color, text-decoration, text-shadow. Box-model properties are ignored entirely — you cannot pad, border, or transform a selection. The browser is painting a highlight over existing text, not generating a new box. Overriding selection colours has accessibility implications — ensure the contrast ratio between text and background is sufficient for low-vision users.
  • Verdict: the pseudo-element that turned a 30-year OS convention into a CSS hook. Indispensable, narrow, and one of the genuinely useful ones.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Before ::before before.svg

User Agent StyleSheet

<p>This paragraph has a <code>::before</code> pseudo-element adding an arrow.</p>
/* No UA rules — author style for demonstration */
p::before {
	content: "→ ";
}

Tabula Rasa StyleSheet

<p data-before>This paragraph has a <code>::before</code> pseudo-element adding an arrow.</p>
:where([data-before])::before {
	display: inline-block;
}
Comments : -
  • Semantics: a CSS pseudo-element that creates a virtual element as the first child of the selected element. Rendered into the layout tree but not the DOM — JavaScript cannot reach it, only CSS can style it. Without an author-defined content property the pseudo-element doesn't render at all. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: a real DOM element (<span>, <i>) when the content needs to be selectable, interactive, or reliably read by screen readers. ::before content is announced inconsistently by assistive technologies and never survives copy-paste.
  • User Agent: no default styles. The test file declares content: "→ " as an author style to make the demo visible — this is not a UA rule.
  • Tabula Rasa: promotes from implied inline to display: inline-block — making it a measurable, inspectable box. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-before])::before.
  • Note: the other half of CSS's decorative-content pair alongside ::after. Between them they generate most of the modern web's icons, dividers, quote marks, tooltip arrows, and badge counters — none of which appear in the HTML. ::before content is inaccessible by default — screen readers announce it inconsistently, it can't be selected, and it doesn't survive copy-paste. Use real DOM elements when the content matters semantically.
  • Verdict: useful, overused, and inaccessible by default. Use it for decoration. Use real elements for content.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

After ::after after.svg

User Agent StyleSheet

<p>This paragraph has a <code>::after</code> pseudo-element adding an arrow.</p>
/* No UA rules — author style for demonstration */
p::after {
	content: " ←";
}

Tabula Rasa StyleSheet

<p data-after>This paragraph has a <code>::after</code> pseudo-element adding an arrow.</p>
:where([data-after])::after {
	display: inline-block;
}
Comments : -
  • Semantics: a CSS pseudo-element that creates a virtual element as the last child of the selected element. The mirror of ::before — rendered into the layout tree but not the DOM, invisible without an author-defined content property. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: a real DOM element (<span>) when the content needs to be selectable, interactive, or reliably read by screen readers. ::after content is announced inconsistently by assistive technologies and never survives copy-paste.
  • User Agent: no default styles. The test file declares content: " ←" as an author style to make the demo visible — this is not a UA rule.
  • Tabula Rasa: promotes from implied inline to display: inline-block — making it a measurable, inspectable box. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-after])::after.
  • Note: alongside ::before, ::after generates most of the modern web's decorative content — closing quote marks, clearfix hacks, tooltips, badge counters. The clearfix (::after { content: ""; display: block; clear: both; }) was the dominant float-clearing technique for a decade before flexbox and grid made floats obsolete. Like ::before, its content is inaccessible by default.
  • Verdict: the closing bracket of CSS decoration. Use it for visual embellishment. Use real elements for anything that matters.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

First Letter ::first-letter first_letter.svg

User Agent StyleSheet

<p>This paragraph shows <code>first-letter</code> Pseudo element.</p>
/* No UA rules — empty author hook for demonstration */
p::first-letter {
}

Tabula Rasa StyleSheet

<p data-first-letter>This paragraph shows <code>first-letter</code> Pseudo element.</p>
:where([data-first-letter])::first-letter {
}
Comments : -
  • Semantics: a CSS pseudo-element that styles the first typographic letter of a block-level element's first line. "Letter" here means the first character plus any leading punctuation — opening quotes, brackets, even leading emoji ride along with the actual letter. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: the CSS initial-letter property — purpose-built for drop caps, sizing the letter automatically based on a line-count target (initial-letter: 3 = three lines tall). ::first-letter is the broader tool; initial-letter is the dedicated one for drop caps specifically.
  • User Agent: no default styles. The empty p::first-letter { } in the test file is an author hook — visible in DevTools, ready to inspect and modify.
  • Tabula Rasa: empty rule by design. Nothing to neutralise. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-first-letter])::first-letter.
  • Note: the drop-cap pseudo. Carries the entire weight of typographic tradition from illuminated manuscripts, magazine openers, and novel chapter starts. CSS gave it to the web in CSS1 and barely changed it since. Only a subset of CSS properties apply — font, text, background, margin, padding, border, float, line-height, vertical-align (when floated), clear.
  • Verdict: the pseudo that brought print typography to the web. Use it for drop caps and first-letter decoration. Pair with initial-letter for modern, sized drop caps.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

First Line ::first-line first_line.svg

User Agent StyleSheet

<p>This paragraph shows the <code>::first-line</code> pseudo-element. Resize the browser to see which text wraps to the first line.</p>
/* No UA rules — empty author hook for demonstration */
p::first-line {
}

Tabula Rasa StyleSheet

<p data-first-line>This paragraph shows the <code>::first-line</code> pseudo-element. Resize the browser to see which text wraps to the first line.</p>
:where([data-first-line])::first-line {
}
Comments : -
  • Semantics: a CSS pseudo-element that styles the first formatted line of a block-level container. The "line" is not in the markup — it's whatever text fits before the browser wraps to the next row. Reflows on every viewport resize. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: a <span> wrapping the first sentence manually — predictable but requires knowing where the line breaks. CSS text-transform or font-variant on the whole paragraph when the effect applies to more than the first line.
  • User Agent: no default styles. The empty p::first-line { } in the test file is an author hook — visible in DevTools, ready to inspect and modify.
  • Tabula Rasa: empty rule by design. Nothing to neutralise. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-first-line])::first-line.
  • Note: the only layout-aware selector in CSS. Resize the viewport and the boundary moves — the pseudo-element re-targets on every reflow. There is no ::last-line or ::nth-line — this is the only line-aware pseudo CSS has ever shipped. Only a subset of CSS properties apply — font, color, background, word-spacing, letter-spacing, text-decoration, text-transform, line-height, clear.
  • Verdict: the pseudo that knows where the line breaks. Use it for first-line typographic treatments — small caps, colour shifts, size changes. Remember it reflows with the viewport.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Marker ::marker marker.svg

User Agent StyleSheet

<ul>
	<li>List item with default marker</li>
</ul>
li {
	display: list-item;
	unicode-bidi: isolate;
}

ul {
	list-style-type: disc;
}

::marker, ::before::marker, ::after::marker {
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	text-transform: none;
	text-indent: 0px !important;
	text-align: start !important;
	text-align-last: auto !important;
}

Tabula Rasa StyleSheet

<ul>
	<li data-marker>List item with default marker</li>
</ul>
:where([data-marker])::marker {
	content: "";
	display: none;
}
Comments : -
  • Semantics: a CSS pseudo-element that styles the marker of a list item — the bullet, the number, or whatever list-style-type produces. Also applies to <summary> (the disclosure triangle) and any element with display: list-item. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: ::before with list-style: none on the parent — when you need backgrounds, padding, transforms, or positioning that ::marker doesn't honour.
  • User Agent: three layered rules produce the marker: li { display: list-item } generates the marker box, ul { list-style-type: disc } chooses what it looks like, and ::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0px; text-align: start; text-align-last: auto } styles the marker box itself.
  • Tabula Rasa: removes the marker entirely via content: ""; display: none. Works together with the upstream <ul>, <ol>, and <li> resets. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-marker])::marker.
  • Note: ::marker accepts only a narrow set of CSS properties — color, font-*, content, direction, unicode-bidi, text-transform, line-height, and animation/transition properties. Backgrounds, padding, transforms, and most layout properties silently fail. The browser is styling an automatically generated text fragment, not a new box.
  • Verdict: 25 years of authors faked custom bullets with ::before because there was no other way. ::marker finally gave CSS a direct hook — narrower than what authors wanted, but honest about what list markers actually are.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Placeholder ::placeholder placeholder.svg

User Agent StyleSheet

<input type="text" placeholder="Enter your name">

Tabula Rasa StyleSheet

<input data-placeholder type="text" placeholder="Enter your name">
:where([data-placeholder])::placeholder {
	color: inherit;
	opacity: 1;
}
Comments : -
  • Semantics: a CSS pseudo-element that styles placeholder text inside <input> and <textarea>. The text comes from the host's placeholder attribute; the pseudo-element is how you style it. Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: floating-label patterns — a real <label> that animates above the input on focus — when you need accessible, contrast-compliant hints. Placeholder text is a poor substitute for a label: it disappears on focus, fails contrast checks on most defaults, and screen reader support varies.
  • User Agent: no rule exposed in DevTools. Chrome uses color: darkgray internally. Firefox applies opacity: 0.54 to the inherited text colour. Neither is overridable by simply setting color on the host element — the browser's internal styling wins the cascade silently.
  • Tabula Rasa: defeats the internal override with color: inherit; opacity: 1. color: inherit forces the placeholder to take the host's text colour. opacity: 1 defeats Firefox's historical 0.54 default. Together they make the placeholder match the input's text exactly — same colour, full opacity. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-placeholder])::placeholder.
  • Note: the reset's position has accessibility consequences. UA placeholder styling is dim by design — that dimness signals "this is hint text, not content you've typed." Removing it means authors must reintroduce contrast differentiation deliberately with a colour they actually choose rather than one the browser hides. A placeholder that looks identical to typed text confuses users.
  • Verdict: a pseudo whose defaults are a usability problem disguised as a usability feature. The reset prefers honest author-chosen styling over the browser's invisible opinion — but authors must then take responsibility for making placeholder text visually distinct from real input.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Backdrop ::backdrop backdrop.svg

User Agent StyleSheet

<button id="openBtn">Open Dialog</button>

<dialog id="myDialog">
	<p>This is a dialog with a backdrop.</p>
	<button id="closeBtn">Close</button>
</dialog>

<script>
	const dialog = document.getElementById('myDialog');
	const openBtn = document.getElementById('openBtn');
	const closeBtn = document.getElementById('closeBtn');

	openBtn.addEventListener('click', () => {
	dialog.showModal();
	});

	closeBtn.addEventListener('click', () => {
	dialog.close();
	});
</script>
dialog::backdrop {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.1);
	inset: 0px;
}

dialog:modal {
	user-select: text;
	visibility: visible;
	interactivity: auto;
}

dialog {
	color: canvastext;
}

Tabula Rasa StyleSheet

<button id="openBtn">Open Dialog</button>

<dialog data-backdrop id="myDialog">
	<p>This is a dialog with a backdrop.</p>
	<button id="closeBtn">Close</button>
</dialog>

<script>
	const dialog = document.getElementById('myDialog');
	const openBtn = document.getElementById('openBtn');
	const closeBtn = document.getElementById('closeBtn');

	openBtn.addEventListener('click', () => {
	dialog.showModal();
	});

	closeBtn.addEventListener('click', () => {
	dialog.close();
	});
</script>
:where([data-backdrop])::backdrop {
	background-color: rgba(0, 0, 0, 0);
}
Comments : -
  • Semantics: a CSS pseudo-element that styles the backdrop behind a modal element — the dim layer between the modal and the page. Applies to <dialog> opened via showModal(), any element in fullscreen via requestFullscreen(), picture-in-picture video, and popovers with popover="auto". Catalogue groups it under Sudoh — pseudo-elements that exist in CSS but not in HTML.
  • Group: Sudoh
  • Alternatives: a manually positioned overlay <div> with position: fixed; inset: 0; background: rgba(0,0,0,0.5) — the pre-::backdrop pattern still used when fine-grained control or older browser support matters.
  • User Agent: applies position: fixed and inset: 0 to stretch the backdrop edge-to-edge over the viewport, with background-color: rgba(0, 0, 0, 0.1) — a barely-visible 10% black dim. The dialog:modal rules set user-select: text, visibility: visible, and interactivity: auto. The dialog rule sets color: canvastext.
  • Tabula Rasa: neutralises only the cosmetic — background-color: rgba(0,0,0,0) — and preserves the positioning. Without position: fixed and inset: 0 the backdrop wouldn't function at all — those declarations are structural, not cosmetic. Pseudo-elements cannot carry data-* attributes, so the reset hooks through the parent — :where([data-backdrop])::backdrop.
  • Note: the reset deliberately picks neutralisation over replacement. A 50% black dim would feel more modal — and is what most production apps actually use — but choosing a specific dim value is the project picking a design opinion. The neutralisation position is consistent with the rest of the reset: kill the UA cosmetic, let the author bring their own.
  • Verdict: modern CSS finally gave authors a real hook for modal backdrops instead of forcing manual overlay divs. The UA's 10% default is barely visible by design. The reset takes the same position — transparent by default, author decides the dim.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Untouchables untouchables_group.svg

Tooltip [title] tooltip.svg

User Agent StyleSheet

<a href="#" title="This is the browser's tooltip">Hover me</a>

Tabula Rasa StyleSheet

<a data-tooltip href="#" title="This is the browser's tooltip">Hover me</a>
Comments : -
  • Semantics: the yellow hover-box that appears when the cursor lingers over any element carrying a title attribute. The browser draws it, the OS themes it, the author cannot reach it. Catalogue groups it under Untouchables — browser UI primitives that exist outside the CSS cascade entirely.
  • Group: Untouchables
  • Alternatives: a custom tooltip built from a real DOM element — a <span> or <div> positioned via CSS, shown on :hover or focus. Every UI library ships one because the native version is unstyleable. Custom tooltips can be styled and made accessible; the native one is free and works without JavaScript.
  • User Agent: no CSS hook exists. There is no ::tooltip, no :title pseudo, no addressable selector. DevTools shows nothing because there is nothing to show — the tooltip is drawn outside the document's style cascade entirely.
  • Tabula Rasa: cannot neutralise what it cannot reach. The TR-side iframe is identical to the UA-side by design — the sameness is the demonstration. This is where the reset's mandate ends.
  • Note: font, colour, background, border-radius, animation, position, dismissal delay — all controlled by the OS, all different on Windows, macOS, and Linux. The reader gets whatever the operating system decides a tooltip should look like, regardless of what the page's CSS says.
  • Verdict: the browser holds a small set of UI primitives sovereign. The tooltip is the most visible of them. Authors who want consistency build their own and accept the cost.
  • MDN Web Docs — Reference

URL Preview [href] url.svg

User Agent StyleSheet

<a href="https://example.com">Hover me</a>

Tabula Rasa StyleSheet

<a data-url href="https://example.com">Hover me</a>
Comments : -
  • Semantics: the URL preview that appears when the cursor hovers over a link — historically in the browser's status bar, now a small overlay at the bottom-left of the viewport. Triggered by the href attribute on <a>. Browser-drawn, position-fixed by the browser, font and background controlled entirely by browser chrome. Catalogue groups it under Untouchables — browser UI primitives that exist outside the CSS cascade entirely.
  • Group: Untouchables
  • Alternatives: none in the sense of replacing it. The URL preview is a security feature — it lets users see where a link goes before they click. Custom solutions can add URL hints in tooltips or expanded link previews, but cannot remove or restyle the native one without defeating its anti-phishing purpose.
  • User Agent: no CSS hook exists. The URL preview is rendered by the browser chrome, not by the document's rendering engine. DevTools shows nothing — there is no selector, no rule, no cascade.
  • Tabula Rasa: cannot neutralise what it cannot reach. The TR-side iframe is identical to the UA-side by design. This is where the reset's mandate ends.
  • Note: the URL preview can be obscured via JavaScript — window.status manipulation was a common early-web trick to show fake URLs. Modern browsers ignore window.status entirely, precisely because of that phishing vector. The preview is now considered part of the trusted browser UI, immune to page-level interference.
  • Verdict: a security primitive the browser refuses to hand to CSS. The right decision. Authors who want custom link previews build them on top of the native one — never instead of it.
  • MDN Web Docs — Reference

Scrollbars [overflow] scrollbars.svg

User Agent StyleSheet

<div style="overflow: auto; height: 100px;">
	<p>Long content that overflows the container so the browser draws scrollbars.</p>
	<p>More text to ensure overflow.</p>
	<p>Even more text.</p>
	<p>Yet more text.</p>
	<p>Final paragraph forcing vertical scroll.</p>
</div>
scrollbar-width: auto; /* implied */
scrollbar-color: auto; /* implied */
scrollbar-gutter: auto; /* implied */

Tabula Rasa StyleSheet

<div data-scrollbars style="overflow: auto; height: 100px;">
	<p>Long content that overflows the container so the browser draws scrollbars.</p>
	<p>More text to ensure overflow.</p>
	<p>Even more text.</p>
	<p>Yet more text.</p>
	<p>Final paragraph forcing vertical scroll.</p>
</div>
:where([data-scrollbars]) {
}
Comments : -
  • Semantics: the vertical and horizontal scrollbars the browser draws when content overflows a scrollable container. Triggered by overflow: auto, overflow: scroll, or content exceeding a fixed-height element. Browser-drawn, OS-themed, partially addressable via CSS. Catalogue groups it under Untouchables — browser UI primitives that exist at the edge of the CSS cascade.
  • Group: Untouchables
  • Alternatives: a custom scroll container — overflow: hidden with JavaScript-managed scroll position plus a hand-styled scrollbar element. Every designer-friendly UI library ships one. Custom scrollbars look how you want; they almost always break momentum scrolling, keyboard navigation, accessibility tooling, and platform conventions that the native scrollbar handles correctly.
  • User Agent: the Styles panel shows no scrollbar-related rules. The three relevant properties — scrollbar-width, scrollbar-color, scrollbar-gutter — only appear in the Computed panel under "show all", each resolving to its initial value of auto. The browser styles the scrollbar; the normal cascade isn't where that styling lives.
  • Tabula Rasa: declines to opt in. The :where([data-scrollbars]) hook is empty — the reset provides the surface but takes no position on whether scrollbars should look different from the OS default. Native scrollbars are correct behaviour for most cases; styling them is an editorial choice the author makes when they have a reason.
  • Note: the standard CSS surface is narrow. scrollbar-width accepts only auto, thin, or none. scrollbar-color requires two colours (thumb and track). scrollbar-gutter reserves space even when the scrollbar is hidden. No padding, no thumb shape, no per-state hover styling, no arrow control. WebKit vendor-prefixed pseudo-elements (::-webkit-scrollbar) offer more control but remain non-standard.
  • Verdict: the category's first escapee. Scrollbars were fully browser-controlled from 1995 until the scrollbar-color and scrollbar-width properties arrived around 2020. If scrollbars can graduate from Untouchable, anything in this group can. Pressure on the platform works.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Velocity velocity_group.svg

BDI <bdi></bdi> bdi.svg

User Agent StyleSheet

<p>User <bdi>إيان</bdi> scored 90 points.</p>
<p><bdo dir="rtl">This text is reversed.</bdo></p>
bdi {
	unicode-bidi: isolate;
}

Tabula Rasa StyleSheet

<p>User <bdi data-bdi>إيان</bdi> scored 90 points.</p>
<p><bdo data-bdo dir="rtl">This text is reversed.</bdo></p>
:where([data-bdi]) {
	display: inline-block;
}
Comments : -
  • Semantics: an inline element that isolates a span of text whose directionality is unknown or user-determined — typically a username, product name, or any string pulled from a database that might contain Arabic, Hebrew, or other right-to-left characters. Without <bdi>, a right-to-left name embedded in left-to-right text can corrupt the surrounding sentence's visual order. Catalogue groups it under Velocity — elements that govern the direction and flow of text.
  • Group: Velocity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: the CSS unicode-bidi: isolate property on a <span> — achieves the same isolation but without the semantic signal that the content is of unknown directionality. Use <bdi> when the directionality is genuinely unknown; use CSS when it's a presentational choice.
  • User Agent: applies unicode-bidi: isolate — the element's defining behaviour. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block. unicode-bidi: isolate is preserved from the UA — it is the entire purpose of this element. Removing it would break bidirectional text isolation entirely.
  • Note: bidirectional text is one of the most underappreciated problems in web development. Mix a right-to-left username like "إيان" into a left-to-right sentence and the Unicode Bidirectional Algorithm may reorder characters in unexpected ways — punctuation jumps, numbers flip, the sentence breaks. <bdi> creates an isolation boundary — the text inside is treated as its own independent run, insulated from the surrounding direction. Essential for any application that displays user-generated content from a global audience.
  • Verdict: invisible but essential for internationalised applications. Any app that displays usernames, product names, or any user-generated string should wrap those strings in <bdi>. The cost is two tags. The benefit is correct text rendering for Arabic, Hebrew, Persian, and any other right-to-left language.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

BDO <bdo></bdo> bdo.svg

User Agent StyleSheet

<p>User <bdi>إيان</bdi> scored 90 points.</p>
<p><bdo dir="rtl">This text is reversed.</bdo></p>
bdo[Attributes Style] {
	direction: rtl;
}

bdo[dir] {
	unicode-bidi: isolate-override;
}

Tabula Rasa StyleSheet

<p>User <bdi data-bdi>إيان</bdi> scored 90 points.</p>
<p><bdo data-bdo dir="rtl">This text is reversed.</bdo></p>
:where([data-bdo]) {
	display: inline-block;
}
Comments : -
  • Semantics: an inline element that overrides the Unicode Bidirectional Algorithm for its content — forcing the text to render in a specific direction regardless of the characters it contains. The required dir attribute specifies the direction: rtl (right-to-left) or ltr (left-to-right). Where <bdi> isolates unknown directionality, <bdo> explicitly imposes it. Catalogue groups it under Velocity — elements that govern the direction and flow of text.
  • Group: Velocity Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: the CSS direction property with unicode-bidi: bidi-override on a <span> — achieves the same override but without the semantic signal. Use <bdo> when the directional override is meaningful content; use CSS when it is purely presentational.
  • User Agent: the dir="rtl" attribute maps to an inline style — direction: rtl. The UA also applies unicode-bidi: isolate-override via the bdo[dir] selector — overriding the bidirectional algorithm completely for the element's content. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block. unicode-bidi: isolate-override is preserved from the UA — it is the element's defining behaviour. The direction comes from the dir attribute, not from CSS, so the reset has nothing to neutralise there.
  • Note: the key distinction between <bdi> and <bdo> is intent. <bdi> says "I don't know which direction this text flows — figure it out and isolate it." <bdo> says "I know exactly which direction this text flows — override everything and render it my way." Use <bdi> for user-generated content of unknown directionality. Use <bdo> when you explicitly need to reverse or force text direction — mirrored text, code samples with RTL variables, or deliberate directional effects.
  • Verdict: the directional override element. Less commonly needed than <bdi> but indispensable when you need explicit control over text direction. Always include the dir attribute — without it the element has no effect.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Speed Bumps speed_bumps_group.svg

BR <br /> br.svg

User Agent StyleSheet

<p>Line one.<br />Line two.</p>
element.style {
}

Tabula Rasa StyleSheet

<p>Line one.<br data-br />Line two.</p>
:where([data-br]) {
}
Comments : -
  • Semantics: a void element that produces a line break in text — forcing the next character to appear at the start of a new line within the same block. Not a paragraph separator — it breaks the line without ending the paragraph context. Catalogue groups it under Speed Bumps — elements that interrupt or pause the flow of content.
  • Group: Speed Bumps Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: CSS margin-bottom on block elements for spacing between paragraphs. CSS white-space: pre or pre-wrap to preserve newlines in source. A new <p> when the content is genuinely a new paragraph. <br> is for line breaks within a continuous piece of text — not for adding vertical space.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline. The line break behaviour is parser-level — the browser generates a forced line break regardless of CSS.
  • Tabula Rasa: empty rule. The line break behaviour comes from the parser, not from CSS. Nothing cosmetic to neutralise.
  • Note: the most misused element in HTML. Developers reach for <br> to add vertical space between elements — that's not what it's for. Use margins and padding for spacing. <br> is correct for poetry, addresses, and any content where the line break is part of the meaning — where "Line one / Line two" is semantically different from "Line one Line two".
  • Verdict: use it when the line break is meaningful content. Don't use it as a spacing hack — that's CSS's job.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

WBR <wbr /> wbr.svg

User Agent StyleSheet

<p>superlongwordthat<wbr />mightbreakhere</p>
element.style {
}

Tabula Rasa StyleSheet

<p>superlongwordthat<wbr data-wbr />mightbreakhere</p>
:where([data-wbr]) {
}
Comments : -
  • Semantics: a void element that marks a position within a word where the browser may break the line if needed — a soft break opportunity, not a forced break. The word renders on one line when space permits; the break only fires when the line would otherwise overflow. Catalogue groups it under Speed Bumps — elements that interrupt or pause the flow of content.
  • Group: Speed Bumps Cardinality: Infinite Layout: Inline Voidity: Void
  • Alternatives: CSS overflow-wrap: break-word — breaks long words at any character when they overflow, without needing markup hints. CSS word-break: break-all — more aggressive, breaks at any character. The CSS approach requires no markup changes; <wbr> gives the author precise control over where the break may occur.
  • User Agent: no CSS rules — element.style { }. display resolves to the CSS initial value of inline. The soft break opportunity is parser-level — the browser records the position and uses it only when the line overflows.
  • Tabula Rasa: empty rule. The break opportunity comes from the parser, not from CSS. Nothing cosmetic to neutralise.
  • Note: the difference between <br> and <wbr> is permission vs mandate. <br> says "break here, always." <wbr> says "break here if you need to." Useful for long URLs, chemical names, technical strings, or any compound word that should stay on one line when possible but break cleanly when the viewport is narrow.
  • Verdict: a polite line break. Use it when you want to suggest where a long word should break without forcing it. More surgical than CSS overflow-wrap.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

HR <hr /> hr.svg

User Agent StyleSheet

<p>Section one.</p>
<hr />
<p>Section two.</p>
hr {
	display: block;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
	margin-inline-start: auto;
	margin-inline-end: auto;
	color: gray;
	unicode-bidi: isolate;
	overflow: hidden;
	border-style: inset;
	border-width: 1px;
}

Tabula Rasa StyleSheet

<p>Section one.</p>
<hr data-hr />
<p>Section two.</p>
:where([data-hr]) {
	margin-block-start: 0px;
	margin-block-end: 0px;
	color: inherit;
	border: none;
	height: 1px;
	background-color: currentColor;
	overflow: visible;
}
Comments : -
  • Semantics: a void element representing a thematic break between paragraph-level content — a scene change in a story, a topic shift in an article, a section separator in a document. Not a visual decoration — the horizontal line is the browser's default presentation of a semantic boundary. Catalogue groups it under Speed Bumps — elements that interrupt or pause the flow of content.
  • Group: Speed Bumps Cardinality: Infinite Layout: Block Voidity: Void
  • Alternatives: CSS border-top on a block element for a purely decorative line with no semantic meaning. A <div> with a visible border when the separator is visual only. Use <hr> when the break is semantically meaningful — when the content on either side genuinely belongs to different topics or sections.
  • User Agent: applies display: block, vertical margins of 0.5em, margin-inline: auto (centres horizontally), color: gray, border-style: inset, border-width: 1px, and overflow: hidden. The border-style: inset is what produces the notorious 3D bevel effect that makes <hr> notoriously difficult to restyle.
  • Tabula Rasa: kills the 3D bevel entirely — border: none removes all border rendering. Replaces it with height: 1px; background-color: currentColor — a clean, predictable 1px line that inherits the current text colour and adapts to both light and dark mode. Zeroes vertical margins. Preserves margin-inline: auto — the horizontal centering is useful and worth keeping. display: block and unicode-bidi: isolate are preserved as structural.
  • Note: the most frustrating element to restyle in CSS. The border-style: inset default creates a 3D effect that resists simple colour overrides — setting color or border-color alone often does nothing. The only reliable cross-browser fix is to remove the border entirely and use background-color instead. Never nest <hr> inside a <p> — browsers will break the paragraph open, scrambling your CSS hierarchy.
  • Verdict: semantically precise for thematic breaks. The reset eliminates the browser's frustrating 3D default and gives authors a clean 1px baseline. Style from there with height, background-color, and margin.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Glitter glitter_group.svg

Ruby <ruby></ruby> ruby.svg

User Agent StyleSheet

<ruby>
	漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
ruby {
	text-indent: 0px;
	display: ruby;
}

Tabula Rasa StyleSheet

<ruby data-ruby>
	漢 <rp data-rp>(</rp><rt data-rt>かん</rt><rp data-rp>)</rp>
</ruby>
:where([data-ruby]) {
}
Comments : -
  • Semantics: a container element for ruby annotations — small phonetic guides or translations placed above or beside East Asian characters. The base text sits directly inside <ruby>; <rt> provides the annotation; <rp> provides fallback parentheses for browsers that don't support ruby. Catalogue groups it under Glitter — small, decorative, typographically precise elements that annotate content.
  • Group: Glitter Cardinality: Infinite Layout: ruby Voidity: Non Void
  • Alternatives: plain text with pronunciation in parentheses — 漢(かん) — the oldest fallback. CSS Ruby Layout properties (display: ruby, display: ruby-text) on arbitrary elements. <ruby> is the semantic standard — use it when the annotation is meaningful content, not decoration.
  • User Agent: applies display: ruby — a CSS Ruby Layout value that establishes the ruby container context. Also applies text-indent: 0px to prevent inherited indentation from disrupting annotation alignment.
  • Tabula Rasa: empty rule. display: ruby is structural — the entire ruby annotation system depends on it. text-indent: 0px matches the CSS initial value. Nothing cosmetic to neutralise.
  • Note: ruby annotations are named after the typographic term for a 5.5-point font size — the size traditionally used for phonetic guides in Japanese printing. The <rp> element's parentheses are hidden when ruby is supported and visible when it isn't — a graceful degradation pattern built directly into the HTML. The three elements — <ruby>, <rt>, <rp> — form an inseparable system.
  • Verdict: essential for East Asian typography. Underused in Western web development because most Western languages don't need phonetic annotation — but indispensable for Japanese, Chinese, and Korean content.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

RT <rt></rt> rt.svg

User Agent StyleSheet

<ruby>
	漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
ruby > rt {
	display: ruby-text;
	font-size: 50%;
	text-align: start;
}

rt {
	text-indent: 0px;
	line-height: normal;
	text-emphasis: none;
}

Tabula Rasa StyleSheet

<ruby data-ruby>
	漢 <rp data-rp>(</rp><rt data-rt>かん</rt><rp data-rp>)</rp>
</ruby>
:where([data-rt]) {
}
Comments : -
  • Semantics: an element providing the ruby annotation text — the phonetic guide or translation placed above or beside the base character. Must be a child of <ruby>. The annotation text is rendered at half the size of the base text by default and positioned above it. Catalogue groups it under Glitter — small, decorative, typographically precise elements that annotate content.
  • Group: Glitter Cardinality: Infinite Layout: ruby-text Voidity: Non Void
  • Alternatives: CSS display: ruby-text on a <span> — achieves the same positioning without the semantic signal. Use <rt> when the annotation is meaningful content.
  • User Agent: two rule blocks apply. When <rt> is a direct child of <ruby> — display: ruby-text positions it as an annotation, font-size: 50% renders it at half the base text size, text-align: start left-aligns it. Always — text-indent: 0px prevents inherited indentation, line-height: normal gives it its own line rhythm, text-emphasis: none suppresses emphasis marks on the annotation itself.
  • Tabula Rasa: empty rule — Tabula Rasa remains silent. Every UA declaration serves a structural purpose in the ruby annotation system. Resetting font-size, display, or text-emphasis would break the annotation rendering entirely. This is one of the few elements where the reset has no business intervening.
  • Note: text-emphasis: none on <rt> is subtle but important — emphasis marks (dots or circles placed above characters) are sometimes used in East Asian typography. Applying emphasis to the annotation itself would be visually confusing — the annotation is already a meta-layer above the base text. The UA correctly suppresses it.
  • Verdict: the annotation half of the ruby pair. Let the UA do its work — the sizing, positioning, and emphasis suppression are all correct defaults for East Asian typography. Override only if you have a specific typographic reason.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

RP <rp></rp> rp.svg

User Agent StyleSheet

<ruby>
	漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
rp {
	display: none;
}

/* inherited from ruby */
ruby {
	text-indent: 0px;
}

Tabula Rasa StyleSheet

<ruby data-ruby>
	漢 <rp data-rp>(</rp><rt data-rt>かん</rt><rp data-rp>)</rp>
</ruby>
:where([data-rp]) {
}
Comments : -
  • Semantics: an element providing fallback parentheses around ruby annotation text for browsers that do not support ruby rendering. When ruby is supported the content is hidden — display: none. When ruby is not supported the parentheses appear, giving the reader — 漢(かん) — a readable approximation. Catalogue groups it under Glitter — elements that form the ruby annotation system.
  • Group: Glitter Cardinality: Infinite Layout: None Voidity: Non Void
  • Alternatives: none. <rp> is the only standard way to provide graceful degradation for ruby annotations. Without it, browsers that don't support ruby render the annotation text inline with no visual separation from the base text.
  • User Agent: applies display: none — the parentheses are hidden when ruby is supported. Also inherits text-indent: 0px from the parent <ruby> rule.
  • Tabula Rasa: empty rule — Tabula Rasa remains silent. display: none is structural — it is what makes the fallback system work. Overriding it would show parentheses even when ruby is rendering correctly, breaking the visual presentation.
  • Note: the elegance of <rp> is that it provides graceful degradation without JavaScript, without feature detection, and without media queries. The UA hides it automatically when ruby works and shows it when it doesn't. That's exactly what HTML fallback patterns should look like — invisible when unnecessary, present when needed.
  • Verdict: always include it when using ruby annotations. The cost is two characters per annotation. The benefit is readable content in every browser, even those that don't support ruby layout.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Namespaces namespaces_group.svg

SVG <svg></svg> svg.svg

User Agent StyleSheet

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
	<circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>
svg[Attributes Style] {
	width: 100;
	height: 100;
}

svg:not(:root) {
	overflow-clip-margin: content-box;
	overflow: hidden;
}

Tabula Rasa StyleSheet

<svg data-svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
	<circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>
:where([data-svg]) {
	display: inline-block;
}
Comments : -
  • Semantics: the HTML entry point for the SVG namespace — Scalable Vector Graphics. Embeds a self-contained vector drawing context directly in the document. Everything inside <svg> follows the SVG specification, not HTML. The SVG specification defines 80+ child elements — paths, shapes, filters, animations, gradients. Tabula Rasa catalogues only this entry point; the SVG specification is a separate project entirely. Catalogue groups it under Namespaces — XML-based languages embedded within HTML.
  • Group: Namespaces Cardinality: Infinite Layout: Inline Voidity: Non Void
  • Alternatives: eight methods exist for using SVG in a web page. 1. Inline <svg> — full DOM access, CSS custom properties cross the boundary, responds to prefers-color-scheme, not cacheable, IDs must be unique. 2. <img src="file.svg"> — simple, cacheable, isolated browsing context, no DOM access. 3. <img src="data:image/svg+xml;base64,..."> — Data URI in <img>, no HTTP request, not cacheable. 4. CSS background-image: url(file.svg) — decorative only, no scripting, no DOM access. 5. CSS background-image: url("data:image/svg+xml,...") — inline decorative, no HTTP request. 6. <object data="file.svg"> — external, supports fallback content, limited CSS access. 7. <embed src="file.svg"> — deprecated, most browsers have removed plugin support, avoid. 8. <iframe src="file.svg"> — fully isolated, bad for SEO, not scalable, avoid.
  • User Agent: the width and height HTML attributes map to inline styles. The UA applies overflow: hidden and overflow-clip-margin: content-box via svg:not(:root) — clipping SVG content to its viewport when embedded inline. display resolves to the CSS initial value of inline.
  • Tabula Rasa: promotes to display: inline-block — gives authors box model control while keeping inline flow. overflow: hidden and overflow-clip-margin: content-box are preserved from the UA — they clip SVG content to its declared viewport, which is structural behaviour.
  • Note: inline <svg> is the only method where CSS custom properties from the parent document cross into the SVG. An <img src="file.svg"> creates a separate browsing context — CSS variables don't cross that boundary. This makes inline <svg> indispensable for icon systems and theme-aware illustrations. The tradeoff — inline SVG cannot be cached by the browser, and all IDs within the SVG must be unique across the entire document to avoid rendering conflicts. For most use cases, <img src="file.svg"> is simpler and covers 80% of SVG use cases.
  • Verdict: use inline <svg> when the graphic needs to inherit CSS custom properties or respond to JavaScript. Use <img src="file.svg"> for everything else.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Math <math></math> math.svg

User Agent StyleSheet

<math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
		<mi>a</mi>
		<mo>+</mo>
		<mi>b</mi>
	</mrow>
</math>
math {
	direction: ltr;
	text-indent: 0px;
	letter-spacing: normal;
	line-height: normal;
	word-spacing: normal;
	font-family: math;
	font-size: inherit;
	font-style: normal;
	font-weight: normal;
	display: math;
	math-shift: normal;
	math-style: compact;
	math-depth: 0;
}

/* universal rule — overrides some math declarations */
* {
	writing-mode: horizontal-tb !important;
}

Tabula Rasa StyleSheet

<math data-math xmlns="http://www.w3.org/1998/Math/MathML">
	<mrow>
		<mi>a</mi>
		<mo>+</mo>
		<mi>b</mi>
	</mrow>
</math>
:where([data-math]) {
}
Comments : -
  • Semantics: the HTML entry point for the MathML namespace — Mathematical Markup Language. Embeds a self-contained mathematical expression context directly in the document. Everything inside <math> follows the MathML specification, not HTML. The MathML specification defines 40+ child elements — fractions, roots, operators, identifiers, matrices. Tabula Rasa catalogues only this entry point; the MathML specification is a separate project entirely. Catalogue groups it under Namespaces — XML-based languages embedded within HTML.
  • Group: Namespaces Cardinality: Infinite Layout: math Voidity: Non Void
  • Alternatives: LaTeX rendered to SVG via MathJax or KaTeX — the most common approach for mathematical content on the web, producing accessible, scalable output without requiring native MathML support. Images of equations — accessible only with detailed alt text. Plain Unicode math symbols — limited but works everywhere.
  • User Agent: the most comprehensive UA stylesheet of any element in the catalogue. Thirteen declarations govern the mathematical rendering context — display: math establishes the math layout mode, font-family: math selects a system math font (like STIX Two Math or Latin Modern Math), math-style: compact uses compact display by default, math-depth: 0 sets the nesting depth for automatic size scaling of subscripts and superscripts, direction: ltr forces left-to-right regardless of document direction, and writing-mode: horizontal-tb !important forces horizontal text — mathematical notation does not support vertical writing modes.
  • Tabula Rasa: empty rule — Tabula Rasa remains completely silent. Every single UA declaration is structural to the MathML rendering system. Resetting any of them — font-family, display, math-depth, direction — would break mathematical notation rendering entirely. This is the element the reset has the least business touching.
  • Note: native MathML support in browsers improved dramatically between 2022 and 2024 — Chrome added full MathML Core support in 2023, completing cross-browser support. Before that, MathJax was the only reliable solution. The CSS Math properties — math-shift, math-style, math-depth — are part of CSS Math Inline Level 3, a specification designed specifically to give authors control over mathematical layout without breaking the MathML rendering engine.
  • Verdict: use it for mathematical content when native MathML is sufficient. Use MathJax or KaTeX when you need broader compatibility, better fonts, or LaTeX input syntax. Never reset it — the UA knows what it's doing.
  • MDN Web Docs — Reference
  • Can I Use — Browser support

Curtain curtain_group.svg

Details <details></details> details.svg

User Agent StyleSheet

<details>
	<summary>Click to expand</summary>
	<p>This is the hidden content revealed when expanded.</p>
</details>
details {
	display: block;
}

Tabula Rasa StyleSheet

<details data-details>
	<summary data-summary>Click to expand</summary>
	<p>This is the hidden content revealed when expanded.</p>
</details>
:where([data-details]) {
}
Comments : -
  • Semantics: a block-level disclosure widget — a container that hides its content until the user activates it. The first <summary> child provides the visible label and toggle control; everything else inside is the hidden content. When the open attribute is present the content is shown; when absent it is hidden. No JavaScript required. Catalogue groups it under Curtain — elements that hide and reveal content.
  • Group: Curtain Cardinality: Infinite Layout: Block Voidity: Non Void
  • Alternatives: a custom accordion built with JavaScript — more styleable but requires scripting. CSS-only accordion using hidden checkboxes and labels — works without JavaScript but relies on non-semantic markup. <details> is the only native, no-JavaScript, semantic disclosure widget in HTML.
  • User Agent: applies display: block only. The show/hide behaviour is handled by the browser's internal rendering engine based on the presence of the open attribute — no CSS is involved in the toggle mechanism itself.
  • Tabula Rasa: empty rule. display: block is structural and correct. The toggle behaviour is attribute-driven, not CSS-driven. Nothing cosmetic to neutralise.
  • Note: the open attribute is the key — add it to show content by default, remove it to hide. The browser manages the toggle entirely. The disclosure triangle on <summary> can be styled via ::marker or removed with list-style: none. The hidden content is not display: none — it participates in layout when open and is excluded when closed through the browser's internal rendering.
  • Verdict: the only native accordion in HTML. Use it for FAQs, expandable sections, and any content that should be hidden by default. No JavaScript. No ARIA required — the browser handles accessibility automatically.
  • MDN Web Docs — Reference
  • Can I Use — Browser support