HTML Foundations: Module 1

← Dashboard
Module 1: The Roast

Document Structure

HTML is the structural roast of your website. It uses tags to tell the browser what is a heading, image, or button. Every page starts with a boilerplate.

<!DOCTYPE html>
<html>
  <head>
    <title>My Coffee Shop</title>
  </head>
  <body>
    <h1>Freshly Brewed Code</h1>
    <p>Start your day with HTML.</p>
  </body>
</html>

The Anatomy of a Tag

Opening tags, closing tags, and self-closing tags like <img>.

Logo
HomeMenuAbout
1
<nav> Navigation

Best Beans in Town

Order now for free delivery.

2
<h1> Primary Heading
Pro Tip

Use semantic tags like <header> and <footer> instead of just <div> to help screen readers.

Nesting

Tags can go inside tags — like putting espresso (content) inside a cup (container).