ZemDomu semantic linting

Semantic HTML, simplified.

Find exactly where semantic mistakes originate, even when buried deep in your component tree. Catch missing landmarks, improper heading order, unlabeled images, and empty tags before they reach a scanner report.

Where ZemDomu runs

  • VS Code: inline diagnostics and workspace scans.
  • CLI: scriptable linting for local workflows.
  • GitHub Action: CI checks with annotated findings.

VS Code extension

Lint while you work

Get instant feedback as you type, with inline diagnostics and a consistent view in the Problems panel.

  • Inline squiggles and quick fixes for common issues.
  • Workspace scan command for larger audits.
  • Status bar summary when issues are detected.
Install the extension

Command palette

ZemDomu: Scan Workspace for Semantic Issues

Run this when you want a full project sweep.

CLI workflows

Automate in scripts

Use the CLI to lint file globs, run pre-commit checks, or plug into your build pipeline.

  • Lint HTML, JSX, TSX, and Vue templates.
  • Enable cross component analysis when needed.
  • Pair with custom rules for team-specific checks.
CLI setup

CLI example

npx zemdomu "**/*.{html,jsx,tsx,vue}"
npx zemdomu "src/**/*.tsx" --cross --cross-depth 3

GitHub Action

Gate merges in CI

Add a single workflow step to block merges when semantic violations are detected.

  • Annotates pull requests with actionable feedback.
  • Runs on the same rules as the extension and CLI.
  • Ideal for shared standards across teams.
Add to your workflow

Workflow snippet

name: ZemDomu SEO Guard
on: [pull_request]

jobs:
  zemdomu:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: Zemdomu/ZemDomu-action@main
        with:
          files: |
            **/*.{html,jsx,tsx,vue}

Cross component analysis

Understand the full tree

Trace semantic issues across imports so you can spot missing landmarks and heading order breaks across components.

  • Follow React and Vue imports automatically.
  • Track headings across nested component trees.
  • Control depth for large design systems.
Explore the rules

API example

import { ProjectLinter } from "zemdomu";

const linter = new ProjectLinter({
  crossComponentAnalysis: true,
  crossComponentDepth: 3,
});

await linter.lintFile("App.jsx");

SEO and accessibility

Catch the signals early

ZemDomu focuses on semantics that matter for accessibility and search visibility, so you can ship with confidence.

  • Detect missing alt text and link labels.
  • Ensure landmark structure and heading order.
  • Prevent empty inline tags and duplicated IDs.
Browse all rules

Rules library

  • requireAltText
  • enforceHeadingOrder
  • requireLinkText
  • uniqueIds
  • requireHtmlLang
  • requireTableCaption

Rules index preview

ZMD series rules at a glance

Scan the rules by category or jump straight to the full index.

Browse all rules

Structure and headings

Outline, sections, and document hierarchy.

Links and navigation

Anchor clarity, destinations, and navigation intent.

Forms and controls

Labels, buttons, and keyboard access.

Media and embeds

Images and embeds with the right metadata.

Lists, tables, and integrity

Structure, captions, empty tags, and ID uniqueness.

FAQ and support

Common questions, quick answers

Which files does ZemDomu lint?

HTML, JSX, TSX, and Vue templates are supported across the extension, CLI, and GitHub Action. See installation options.

How do I enable cross component analysis?

Use the CLI --cross flag or enable cross component analysis in the extension settings. Review the rules.

Can I add custom rules?

Yes. Use the CLI or API integration to supply custom rule modules. See the core repo.