Lesson 2 of 5 · 15–25 minutes

Document structure

🏠The everyday picture

A letter has a fixed shape: the envelope with the address (information about the letter), then the letter itself (what the reader reads). Every HTML page has the same kind of fixed shape.

📘What it really is

Every HTML page starts with the same skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About me</title>
  </head>
  <body>
    <h1>Hello, I'm Asha</h1>
    <p>I'm learning to build websites.</p>
  </body>
</html>

<!DOCTYPE html> tells the browser this is a modern HTML page.
<html lang="en"> wraps everything; lang says which language the page is in (use hi for Hindi). Screen readers use it to pronounce words correctly.
<head> holds information about the page, not shown in the page itself:
charset="utf-8" lets the page show every language's letters, including Devanagari;
viewport makes the page fit phone screens (Module 16);
<title> is the name shown in the browser tab and in search results.
<body> holds everything the visitor sees.

🖱️Try it

In VS Code, open my-first-site/index.html, delete what's there and type the skeleton above (typing it builds memory better than pasting). Use your own name. Save it, then open the file in your browser (drag it onto a browser window). Look at the tab: it shows your title.

Tip: in VS Code, typing ! in an empty .html file and pressing Tab writes the skeleton for you. Use it once you've typed it by hand a few times.

✅Quick check

Where does the text in <title> appear?

Show the answer

In the browser tab and in search engine results, not in the page itself.

Your page shows Hindi letters as strange symbols. What's probably missing?

Show the answer

<meta charset="utf-8"> in the head.