HTML Tags + Markdown Syntax - A Practical Guide in VS Code

Markdown has become the lightweight markup language of choice for writers and developers alike — it’s simple, clean, and efficient. But when it comes to advanced formatting (like underline or highlight), Markdown alone falls short.

Fortunately, Markdown fully supports embedded HTML tags. That means we can extend the syntax using tags like <mark> and <u> to enhance readability and structure. This guide shows you how to combine VS Code, Emmet shortcuts, and intelligent editing to create rich Markdown documents.

1. HTML Tags vs. Markdown Syntax Comparison

All HTML tags can be embedded directly in Markdown, as long as the renderer supports them (e.g., GitHub, Jekyll, Obsidian).

2. Using HTML + Markdown Efficiently in VS Code

1. Markdown Autocompletion

VS Code offers built-in support for Markdown syntax completion:

• Typing ** → expands to **|**
• Typing * → expands to *|*
• Typing ~~ → expands to ~~|~~

Perfect for bold, italic, and strikethrough formatting.

2. Emmet Wrapping for HTML Tags

Need <mark>, <u>, or other unsupported Markdown styles? Emmet can save the day.

How it works

1. Select the Markdown text
2. Open the command palette or press the shortcut
3. Search for: Emmet: Wrap with Abbreviation
4. Enter mark, u, del, or any tag → it wraps the text

Example

• Original text: important content
• Select it → wrap with mark → becomes: important content

3. Bind a Custom Shortcut (Recommended: Shift + Space)

Make Emmet wrapping even faster:

1. Open keyboard shortcuts: Code → Preferences → Keyboard Shortcuts
2. Search for emmet.wrapWithAbbreviation
3. Assign a shortcut (e.g., Shift + Space)

Then:

• Select text
• Press Shift + Space
• Enter u, mark, del, etc. → wrapped instantly

3. Recommended HTML + Markdown Combinations

**<mark>Key Term</mark>**  
_<u>Emphasized Sentence</u>_