Documentation/No empty formatting tags

No empty formatting tags

ZMD009

ZemDomu reports supported inline semantic elements, such as <strong> or <em>, when their analyzed content is empty. Remove accidental empty markup or add the text the element is meant to emphasize.

What this rule catches

  • Supported inline elements with no static text content in the analyzed source.
  • Empty emphasis markup that contributes no semantic content.

What static analysis cannot prove

  • Static analysis may not know the final text of expressions, slots, localization calls, or other runtime content.
  • Passing the rule does not prove that emphasis is meaningful or used appropriately.

Standards classification and detection confidence

Classification
advisory — The rule identifies likely accidental empty semantic markup rather than a standalone WCAG failure.
Detection confidence
high — Resolved empty content is a direct source check. Generated text, CSS content, and runtime children are outside this rule's proof boundary.

Applicable WCAG 2.2 criteria

No direct WCAG 2.2 success criterion.

No WCAG 2.2 success criterion prohibits every empty inline semantic element. Review whether the element was intended to convey emphasis or meaning.

Normative means the rule checks a machine-testable part of a cited standards requirement. Advisory means it enforces a documented authoring convention or supporting technique. Neither classification makes a ZemDomu result proof of WCAG conformance.

Examples

✅ Good

<p>This is <strong>really</strong> important.</p>

❌ Bad

<p>This is <strong></strong> important.</p>

React and Vue notes

React/TSX
An inline element whose only child is a JSX expression may need rendered testing when the expression cannot be resolved statically.
Vue
An inline element populated only by interpolation or a slot may need rendered testing when its final content cannot be resolved statically.

Quick summary

When: Inline tags like <strong> or <em> contain no text

Warning: <tag> tag should not be empty

Solution: Provide text content or remove the tag

Why it matters

Accessibility: Empty tags may be skipped or announced as blank by screen readers, disrupting content flow.

SEO: Superfluous markup can dilute keyword signals and add irrelevant nodes to the DOM.

Rule details

In brief

  • Goal: Eliminate empty inline tags to maintain semantic clarity.
  • What to do: Remove or populate any <strong>, <em>, <span>, or similar inline element that has no text.
  • Why: Empty inline tags add noise and may be rendered or announced incorrectly by assistive technologies.

Intent

Prevent meaningless markup that breaks screen-reader announcements and complicates styling.

Benefits

  • Improved accessibility: screen readers ignore empty elements, but encountering them can disrupt navigation.
  • Cleaner DOM: removing empty nodes reduces document size and simplifies CSS targeting.
  • Better maintainability: developers and automated tools work with fewer irrelevant nodes.

Techniques

  • ARIA practices: Ensure that inline elements conveying emphasis or strong importance wrap non-empty text.
  • HTML validation: Use linters (e.g., eslint-plugin-jsx-a11y) to flag empty inline tags.

HTML Semantics

Inline tags without content serve no semantic purpose and should either be removed or contain descriptive text.

References

Tips & edge cases

  • Run an HTML validator to catch void inline tags before deployment.
  • Search your codebase for `<strong></strong>` or `<em></em>` and audit each occurrence.

See also

Related guides

Last verified: