EN

HTML・First steps

The overall shape of an HTML file

The "paper" you write tags on has a fixed shape too. head and body inside html—let's get a solid grip here on the outer frame common to every HTML file.

By now you have the tools to write the “content” of your text—tags and attributes. But before that, one important thing. Actually, an HTML file has a fixed outer frame to write the content into. It’s the template you caught a glimpse of back in “Getting Ready.” Let’s really make it your own here.

This is the basic template

A blank HTML file always starts from this shape.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Shima's Homepage</title>
  </head>
  <body>
    <h1>Shima</h1>
    <p>You'll write the content here.</p>
  </body>
</html>

Look at it part by part, and it’s not scary.

PartRole
<!DOCTYPE html>The first greeting that says “this is an HTML document” (the magic first line)
<html>The outermost box that wraps the whole page
<head>The room where you write behind-the-scenes information (the title, etc.; doesn’t show on screen)
<body>The room where you write the content visible on screen ←★ this is the star

lang=“en” is the declaration “this page is in English”

The lang="en" in <html lang="en"> is the attribute you learned last time. It’s a declaration that “this page is written in English (en = english),” and it’s a note passed along to the browser, screen readers, and search engines. Write the code for whatever language you’re using—ja for a Japanese page, for example.

Use indentation to make “nesting” easy to see

Look closely at the basic template, and the <head> and <h1> lines are written shifted a little to the right. This is called indentation, a way of writing that makes it visible at a glance “which tag this tag sits inside.”

  • <head> and <body> are inside <html> → indent one level
  • <title> and <h1> are inside those → indent one more level

The display is the same even without indentation. But the nesting shape of boxes inside boxes is visible at a glance, so you’ll quickly notice a forgotten closing tag too. In VSCode it lines things up automatically every time you start a new line, so as long as you write without breaking that shape, you’ll be fine.

The division of roles between the two rooms

What matters is the difference in roles between <head> and <body>.

  • <head> — The page’s settings and behind-the-scenes information. Doesn’t show on screen.
  • <body> — The content that actually appears on screen. Headings, paragraphs, images—all of it here.

The <h1> and <p> you’ve learned so far, and the images and links coming up, all go inside <body>.

TipsWrite HTML at lightning speed with EmmetBeyond the trick to pop out the basic template in an instant, we’ve gathered Emmet ways of writing that make typing tags easier

Summary of this lesson

  1. An HTML file has <head> and <body> inside <html>
  2. <head> is behind the scenes (doesn’t show on screen), <body> is the main stage (shows on screen)
  3. Content like headings, paragraphs, and images all goes inside <body>
  4. Declare what language the page is in with lang="en", and make nesting easy to see with indentation

Try it: the outer frame of Shima’s page

Let’s write the outer frame of the “Shima’s Homepage” you’ll build from here into index.html. The content (inside <body>) we’ll add little by little from here on.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Shima's Homepage</title>
  </head>
  <body>
    <h1>Shima</h1>
  </body>
</html>

The “Shima’s Homepage” in <title> is the name that shows on the browser tab (it doesn’t show inside the screen). The <h1>Shima</h1> inside <body> is the first step of the page you’ll grow from here.

FAQ

What happens if I forget to write DOCTYPE?
It still displays, but the browser switches to an old display mode meant for old pages, which can cause unexpected differences in how things look. Don't overthink it—just always write it as the magic first line.
What's the difference between head and body?
head is the room where you write behind-the-scenes information like the title, and it doesn't show on screen. body is the room where you write the content that shows on screen. Everything you want to show—headings, paragraphs, and so on—goes inside body.
Do I have to write lang="en"?
It still displays without it, but writing it correctly tells the browser, screen readers, and search engines what language the page is in. Use the code for the language you are writing in—en for English, ja for Japanese.