LESSON 2.2

The HTML Framework

The skeleton every HTML page is built on

See what goes at the top of every HTML file, from the DOCTYPE declaration to the head and body sections that hold your page together.

💡 The Concept

Every webpage starts with the same HTML document structure, and understanding it gives you a solid foundation for everything that follows. Every building needs a blueprint. And every web page needs a framework. If you’ve ever peeked at the source code of a website and felt overwhelmed by the angle brackets and indentation, here’s some good news: every single HTML page follows the same basic skeleton. Once you understand the DOCTYPE, the <head>, and the <body>, you’ll have the key to reading and writing any web page on the internet.

The Framework of Every Web Page

There is a specific structure that every HTML page must follow. Think of it as the skeleton that browsers expect to find. Here’s what it looks like:

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

Let’s break down each piece.

The DOCTYPE Declaration

The very first line of every HTML document is the DOCTYPE declaration:

<!DOCTYPE html>

This isn’t actually an HTML tag; it’s an instruction to the web browser. It tells the browser: “Hey, this document is written in HTML5, so please render it accordingly.”

The <html> Element

Right after the DOCTYPE, you open the <html> tag:

<html lang="en">
    ...
</html>

This is the root element of your web page. Everything else, including every heading, paragraph, image, and link, lives inside this tag. The lang="en" attribute tells browsers and search engines that the page content is in English. This is important for accessibility (screen readers use it to determine pronunciation) and for SEO.

The <head> Element: The Behind-the-Scenes

The <head> section is where you put information about your web page. It contains metadata that the browser needs but that visitors don’t directly see on the page itself.

<head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
</head>

Here’s what each piece does:

  • <meta charset="UTF-8">: This tells the browser which character encoding to use. UTF-8 covers virtually every character and symbol in every language, so it’s the standard choice.
  • <title>: This sets the text that appears in the browser tab and in search engine results. It’s one of the most important elements for SEO and usability.

The <head> is also where you’ll eventually link CSS stylesheets, add favicons, connect JavaScript files, and include meta descriptions for search engines. It’s the control room of your web page. We’ll be adding more metadata as we work through these lessons.

The <body> Element: What People Actually See

Everything visible on your web page goes inside the <body> element. This includes headings, paragraphs, images, navigation menus, forms, and more. If a visitor can see it or interact with it, it belongs in the body.

<body>
    <h1>Welcome to My Website</h1>
    <p>This is the content that visitors will see and read.</p>
</body>

The body is where you’ll spend most of your time as you build out web pages.

🎬 Video Demonstration

This video shows you how to create the framework for an HTML page, starting with the <!DOCTYPE html> and adding the website language in the <html> tag, then the <head> and <body>.

Exercise: Try It Yourself

💡 Planning to follow these lessons all the way through? I highly recommend building a website template alongside them. As you learn each new concept, you will add it to your template — and when you are ready to build a real website, you will have a clean, professional starting point ready to copy. If you skip the template now and copy your practice project later instead, you will spend more time removing the wrong code than building something new. See the Making a Website Template article for the full picture of what you are building toward.

Step 1. Create a file named “index.html” in your websites/template folder. (On Windows, save as a Hypertext Markup Language or HTML file).

Step 2. Add <!DOCTYPE html>

Step 3. Add the <html lang=”en”> </html> tags. Note that the closing tag goes at the end of the page. 

Step 4. Add the <head></head> tags

Step 5. Add the <body></body>tags

Step 6. Add  title and meta-charset to the <head>

<meta charset=”utf-8″>

<title>Website Template</title>

Double check your work against this screenshot. It is important that all of this code is correct, because you will use it in all the future websites you will make.

Each website gets its own folder. Keep this habit from day one, and you’ll save yourself countless headaches down the road.

Why This Framework Matters

You might be wondering: does the browser really care about all of this? The short answer is yes. Here’s why:

  • The DOCTYPE ensures the browser uses modern rendering standards instead of guessing.
  • The <head> provides critical metadata that affects how your page appears in search results, how it renders on mobile devices, and how accessible it is to users with disabilities.
  • The <body> is the properly designated container for all visible content. Putting things outside of it can cause unpredictable behavior.

Skipping or misplacing any of these components can lead to rendering issues, poor SEO rankings, and accessibility problems. The framework is simple, but it’s essential.

Your Starter Template

Save this as index.html in a templates folder, and you’ll always have a reliable starting point. Every time you begin a new project, copy this file, rename it, and start building. We’ll keep adding to the template in these early lessons.

You’ve Got This

Learning HTML is like learning any new language. It feels unfamiliar at first, but the patterns click into place faster than you expect. The DOCTYPE, head, and body framework is the foundation that every web page is built on. Now that you understand it, you’re not just copying code; you actually know why each piece is there and what it does.

💡 If you are making a website template: Add the HTML framework from this lesson to your template/index.html — the DOCTYPE, head, body, and semantic tags. See the full website template guide for reference.

❓ Frequently Asked Questions

What is the difference between the head and the body in an HTML page?

The head is the control room. It contains information about the page that the browser needs but that visitors never see directly. This includes the page title, character encoding, links to stylesheets, and metadata for search engines. The body is everything visible: headings, paragraphs, images, navigation, forms. A simple rule of thumb is: if a visitor can see it or interact with it, it goes in the body. If it is instructions for the browser, it goes in the head.

Why does every HTML page need a DOCTYPE declaration?

The DOCTYPE tells the browser which version of HTML the page is written in. Without it, browsers fall back into a mode called quirks mode, where they try to guess how to render the page and they often guess wrong. Adding DOCTYPE html at the top is a one-line instruction that ensures every browser renders your page consistently and correctly. It is not a tag, it does not have a closing counterpart, and it always goes on the very first line of the file.

Why does the html tag include lang=en and does it matter?

It matters more than most beginners expect. The lang attribute tells browsers, search engines, and screen readers what language the page content is written in. Screen readers use it to select the correct pronunciation engine. Without it, a reader set to English might mispronounce content or switch languages unexpectedly. Search engines use it to serve the page to the right audience. It is a small addition that has real accessibility and SEO benefits.

What does meta charset=UTF-8 do and do I really need it?

The charset attribute tells the browser how to decode the characters in your HTML file. UTF-8 is a character encoding that covers virtually every character and symbol from every language in the world, including accented letters, currency symbols, emoji, and non-Latin scripts like Arabic, Chinese, and Japanese. Without it, browsers have to guess the encoding, and if they guess wrong you end up with garbled text. It is one line, it costs nothing, and it prevents a category of bugs that are genuinely difficult to diagnose. Always include it.

★ Key Takeaways

Every web page follows the same basic structure. This lesson covered the HTML framework, including the doctype, html, head, and body tags that every page needs. Next, you will learn about paragraph and break tags, the most common way to display text on a page. These simple tags are the ones you will use most often.

Next Lesson: The Paragraph <p> and Break <br> Tags

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons