# HTML
## About
[Hypertext Markup Language](https://html.spec.whatwg.org/) (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets CSS and scripting languages such as [JavaScript](https://vscode-anywhere.readthedocs.io/en/dev/modules/javascript.html#module-javascript).
## Installation
Change `enable` from `False` to `True` in the `html` section (cf [module installation](/vscode-anywhere/modules/install.md)).
```yaml
vscode-anywhere:
html:
enabled: True
```
{% hint style="info" %}
You can also take a look at the [VSCode-Anywhere html module configuration](https://github.com/gigi206/VSCode-Anywhere/blob/V2/salt/modules/html/defaults.yaml).
{% endhint %}
For more details, read the the official documentation [HTML](https://code.visualstudio.com/docs/languages/html) and [CSS / SCSS / Less](https://code.visualstudio.com/docs/languages/css).
VSCode includes native support of [emmet](https://code.visualstudio.com/docs/editor/emmet).
## Requirements
No requirements.
## VSCode
### VSCode extensions
#### Zignd.html-css-class-completion
[This extension](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) adds CSS support for HTML documents.
#### Zignd.html-css-class-completion
[This extension](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace for external files referenced through the link element.
#### pranaygp.vscode-css-peek
[This extension](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.
#### bradgashler.htmltagwrap
[This extension](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap) allows to wrap your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).
#### Umoxfo.vscode-w3cvalidation
[This extension](https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation) enables W3C validation support by the [Nu Html Checker library](https://validator.github.io/validator/).
Extension highlights the wrong properties and values when enabled. Just install the extension and open your CSS file. Validation will be performing in background.
#### vincaslt.highlight-matching-tag
[This extension](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag) is intended to provide the missing functionality that should be built-in out of the box in VSCode - to highlight matching opening or closing tags.
#### formulahendry.auto-rename-tag
[This extension](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) automatically renames paired HTML/XML tag.
#### mrmlnc.vscode-autoprefixer
[This extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer) provides an interface to [autoprefixer](https://github.com/postcss/autoprefixer).
#### esbenp.prettier-vscode
[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
#### naumovs.color-highlight
[This extension](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) styles css/web colors found in your document.
#### smelukov.vscode-csstree
[CSSTree validator](https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree) validates CSS according to W3C specs and browser implementations.
### VSCode settings
#### Global settings
```javascript
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
```
#### Windows settings
```javascript
{
"vscode-w3cvalidation.javaHome": "C:\\VSCode-Anywhere\\apps\\scoop\\apps\\openjdk\\current"
}
```
{% hint style="info" %}
Assuming you have installed in the default directory `C:\VSCode-Anywhere`.
{% endhint %}
#### Linux settings
```javascript
{
"vscode-w3cvalidation.javaHome": "/home/linuxbrew/.linuxbrew/opt/openjdk/libexec"
}
```
#### MacOS settings
```javascript
{
"vscode-w3cvalidation.javaHome": "/home/linuxbrew/.linuxbrew/opt/openjdk/libexec"
}
```
### VSCode keybindings
No [keybindings](https://code.visualstudio.com/docs/getstarted/keybindings).
## Software
### Windows software
#### scoop
* [openjdk](https://github.com/ScoopInstaller/Java/blob/master/bucket/openjdk.json) (required by the extensions [Umoxfo.vscode-w3cvalidation](https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation))
### Linux software
#### brew
* [openjdk](https://formulae.brew.sh/formula/openjdk) (required by the extensions [Umoxfo.vscode-w3cvalidation](https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation))
### MacOS software
#### brew
* [openjdk](https://formulae.brew.sh/formula/openjdk) (required by the extensions [Umoxfo.vscode-w3cvalidation](https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation))
## Documentation
* [HTML](https://github.com/Kapeli/feeds/blob/master/HTML.xml)
* [CSS](https://github.com/Kapeli/feeds/blob/master/CSS.xml)
* [Emmet](https://github.com/Kapeli/feeds/blob/master/Emmet.xml)
* [Saas](https://github.com/Kapeli/feeds/blob/master/Sass.xml)
* [Less](https://github.com/Kapeli/feeds/blob/master/Less.xml)
## VSCode-Anywhere
### Environment
No environment.
### Specific settings
No specific settings.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gigi206.gitbook.io/vscode-anywhere/modules/list/html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.