We've covered a bunch of basic tags - tags that just show some text or an image. These are fun and useful, but there's a whole world of much fancier stuff out there, and to access it we need to start thinking about document structure.
Immediately after the DOCTYPE (read this if you don't know what that is), almost every serious HTML page begins with the
<html> tag. This is not technically required, but it's necessary to write clear code.
It's also useful for some more advanced trickery that we most likely won't cover in this course. The tag works exactly how you think: you open with
<html>, and you close with </html>. Your entire website goes inside it (minus the DOCTYPE - the DOCTYPE is always above everything else, including
the <html> tag).
Inside the <html> tag, you have two main sub-sections: <head> and <body>.
The header, contained within the <head> tag, contains all of your metadata - this is information describing your
page, that isn't actually part of the page content. For instance, if you want your tab to have a title, you use the <title> tag inside the <head>.
You should only ever put invisible metadata in the header; don't put content there. You technically don't have to have a <head>, but it's a good practice.
The body, contained within the <body> tag, contains all of your actual content that shows up in the page. You can put all the normal tags in it,
and use them exactly as you would without all this fancy stuff!
An example of a bare-minimum working page is thus:
<!DOCTYPE html>
<html>
<head>
<!-- metadata goes here! -->
</head>
<body>
<h1>Actual content goes here!</h1>
</body>
</html>
This is a lot more complicated than what we've done so far! With practice writing all this out will become muscle memory; I won't expect you to have it memorized immediately.
[/] [#template.html]