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.
9
10If you do not want to use the HTML extension, you can add the following to your settings:
11
12```json
13{
14 "auto_install_extensions": {
15 "html": false
16 }
17}
18```
19
20## Formatting
21
22By default Zed uses [Prettier](https://prettier.io/) for formatting HTML
23
24You can disable `format_on_save` by adding the following to your Zed settings:
25
26```json
27 "languages": {
28 "HTML": {
29 "format_on_save": "off",
30 }
31 }
32```
33
34You can still trigger formatting manually with {#kb editor::Format} or by opening the command palette ( {#kb commandPalette::Toggle} and selecting `Format Document`.
35
36### LSP Formatting
37
38If you prefer you can use `vscode-html-language-server` instead of Prettier for auto-formatting by adding the following to your Zed settings:
39
40```json
41 "languages": {
42 "HTML": {
43 "formatter": "language_server",
44 }
45 }
46```
47
48You can customize various [formatting options](https://code.visualstudio.com/docs/languages/html#_formatting) for `vscode-html-language-server` via Zed settings.json:
49
50```json
51 "lsp": {
52 "vscode-html-language-server": {
53 "settings": {
54 "html": {
55 "format": {
56 // Indent under <html> and <head> (default: false)
57 "indentInnerHtml": true,
58 // Disable formatting inside <svg> or <script>
59 "contentUnformatted": "svg,script",
60 // Add an extra newline before <div> and <p>
61 "extraLiners": "div,p"
62 }
63 }
64 }
65 }
66 }
67```
68
69## See also:
70
71- [CSS](./css.md)
72- [JavaScript](./javascript.md)
73- [TypeScript](./typescript.md)