Skip to main content

Create a complete semantic HTML page with a single shortcut

Published 2021/06/14 14:33

Emmet shortcut are simply amazing and can save minutes of code-writing when building HTML pagesin VSCode or Sublime.

What's even more amazing is that you can write Emmet shortcuts yourself to build HTML pages as complex as you like!

The Emmet shortcut below builds a structurally complete web page, which includes a <header> including <nav> and 5 navigation elements, <main> and a <footer>:


If you paste the snippet above and press Tab on VS Code, you'll get this HTML page as a result:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>

This is probably the most common structure for a web page and using a single line shortcut you can build it in 1 second!

Tips (4 part series)

  1. Need search for your website? THIS is the easiest way to do it!
  2. Building a responsive website? Start with mobile first!
  3. Use prefers-color-scheme in CSS to set light/dark mode according to user's settings!
  4. Create a complete semantic HTML page with a single shortcut
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik