HTML Foundations

What you will learn

• What HTML is and how browsers use it.
• How an HTML document is structured.
• Elements, tags, attributes, and nesting.
• Headings, paragraphs, links, images, lists, and buttons.
• Semantic elements such as header, nav, main, section, and footer.
• Good indentation, accessibility basics, and common mistakes to avoid.

Every code panel has a Copy button. When you reach the playground, paste any example in and change it. Breaking things on purpose is a great way to learn.

Part 1

What is HTML?

HTML stands for HyperText Markup Language. It is the language used to describe the content and structure of a web page. It is a markup language, not a programming language: it labels content ("this is a heading", "this is a link") rather than running instructions.

When you open an HTML file, the browser reads it from top to bottom. It uses the tags to build a model of the page, then draws that model on screen. HTML provides the structure. CSS (Module 04) styles it, and JavaScript (Module 05) makes it interactive.

Part 2

Document structure

Every HTML page follows the same skeleton. Learn this one and you can start any page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>Welcome to my page.</p>
</body>
</html>

<!DOCTYPE html>

Tells the browser this is a modern HTML5 page. It always comes first.

<html lang="en">

The root element that wraps everything. lang declares the page language, which helps screen readers.

<head>

Information about the page that visitors do not see on the page itself.

<meta charset="UTF-8">

Makes letters, accents, and symbols display correctly.

<meta name="viewport">

Makes the page scale properly on phones.

<title>

The text on the browser tab and in search results.

<body>

Everything visitors see: text, images, links, buttons.

Part 3

Elements, tags, attributes, and nesting

An element is a piece of the page. Most elements have an opening tag, some content, and a closing tag with a slash.

<p>This is <strong>important</strong> text.</p>

<p>This is <strong>important</p></strong> text.

Part 4

The elements you will use most

<h1>Main title</h1>
<h2>Section title</h2>
<h3>Subsection</h3>

<p>This is a paragraph.</p>
<p>This is another one.</p>

<a href="lesson02.html">Back to Class 2</a>

<img src="logo.png" alt="BWA Schools logo">

<ul>
  <li>Drawing</li>
  <li>Football</li>
</ul>
<ol>
  <li>Open the file</li>
  <li>Edit it</li>
</ol>

<button type="button">Click me</button>

Part 5

Semantic elements

A div says nothing about its content. Semantic elements describe their role, which helps screen readers, search engines, and other developers understand your page.

<body>
  <header>
    <h1>My Website</h1>
  </header>
  <nav>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
  <main>
    <section id="about">
      <h2>About</h2>
      <p>Hello! I am learning HTML.</p>
    </section>
  </main>
  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>

Part 6

Indentation, accessibility, and common mistakes

Indent nested elements

Indent each level of nesting by two spaces. The browser does not care, but you will, when you need to find a mistake.

<ul>
<li>One</li>
<li>Two</li>
</ul>

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Accessibility basics

• Add alt text to every meaningful image, so screen reader users know what it shows.
• Set lang on the html element, so assistive technology pronounces text correctly.
• Use headings in order: one h1, then h2, then h3. Do not pick a heading just for its size.
• Write descriptive link text. "Read the lesson" is better than "click here".
• Use the right element. Real button and a elements work with the keyboard automatically.

Common mistakes

Practice

HTML playground

Edit the code and press Run. The preview is isolated in a sandbox: scripts are blocked and links will not open from inside it. Try pasting any example from this lesson.

Challenge

Build a simple personal webpage

Use what you learned to build a page about yourself. Edit the starter, press Preview my page, and watch the checklist tick as your code meets each goal.

Knowledge check

Test what you learned