Link as non-anchor markup during editing (e.g. span + data-href)

Some editors keep URLs on a span (or other non-anchor inline) with data-* attributes while the user edits, then serialize to semantic <a href> for publish or clipboard. Mainstream framework defaults still use <a> in the live DOM; span-based linking is a deliberate product/engineering choice with distinct trade-offs.

Problem Overview

Native <a> inside contenteditable participates in navigation, default click behavior, and selection quirks (link click / editing). Teams that want “click places caret, Ctrl+click opens URL” or that fight nested-anchor normalization sometimes avoid <a> until export.

Observed patterns

Impact

• Accessibility: A live span is not a link in the accessibility tree until you expose role/name or export to <a>.
• Clipboard: Copy may produce HTML without native link semantics unless you customize copy / serialize.
• Paste: Pasted <a> may need normalization into your internal representation.
• Maintenance: You own URL validation, rel, target, and security (javascript: URLs, etc.).

When teams choose span (or non-<a>) internally

• Strong control over caret placement at link boundaries without browser default navigation.
• Avoiding invalid nested <a> during partial edits before merge/sanitization.
• Matching a CMS or design tool pipeline that already uses data-* for internal references.

Browser comparison

This is less “browser A vs B” than your DOM contract vs native editing. The same browser behaves differently if the node is <a> vs <span> (e.g. closest('a'), default link styling).

Solutions

• Serialize at boundaries: On blur, save, or publish, convert internal spans to <a href> (or Markdown) with tests.
• Optional decoration: role="link" + tabIndex={0} on span only if you intentionally mirror link semantics for a11y while editing (still not the same as native navigation).
• Reuse library defaults: If you do not need span semantics, Lexical / Tiptap / ProseMirror defaults are battle-tested <a>-based paths.

Related cases

• ce-0587 — pattern summary and checklist (English)
• ce-0587 (ko) — Korean locale

References (external)

Mainstream editors: default is <a>

• Lexical — @lexical/link: LinkNode / AutoLinkNode build a link element (<a>) in the DOM (createDOM).
• Tiptap — Link extension: mark that renders as <a> with configurable HTMLAttributes.
• Slate — Inlines example: inline links are typically rendered as <a {...attributes}> in renderElement.
• ProseMirror — link marks in schema usually toDOM to ["a", attrs, 0] (see also this repo’s model-schema link).

Discussions of editing difficulty and workarounds

• GrapesJS #610 — Inserting/Editing links is hard — real-world pain in a WYSIWYG builder around link UX.
• Stack Overflow — Firefox / span inside hyperlink — nested structure issues when mixing spans and anchors (already linked from scenario-link-insertion).

Related reading in this project

• tip-011-link-insertion-editing — optional span + data-href subsection
• scenario-link-insertion
• scenario-browser-hyperlink-detection