1---
2title: HTML
3description: "Configure HTML language support in Zed, including language servers, formatting, and debugging."
4---
5
6# HTML
7
8HTML support is available through the [HTML extension](https://github.com/zed-industries/zed/tree/main/extensions/html).
9
10- Tree-sitter: [tree-sitter/tree-sitter-html](https://github.com/tree-sitter/tree-sitter-html)
11- Language Server: [microsoft/vscode-html-languageservice](https://github.com/microsoft/vscode-html-languageservice)
12
13This extension is automatically installed, but if you do not want to use it, you can add the following to your settings:
14
15```json [settings]
16{
17 "auto_install_extensions": {
18 "html": false
19 }
20}
21```
22
23## Formatting
24
25By default Zed uses [Prettier](https://prettier.io/) for formatting HTML.
26
27Configure formatting in Settings ({#kb zed::OpenSettings}) under Languages > HTML, or add to your settings file:
28
29```json [settings]
30 "languages": {
31 "HTML": {
32 "format_on_save": "off",
33 }
34 }
35```
36
37You can still trigger formatting manually with {#kb editor::Format} or by opening the [command palette](..//getting-started.md#command-palette) ({#kb command_palette::Toggle}) and selecting "Format Document".
38
39### LSP Formatting
40
41To 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:
42
43```json [settings]
44 "languages": {
45 "HTML": {
46 "formatter": "language_server",
47 }
48 }
49```
50
51You can customize various [formatting options](https://code.visualstudio.com/docs/languages/html#_formatting) for `vscode-html-language-server` via your Zed `settings.json`:
52
53```json [settings]
54 "lsp": {
55 "vscode-html-language-server": {
56 "settings": {
57 "html": {
58 "format": {
59 // Indent under <html> and <head> (default: false)
60 "indentInnerHtml": true,
61 // Disable formatting inside <svg> or <script>
62 "contentUnformatted": "svg,script",
63 // Add an extra newline before <div> and <p>
64 "extraLiners": "div,p"
65 }
66 }
67 }
68 }
69 }
70```
71
72## Using the Tailwind CSS Language Server with HTML
73
74To get all the features (autocomplete, linting, etc.) from the [Tailwind CSS language server](https://github.com/tailwindlabs/tailwindcss-intellisense/tree/HEAD/packages/tailwindcss-language-server#readme) 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`:
75
76```json [settings]
77{
78 "lsp": {
79 "tailwindcss-language-server": {
80 "settings": {
81 "experimental": {
82 "classRegex": ["class=\"([^\"]*)\""]
83 }
84 }
85 }
86 }
87}
88```
89
90With these settings, you will get completions for Tailwind CSS classes in HTML `class` attributes. Examples:
91
92```html
93<div class="flex items-center <completion here>">
94 <p class="text-lg font-bold <completion here>">Hello World</p>
95</div>
96```
97
98## See also
99
100- [CSS](./css.md)
101- [JavaScript](./javascript.md)
102- [TypeScript](./typescript.md)