Opens in a new tab
Skip to main content
Lesson 03 of 10

HTML Gives the Page Its Structure

Recognize headings, text, lists and links as the structure of a page.

About 11 minutesNo coding experience neededExplore in your browser

Look around. Try a small click.

This lesson works as a written guide with interactive examples. You can explore here before opening the real application or provider dashboard. A recorded video has not been added yet.

Read the short lesson

What will make more sense

  • Describe real headings, lists, links and actions so the page has meaningful structure.
  • Recognize the choice in a prepared business example.
  • Explain a small next step before asking an assistant to act.

One idea to keep

Describe real headings, lists, links and actions so the page has meaningful structure.

The short lesson

Read the explanation at your pace

HTML is the part of a web page that gives content a structure and meaning. Think about an ordinary business document: it has a title, sections, paragraphs and perhaps a list of services. HTML gives a browser those same kinds of instructions. You do not need to memorize the marks around the words. You need to recognize that the page should describe what each piece of content actually is.

On the Cedar Lane example, the main heading identifies the page. Smaller headings organize service groups. Paragraphs explain the details. A list makes the service choices easy to scan. Links take someone to another page. These are not just visual preferences. The structure can help browsers, assistive technologies and other tools understand the content more consistently than a collection of words that only looks organized.

An agent can write the HTML for you, while you describe the intended structure in plain language. Ask for one clear main heading, related sections with useful headings, and descriptive links to the next page. Compare that request with make the words bigger. Bigger text might look like a heading without being a real heading. Describing purpose gives the assistant a better instruction than appearance alone.

Links and buttons also have different jobs. A link normally takes you somewhere, such as the Services page. A button normally performs an action on the current page, such as showing an explanation. Your agent can choose the appropriate native control when you describe what should happen. You are not required to know the implementation details, but you can notice when an action does not match its label.

Our prepared pages use ordinary content that remains understandable before you try the interactive parts. That is a helpful review habit. If the headline does not explain the page, more animation will not fix the meaning. If a link says learn more, ask whether its destination could be described more clearly. These small editorial decisions are part of building a usable website, even though they do not require programming.

Use the activity to choose a request that describes the page structure. Then, if you want, open services.html and find its main heading and service list in the browser. Looking at the result is enough for this lesson. Later, when you ask the assistant to make a change, you can say which section you mean and what purpose it serves. That is already much clearer than pointing at an unspecified piece of the page.

Try it here

Try it here · no installation needed

Choose a clear structure request

A service page contains one long block of text. Choose the request that helps the assistant organize its meaning.

This is a local learning example with prepared responses. It does not run VS Code or contact an AI service.

STEP 1Find the main page question
STEP 2Group related information
STEP 3Give each group a meaningful heading

Which instruction improves the structure?

A tiny next step, if you want one

Optional: try 2 small actions at your own pace

You can finish this lesson by exploring the example above. These real-app actions are optional, and there is nothing to submit.

  1. Optional: find the main heading on the prepared Services page.
  2. Optional: use its Contact link and check that the destination matches the wording.

A quick confidence check

These checkmarks are a personal reminder. Choose what feels familiar, and come back whenever you want.

Your place is saved in this browser when storage is available. There is no grading or account sync.

Try a short question

Choose an answer to see why it fits. You can try again or explore every explanation.

What is HTML mainly doing in this example?

Which control fits going to the Contact page?

If something looks different

My app or provider uses different labels.

Use the linked official guidance for your current product. The lesson teaches the decision rather than requiring a particular screen.

I only want to learn the idea today.

Use the browser activity and confidence questions. The real-app actions are optional, with nothing to submit.

Sources and further help

Read the official product guidance and related learning resources when you need them. You do not need to read every reference now.