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
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.
In TextMate these are called snippets and they can easily be assigned a tab completion shortcut;
Select Bundles » Edit Bundles… in the TextMate 2 menu.
Select the bundle you want to add a snippet to, e.g. HTML. Press Cmd-N to create a new bundle item, and select Snippet.
Select Menu Actions
Press Command + N to create a new item, select snippet.
In the text area copy and paste your template.
On the drawer there's a field for "Tab Trigger", enter "html" there.
Now when you type "html" and press tab, your snippet will be inserted.
More info about creating a snippet.
Note: I've added "$0" in between your body tags. This is a tab stop and your cursor would appear at the $0. You can read more about advanced Snippet features here.
In My Humble Opinion;
html doesn't tab complete already because there's no good way to anticipate what you would want in your html template.
Sure, Emmet (as @bitten suggests in his answer) gives you something, but html:5 does too much; HTML5 does not mandate a html, head, or body tag. See this Stack post about HTML5's optional tags. Please see bitten's comment for some warranted concerns with this approach.
That said, I do use Emmet and it is worth investigating.
As for just inserting the doctype for HTML5 in TextMate, just type doctype and Tab.
In PyCharm while in an index.html I typed Exclamation Mark "!", then pressed TAB and get an HTML boilerplate code block inserted.
