1.2free~12 min

Document structure

Artifact: A page with proper html/head/body skeleton

1. Principle

Every HTML page has the same four-part skeleton. Memorize this — you will write some version of it on every page you ever build.

<!DOCTYPE html>      ← tells the browser "this is modern HTML"
<html>               ← the document itself
  <head>             ← info about the page (not shown to the user)
    ...
  </head>
  <body>             ← content the user sees
    ...
  </body>
</html>

The <head> is the metadata: the page's title, the language, the character encoding, links to CSS files, social-preview info. None of it is rendered to the user.

The <body> is the rendered content: text, images, buttons, everything.

Browsers will render even broken HTML (no doctype, no head, no closing tags) but the structure matters for accessibility, search engines, social previews, and developer sanity. Always write the skeleton.

2. Do (you try)

Replace your entire index.html with this canonical skeleton:

htmlindex.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your Name — Portfolio</title>
</head>
<body>
  <h1>Your Name</h1>
  <p>This is going to be a portfolio.</p>
</body>
</html>

Replace Your Name with your actual name (in both the <title> and the <h1>).

Save. Refresh the browser tab where index.html is open.

3. Verify (how you know)

Three checks:

  1. Browser tab. Look at the very top of your browser window — the tab itself should now show Your Name — Portfolio. That's the <title> doing its job.
  2. Rendered page. The page should show your name as a big heading and your placeholder sentence below it.
  3. View source. Right-click → View page source. Confirm all four skeleton parts (<!DOCTYPE>, <html>, <head>, <body>) are present.

If the tab still says index.html or shows a file icon, your <title> is wrong — maybe a typo or you forgot to save.

4. Reference

Locked. Try it yourself first.