EN

Setup・Getting ready

The big picture of an HTML file

Where do headings and divs even go? Once you know the "fixed shape" of an HTML file, you'll never wonder where to write things again.

So far we’ve written just a single line of <h1>. But a real HTML file actually has a fixed shape (a template). “Where am I supposed to put my tags?” — that question gets cleared up right here.

Here is the basic shape

Just about every HTML file starts from something like this. No need to memorize it by heart. For now, just take a look and think, “ah, so there’s an outer frame like this.”

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>My First Page</h1>
    <p>Write your body text here.</p>
  </body>
</html>
The basic shape of HTML written in the VSCode editor, with tags like DOCTYPE, html, head, and body shown in color
Seen in a real editor, this shape looks like this. The color coding lets you follow the nested structure.

There are a lot of tags, but if you look at them one role at a time, it’s simple.

TagRole
<!DOCTYPE html>The opening greeting that says “this is an HTML document” (think of it as a magic word that always goes on line 1)
<html>The outermost box that wraps the whole page
<head>Where you write behind-the-scenes information (like the page title; it doesn’t appear on screen)
<body>Where you write the content people see on screen ←★ this is the star of the show

Where does show up? — take a look at the tab

You wrote <title>My Page</title> inside <head>. It doesn’t appear on the screen, so what’s it for? The answer is up at the top of the browser, in the tab. The very page you’re reading right now should have the article’s name showing in its tab too.

<title> is, so to speak, the page’s name tag. Besides the tab, it’s used as the name when you bookmark the page, and as the heading that shows up in search results. It doesn’t appear inside the screen, but it’s quietly doing its job — that’s what “behind the scenes” means.

divs and headings go inside

This is the most important part of today. Headings <h1>, paragraphs <p>, and things like <div> — everything you want to show on screen goes inside <body>.

<body>
  <h1>A big heading</h1>
  <p>A normal paragraph.</p>
  <div>A single block.</div>
</body>

The answer to “where do I write <div>?” is inside <body>. Put another way, if you write a heading inside <head>, it won’t show up on screen. Things you want to show go in body, behind-the-scenes information goes in head — once you’ve got this division of roles, you’ll never be lost about where to write things again.

SetupInstall VSCode on your computerLining up indentation by hand is a pain. It turns out that extension you added at the very start can tidy it all up at the push of a button.

Common mistakes when writing the shape

The spots where people trip up on this shape are pretty much always the same. If you know about them ahead of time, there’s nothing to be afraid of.

  • Forgetting the / in a closing tag — dropping the / in </body>, so you end up with two <body> tags, is a common slip
  • Mixing up the closing order — writing them in the order </html></body> (correctly, the inner </body> comes first)
  • Spelling of DOCTYPE — <!DOCTYPE html> goes on line 1, exactly in this form. If you’re not confident about memorizing it, copying is fine
TipsWrite HTML at lightning speed with EmmetEmmet is what produced that whole shape in an instant. It has plenty of other shorthand that lets you write code at blazing speed, too.

Summary of this lesson

  1. HTML has a fixed shape of <!DOCTYPE html> → <html> → <head> → <body>
  2. Things you want to show on screen (<h1>, <p>, <div>, and so on) go inside <body>
  3. <head> holds the behind-the-scenes information (it doesn’t appear on screen)
  4. <title> is the page’s name tag that shows in the tab

Try it: shape your practice index.html into the template

Your index.html so far had just the single line <h1>My First Page</h1>. Let’s shape it into the template you learned today.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>My First Page</h1>
  </body>
</html>

We moved the original <h1> inside <body>, and wrapped it with <!DOCTYPE html>, <html>, <head>, and <title>. Even if you save and refresh the browser, the look on screen is no different from before — because the content of the <h1> is the same. The appearance hasn’t changed, but the contents of the file have grown into a proper “shape.”

Nice work. That wraps up “getting ready.” Tools, place, file, where to write — the whole foundation is now in place. From here, we’ll learn the tags that go inside that <body>, one at a time.

FAQ

What is the difference between head and body?
head is the behind-the-scenes part where you write information about the page (like its title), and it isn't shown on the screen. body is where you write the content that people actually see. Anything you want to show goes inside body.
What happens if I forget to write DOCTYPE?
The page usually still shows up, but the browser falls back to a compatibility mode that follows old rules, and the layout can end up looking off. You don't need to memorize the reasoning — just make it a habit to always put it on the first line.
Where does the content of the title tag show up?
Not in the page's body, but up in the browser's tab. It's also used as the heading in search results and the name of a bookmark — it's the page's name tag.