Keyboard Shortcuts - Complete HTML Tutorial

⌨️ Speed Up Your Coding

Keyboard shortcuts are essential for efficient HTML development. Master these shortcuts to code faster and more productively across different operating systems.

Universal Text Editing

These shortcuts work in most text editors and code editors:

Action	🪟 Windows	🍎 Mac	🐧 Linux
Copy	`Ctrl + C`	`Cmd + C`	`Ctrl + C`
Paste	`Ctrl + V`	`Cmd + V`	`Ctrl + V`
Cut	`Ctrl + X`	`Cmd + X`	`Ctrl + X`
Undo	`Ctrl + Z`	`Cmd + Z`	`Ctrl + Z`
Redo	`Ctrl + Y`	`Cmd + Shift + Z`	`Ctrl + Y`
Select All	`Ctrl + A`	`Cmd + A`	`Ctrl + A`
Find	`Ctrl + F`	`Cmd + F`	`Ctrl + F`
Replace	`Ctrl + H`	`Cmd + Option + F`	`Ctrl + H`

🔹 File Operations

Essential shortcuts for managing files in your code editor:

Action	🪟 Windows	🍎 Mac	🐧 Linux
New File	`Ctrl + N`	`Cmd + N`	`Ctrl + N`
Open File	`Ctrl + O`	`Cmd + O`	`Ctrl + O`
Save File	`Ctrl + S`	`Cmd + S`	`Ctrl + S`
Save As	`Ctrl + Shift + S`	`Cmd + Shift + S`	`Ctrl + Shift + S`
Close Tab	`Ctrl + W`	`Cmd + W`	`Ctrl + W`
Reopen Closed Tab	`Ctrl + Shift + T`	`Cmd + Shift + T`	`Ctrl + Shift + T`

🔹 VS Code Specific Shortcuts

Essential shortcuts for Visual Studio Code, the most popular HTML editor:

Action	🪟 Windows	🍎 Mac	🐧 Linux
Command Palette	`Ctrl + Shift + P`	`Cmd + Shift + P`	`Ctrl + Shift + P`
Quick Open File	`Ctrl + P`	`Cmd + P`	`Ctrl + P`
Toggle Terminal	Ctrl + `	Cmd + `	Ctrl + `
Split Editor	`Ctrl + \`	`Cmd + \`	`Ctrl + \`
Toggle Sidebar	`Ctrl + B`	`Cmd + B`	`Ctrl + B`
Go to Line	`Ctrl + G`	`Cmd + G`	`Ctrl + G`
Duplicate Line	`Shift + Alt + ↓`	`Shift + Option + ↓`	`Shift + Alt + ↓`
Move Line Up/Down	`Alt + ↑/↓`	`Option + ↑/↓`	`Alt + ↑/↓`

🔹 HTML Development Shortcuts

Shortcuts specifically useful for HTML coding:

Action	🪟 Windows	🍎 Mac	🐧 Linux
Comment/Uncomment	`Ctrl + /`	`Cmd + /`	`Ctrl + /`
Block Comment	`Shift + Alt + A`	`Shift + Option + A`	`Shift + Alt + A`
Indent	`Tab`	`Tab`	`Tab`
Unindent	`Shift + Tab`	`Shift + Tab`	`Shift + Tab`
Format Document	`Shift + Alt + F`	`Shift + Option + F`	`Shift + Alt + F`
Multi-cursor	`Ctrl + Alt + ↑/↓`	`Cmd + Option + ↑/↓`	`Ctrl + Alt + ↑/↓`

🔹 Browser Development Shortcuts

Essential shortcuts for testing HTML in web browsers:

Action	🪟 Windows	🍎 Mac	🐧 Linux
Refresh Page	`F5` or `Ctrl + R`	`Cmd + R`	`F5` or `Ctrl + R`
Hard Refresh	`Ctrl + F5` or `Ctrl + Shift + R`	`Cmd + Shift + R`	`Ctrl + F5` or `Ctrl + Shift + R`
Open Developer Tools	`F12` or `Ctrl + Shift + I`	`Cmd + Option + I`	`F12` or `Ctrl + Shift + I`
Inspect Element	`Ctrl + Shift + C`	`Cmd + Shift + C`	`Ctrl + Shift + C`
View Page Source	`Ctrl + U`	`Cmd + Option + U`	`Ctrl + U`
Toggle Full Screen	`F11`	`Cmd + Ctrl + F`	`F11`
Zoom In	`Ctrl + +`	`Cmd + +`	`Ctrl + +`
Zoom Out	`Ctrl + -`	`Cmd + -`	`Ctrl + -`

🔹 Emmet Shortcuts

Emmet abbreviations for faster HTML coding (works in most modern editors):

Common Emmet Abbreviations


html:5          → Full HTML5 boilerplate
div.container   → <div class="container"></div>
ul>li*3         → Unordered list with 3 items
p{Hello World}  → <p>Hello World</p>
a[href="#"]     → <a href="#"></a>
img[src alt]    → <img src="" alt="">
table>tr*3>td*4 → Table with 3 rows and 4 columns

Action	🪟 Windows	🍎 Mac	🐧 Linux
Expand Abbreviation	`Tab` or `Ctrl + E`	`Tab` or `Cmd + E`	`Tab` or `Ctrl + E`
Wrap with Abbreviation	`Ctrl + Shift + G`	`Cmd + Shift + G`	`Ctrl + Shift + G`
Balance Outward	`Ctrl + ,`	`Cmd + ,`	`Ctrl + ,`
Balance Inward	`Ctrl + .`	`Cmd + .`	`Ctrl + .`

🔹 Navigation Shortcuts

Shortcuts for navigating through your code efficiently:

Action	🪟 Windows	🍎 Mac	🐧 Linux
Go to Beginning of Line	`Home`	`Cmd + ←`	`Home`
Go to End of Line	`End`	`Cmd + →`	`End`
Go to Beginning of File	`Ctrl + Home`	`Cmd + ↑`	`Ctrl + Home`
Go to End of File	`Ctrl + End`	`Cmd + ↓`	`Ctrl + End`
Jump by Word	`Ctrl + ←/→`	`Option + ←/→`	`Ctrl + ←/→`
Select Word	`Ctrl + D`	`Cmd + D`	`Ctrl + D`
Select Line	`Ctrl + L`	`Cmd + L`	`Ctrl + L`

🎉 Congratulations!

You've completed the HTML course! You now have a solid foundation in HTML and web development fundamentals. Remember: good HTML is the backbone of every great website - keep practicing and building amazing things for the web!