HTML Structure 101 7 Lessons

Before you can style a page, you need to build one. This series covers the seven structural concepts every HTML author needs to know — from the required document skeleton down to the building blocks you'll use for every layout you ever create.

Each lesson has a concept explanation, one or more code examples, and a short CodePen exercise. Work through them in order, then submit your CodePen links to the Canvas assignment.

HTML 101   DESN 368 · Spring 2026
Before you start: Make sure you're signed into CodePen with your account. You'll need to be logged in to save your work and submit links to Canvas. If you don't have an account, create a free one at codepen.io/signup.

The 7 Lessons

Lesson 1: The HTML Skeleton

Every web page starts with the same bones. Learn the required document structure that browsers expect.

Start →

Lesson 2: Nesting & Hierarchy

HTML elements live inside other elements. Learn how parent-child relationships shape the DOM.

Start →

Lesson 3: Annotating Your Code

HTML comments let you leave notes in your source code that browsers ignore.

Start →

Lesson 4: Tagging Your Content

Attributes add meaning and behavior to elements — from links to images to accessibility labels.

Start →

Lesson 5: Addressing Your Elements

Classes and IDs give your elements names — so CSS and links can find them precisely.

Start →

Lesson 6: Styling from the Inside Out

The style attribute lets you apply CSS directly to a single element — no stylesheet needed.

Start →

Lesson 7: Building Blocks

The div element is a generic container with no meaning of its own — until you give it one.

Start →
Submission: You don't submit after each lesson. Work through all 7 lessons in CodePen, then paste your CodePen URLs into the Canvas assignment when you're done.
Start Lesson 1 View Canvas Assignment