Your First HTML Page

In this chapter you will write a complete HTML document from an empty file and understand the purpose of every line. This skeleton is the starting point for every page you will ever build.

The anatomy of an HTML document

A valid HTML page has a fixed set of building blocks. Copy this into a file named index.html and open it in any browser:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah's Bakery — Fresh Bread Daily</title>
    <meta name="description" content="A neighbourhood bakery offering fresh sourdough, cakes, and custom orders.">
  </head>
  <body>
    <header>
      <h1>Sarah's Bakery</h1>
    </header>
    <main>
      <p>Fresh sourdough baked every morning at 6 AM.</p>
    </main>
    <footer>
      <p>&copy; 2026 Sarah's Bakery</p>
    </footer>
  </body>
</html>

Expected output: a browser tab titled "Sarah's Bakery — Fresh Bread Daily", with the heading "Sarah's Bakery", one paragraph, and a copyright line.

Line-by-line explanation

1. <!DOCTYPE html>

The very first line tells the browser this document follows HTML5 rules. Without it, browsers may fall into "quirks mode" and render layouts inconsistently. It is not a tag — it is a declaration, and it must appear before anything else.

2. <html lang="en">

The root element that wraps everything on the page. The lang attribute declares the page language — here English. Screen readers use it to pick the right pronunciation voice, and search engines use it to serve the correct language version of your site.

3. The <head> — information about the page

Nothing inside <head> is shown in the page body. It carries metadata:

4. The <body> — everything users see

Headings, paragraphs, images, lists, forms — all visible content lives here. Keep <head> and <body> strictly separated.

Real-life use case

Every page on Scriptly follows this exact skeleton — the tutorial you are reading now has a charset meta tag, a viewport tag, a unique title, and a meta description tuned for search engines. When you build a portfolio site, a landing page, or a product page, you start here every single time.

Common mistakes

• Forgetting the charset — text turns into garbage characters like ’.
• Missing viewport — your site looks tiny on mobile and Google's mobile-first index ranks it lower.
• Duplicate or missing <title> — every page on your site needs a unique, descriptive title.
• Putting visible content in the head — browsers will not render it as intended.

Best practices

• Write the lang attribute in your page's language: lang="en", lang="hi", lang="es".
• Keep titles under ~60 characters so search results do not truncate them.
• Keep meta descriptions between 120–160 characters.
• Indent children inside head and body — two spaces is a common convention.

Practice challenge

Create a page for your own "business" (a café, a gym, a YouTube channel). Fill in a unique title and meta description, and include one heading plus one paragraph in the body. Then open it in your browser and check the tab title.

What's next?

Learn what tags like <h1> and <p> actually are, how they nest, and which ones close themselves in Elements, Tags & Nesting. You can also jump ahead to HTML Attributes to learn how tags carry extra information.