Menu
I am looking for the shortcut keys that I should use to autocomplete the structure of the HTML.
So for instance, when I type html and press a few keys the following structure should appear:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Note: I am using a MAC
858
"!" After typing, press the "TAB" key on the keyboard.
129
Perhaps you should look into templates for your IDE, for example in Sublime Text you have snippets which I would recommend looking into.
However, there is another workflow that you are able to use using a toolkit such as Emmet. The feature that you specifically want in Emmet is called "Expand Abbreviation". Essentially, you type out "CSS like" strings, put your caret at the end of the string and hit tab and Emmet will parse it into HTML. For example, the following string:
!doctype>html>(head>title)+(body)
will compile to the above (with a trailing closing tag of </!doctype> which is a bit awkward. However Emmet is quite clever and we can go one step further.. so expanding:
html:5
Will actually give you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Which is pretty much what you were looking for! And if you want to take it another step further, Emmet also supports expanding ! which is an alias for html:5. Only one character.
Check out Emmet's cheat sheet for more little bits.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
