LThe Life Starter
0 of 6 complete0%
Lesson 2 of 6
Digital · Guided lesson

Write semantic HTML

Create a meaningful document that works before visual styling.

About 32 minutes • Finish with a concrete deliverable
freeCodeCamp.orgFull Stack Web Development for BeginnersYouTube
Course primer

Full Stack Web Development for Beginners

From freeCodeCamp.org. Watch here or open it on YouTube .

When the instructor writes markup, identify the browser behavior gained from each native element before copying any styling.
Before you begin

What this lesson is really solving.

Build the content in a logical source order using landmarks, headings, lists, links, buttons, labels, and native form controls. A div with a click handler is not automatically a button. Test the unstyled page for understandable structure.

Why this works

Understand the idea before touching the steps.

HTML describes the information and relationships; CSS describes presentation.

Do this

Follow these steps in order.

Take the action in each step; then use the deliverable below to prove the lesson is finished.

  1. 1

    Create the document metadata, language, title, description, and viewport settings.

  2. 2

    Use landmarks such as header, nav, main, section, article, and footer where they match meaning.

  3. 3

    Build a logical heading hierarchy, descriptive links, real buttons for actions, and labels for form controls.

  4. 4

    Add useful image alternative text and avoid duplicating visible captions.

Worked example

See the standard in context.

The tutor page uses a skip link, header and nav, one h1, section headings in order, testimonials as blockquotes, a labeled form, status text for submission, and a footer with contact and privacy links. The tab key reaches every action.

Quality check

Inspect before you move on.

  • Heading levels describe hierarchy without skipping for visual size.
  • Every input has a programmatic label and useful error message.
  • Links navigate; buttons perform actions; both have clear accessible names.
Make it real

Your deliverable

A complete, navigable HTML page with the stylesheet disabled.

Common mistake

Watch for this

Using clickable divs, heading tags for font size, or placeholder links that break keyboard and assistive use.

You’re ready when

Prove it—don’t just recognize it.

The source reads like a clear document and every interactive element has the correct native behavior.

Objective evidence · 3 questions

Quick knowledge check

Answer from the lesson—not from confidence alone. Score at least 2 of 3 to unlock completion.

Not yet passed

This curriculum-aligned check is scored automatically and stored with your account when signed in. It is an objective learning signal, but it has not yet been independently validated as a standardized assessment.

1Which action belongs in the recommended process for “Write semantic HTML”?
2Which result is the clearest evidence that this lesson’s work is complete?
3Which choice matches the failure this lesson specifically warns against?
0 of 3 answeredEach question measures the action, evidence, or failure condition taught above.
Useful for this course

Tools, templates, and references

The Life Starter toolkitReusable planners and trackers for practical projects.
Check current detailsReferences reviewed September 9, 2026. Lesson exercises are editorial synthesis; official rules come from the linked sources.
MDN — Learn web developmentweb.dev — Learn accessibility
2
One check remains

Pass the knowledge check above first.

Completion unlocks after a score of 2 out of 3. Then confirm that you produced the lesson deliverable.

Go to the knowledge check