Skip navigation

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>:

html:5>(header>nav>ul>li*5>a)+main+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">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <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>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

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 (6 part series)

  1. Need search for your website? THIS is the easiest way to do it!
  2. 7 things I wish I knew when I started programming
  3. Building a responsive website? Start with mobile first!
  4. Use prefers-color-scheme in CSS to set light/dark mode according to user's settings!
  5. Make your code look beautiful using HighlightJS!
  6. Create a complete semantic HTML page with a single shortcut

Subscribe

Get the latest posts weekly straight to your inbox!
2021 Savvas Stephanides
Buy me a coffee
Some icons from Freepik