1# HTML
2
3HTML support is available through the [HTML extension](https://github.com/zed-industries/zed/tree/main/extensions/html).
4
5- Tree-sitter: [tree-sitter/tree-sitter-html](https://github.com/tree-sitter/tree-sitter-html)
6- Language Server: [microsoft/vscode-html-languageservice](https://github.com/microsoft/vscode-html-languageservice)
7
8This extension is automatically installed, but if you do not want to use it, you can add the following to your settings:
9
10```json
11{
12 "auto_install_extensions": {
13 "html": false
14 }
15}
16```
17
18## Formatting
19
20By default Zed uses [Prettier](https://prettier.io/) for formatting HTML.
21
22You can disable `format_on_save` by adding the following to your Zed `settings.json`:
23
24```json
25 "languages": {
26 "HTML": {
27 "format_on_save": "off",
28 }
29 }
30```
31
32You 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".
33
34### LSP Formatting
35
36To use the `vscode-html-language-server` language server auto-formatting instead of Prettier, add the following to your Zed settings:
37
38```json
39 "languages": {
40 "HTML": {
41 "formatter": "language_server",
42 }
43 }
44```
45
46You can customize various [formatting options](https://code.visualstudio.com/docs/languages/html#_formatting) for `vscode-html-language-server` via your Zed `settings.json`:
47
48```json
49 "lsp": {
50 "vscode-html-language-server": {
51 "settings": {
52 "html": {
53 "format": {
54 // Indent under <html> and <head> (default: false)
55 "indentInnerHtml": true,
56 // Disable formatting inside <svg> or <script>
57 "contentUnformatted": "svg,script",
58 // Add an extra newline before <div> and <p>
59 "extraLiners": "div,p"
60 }
61 }
62 }
63 }
64 }
65```
66
67## See also
68
69- [CSS](./css.md)
70- [JavaScript](./javascript.md)
71- [TypeScript](./typescript.md)