# Wrap with HTML tags in VSCode

By Corey J. Gallon · 2024-11-14 · https://gallon.me/wrap-with-html-tags-in-vscode.html

---

Using the Emmet capabilities in VSCode (see previous TIL) you can highlight a section of HTML code and quickly wrap it with other HTML using Emmet shortcuts.

This is particularly useful when writing plain HTML and then returning to style it.

You can access this functionality in the command palette 

![wrap in command palette](images/20241114_wrap_in_command_palette.png)

Smarter, still, is to create a keyboard shortcut for this. We’ll bind `ALT+M` to this functionality.

![create keyboard shortcut](images/20241114_create_keyboard_shortcut.png)

Now, simply highlight the HTML code you want to wrap, hit `ALT+M` and start typing the Emmet abbreviations for the tags you want to wrap the code with. For example, we’ll wrap this simple HTML form with some BulmaCSS classes to improve layout …

![wrap with tags](images/20241114_wrap_with_tags.png)

et voila!
