Files
zed/docs/src/languages/html.md
T
morgankrey a439f856b8 Improve internal links across documentation (#64481)
## Summary

- Adds 63 internal links across 41 documentation pages.
- Connects existing terms such as Agent Panel, semantic tokens, edit
predictions, and language-specific debugging to their detailed reference
pages.
- Uses existing wording for 60 links and makes three small wording
changes where a natural anchor did not already exist.

## Why this matters

Readers can now move from overview and configuration pages to the
relevant detailed guidance without searching the documentation manually.
The changes add navigation only. They do not change product behavior or
documented requirements.

## Jev experiment

This PR came from a local experiment using Jev to audit internal links
across the published documentation. The audit scripts are not included
in this PR.

- Code shortlisted 2,715 possible source and destination page pairs.
- Jev made two separate decisions for each pair: whether the link would
help the reader, and which exact existing phrase should become the
anchor.
- Five strong links without existing anchor text went to GPT-5.6 Luna
for minimal rewrite options. Jev then selected among those fixed
options.
- A local review interface surfaced the results for Pass or Fail
decisions before any files changed.

Human review approved 66 changes. Two no longer matched the current
`main` branch, and review removed one circular link, leaving the 63
links in this PR.

## Validation

- `pnpm dlx prettier@3.5.0 <changed docs> --check`
- `lychee --exclude '^http' './docs/src/**/*'` — 0 errors
- `mdbook build docs`
- Verified that the diff adds exactly 63 Markdown links

Release Notes:

- Improved links between related documentation pages.
2026-09-19 19:58:09 +00:00

3.1 KiB

title, description
title description
HTML Configure HTML language support in Zed, including language servers, formatting, and debugging.

HTML

HTML support is available through the HTML extension.

This extension is automatically installed, but if you do not want to use it, you can add the following to your settings:

{
  "auto_install_extensions": {
    "html": false
  }
}

Formatting

By default Zed uses Prettier for formatting HTML.

Configure formatting in Settings ({#kb zed::OpenSettings}) under Languages > HTML, or add to your settings file:

  "languages": {
    "HTML": {
      "format_on_save": "off",
    }
  }

You can still trigger formatting manually with {#kb editor::Format} or by opening the command palette ({#kb command_palette::Toggle}) and selecting "Format Document".

LSP Formatting

To use the vscode-html-language-server language server auto-formatting instead of Prettier, configure the formatter in Settings ({#kb zed::OpenSettings}) under Languages > HTML, or add to your settings file:

  "languages": {
    "HTML": {
      "formatter": "language_server",
    }
  }

You can customize various formatting options for vscode-html-language-server via your Zed settings.json:

  "lsp": {
    "vscode-html-language-server": {
      "settings": {
        "html": {
          "format": {
            // Indent under <html> and <head> (default: false)
            "indentInnerHtml": true,
            // Disable formatting inside <svg> or <script>
            "contentUnformatted": "svg,script",
            // Add an extra newline before <div> and <p>
            "extraLiners": "div,p"
          }
        }
      }
    }
  }

Using the Tailwind CSS Language Server with HTML

To get all the features (autocomplete, linting, etc.) from the Tailwind CSS language server in HTML files, you need to configure the language server so that it knows about where to look for CSS classes by adding the following to your settings.json:

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": ["class=\"([^\"]*)\""]
        }
      }
    }
  }
}

With these settings, you will get completions for Tailwind CSS classes in HTML class attributes. Examples:

<div class="flex items-center <completion here>">
  <p class="text-lg font-bold <completion here>">Hello World</p>
</div>

See also