"Proper" HTML Setup

If you search the internet for an example of some basic HTML code, you'll probably see something like this. There's a bunch of extra tags at the top and bottom of this script. To be honest, they don't really affect much, but they're supposed to be there and sometimes they're useful, so I'll quickly go through these tags for you as we wrap up this introduction to HTML:

• The !DOCTYPE HTML tag at the top is a special tag that means this script should be interpreted as HTML 5, which is a little different from past versions of HTML. If you skip this tag, the layout or spacing on the page may look slightly different. (Note: there is no closing version of this tag, nor is there a slash in it!)
• The html element is the one element that contains all other elements. The opening tag is just under the doctype at the top, the closing tag is way at the bottom of the script, and everything else should be between them and indented. You don't actually have to write these tags, though, because the html element always exists whether you write it or not. There is no escape!
• The head and body elements are the only two elements that belong directly inside the html element. The head is supposed to contain invisible information about the document, whereas the body is supposed to contain all the visible text and elements. Again, both of these elements always exist whether you write them or not, and if you skip them, any text you write will automatically go in an implicit body element anyway. I'm lazy, so I usually don't bother to write these elements.
• The meta element is an invisible empty element that goes inside the head element, but it has some useful attributes. The most common one is charset, which you should set to charset="utf-8" to make sure emoji and other non-English symbols are displayed correctly.
• The title element sets the name of the browser window or tab. This can be different from anything you put in an h1 element. You probably want to use this on pages you share with other people, otherwise the window might just say "Untitled" at the top.

While I'm at it, I'd like to show you one more special tag that doesn't actually do anything. It's called a "comment", but it looks very different from other tags. It needs to start with <!-- and end with -->, and everything in between has no effect on the page. It's intended as a way to write notes to yourself and anyone else who reads your script. See the example in the script under here.

I won't judge you if you skip these tags, but the tricky ones can be squashed down to one line, so just to be on the safe side, I recommend starting your HTML scripts with the following snippet which you can copy-and-paste into your scripts:

There is plenty more to learn about HTML, but by now you know enough to be dangerous! For the next chapter of this tutorial, we're going to focus on a single new element that changes everything...