DocHero
Lesson 2 +10 XP

Your First Web Page

Your First Web Page

Let's build a tiny web page and look at the parts of the skeleton.

The skeleton of every page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

The parts

  • <!DOCTYPE html>: a special instruction that tells the browser "this is a modern HTML page." It's not a tag, just a declaration. Always put it on the very first line!
  • <html>: the root element. Everything lives inside it.
  • <head>: the brain-in-the-background. It holds secret info the page needs but doesn't show.
  • <title>: the text you see on the browser tab. It lives in the head.
  • <meta>: gives the browser extra info, like which characters to use (charset).
  • <body>: everything visible on the page lives here.

lang attribute

lang="en" tells the browser "this page is written in English." This helps screen readers pronounce words correctly and search engines understand your page.

Comments

You can leave notes for yourself with comments. They don't show up on the page:

<!-- This is a comment. Nobody sees me! -->

Comments start with <!-- and end with -->.

TL;DR

  • <!DOCTYPE html> must be the first line.
  • <html> wraps everything.
  • <head> holds secret info; <body> holds visible stuff.
  • <title> is the browser tab text.