HTML5 doctype keyboard shortcut using Emmet

When creating a new HTML document, there's always that sluggish start before you should begin; Getting the boilerplate/skeleton of the HTML structure out of the way. You'll need something like this HTML before you can begin:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>

</body>
</html>

This mundane task (some may enjoy it…) can be almost completely eliminated with the use of a handy HTML5 doctype shortcut (once you have the Emmet plugin installed).

How to use the Emmet HTML5 doctype shortcut

Save the blank document as an HTML file (so Emmet can actually identify the shortcut), and type html:5 followed by ctrl + e (Coda / Eclipse) OR tab (Sublime Text 2) OR whatever the trigger is inside of your IDE for expanding Emmet shortcut codes:

html:5

Sublime Text 3 / JetBrains

With Sublime Text 3 or a JetBrains based IDE (like WebStorm, IntelliJ, PHPStorm, etc.), you can simply use an exclamation mark (!) followed by a tab:

!

Check to see if your IDE supports Emmet

Farewell

Speed ahead with this convenient HTML5 doctype shortcut with Emmet. Use responsibly.

Stay up-to-date...

@codechewing is where we always announce the release of any new guide - follow us to keep updated.

Join in

0 Comments
Code Chewing Twitter