Build the Structure

After this lesson, you can build two complete, semantic documents that link to each other.

BEGIN WITH A QUESTION

Understanding begins with a question.

The plan is ready. Turn each part into HTML, starting with a shared structure and giving each page different content.

Build two complete, semantic documents that link to each other.

UNDERSTAND THE CONCEPT

Build from the outside in

Write doctype, html lang, head, and body. Complete title, charset, and viewport. In body, add header/nav, one main, and footer. Once the structure is ready, fill main with headings and paragraphs.

Consistent navigation, distinct content

Home and about pages can share a menu. Their titles and h1 headings should describe each page. Visitors should know where they are without guessing from the URL.

Complete one part at a time

Build the home page first, then the about page. Add at least one meaningful list. Select file tabs to view each page. Observe the preview before all the code is finished.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home — Sky Club</title>
</head>
<body>
<header><nav><a href="index.html">Home</a> <a href="about.html">About the club</a></nav></header>
<main>
  <h1>Sky Club</h1>
  <p>Learning to read the sky together.</p>
  <h2>Activities</h2>
  <ul><li>Recording Moon phases</li><li>Recognizing constellations</li></ul>
</main>
<footer><p>An HTML learning project.</p></footer>
</body>
</html>

BROWSER RESULT

A complete home page pattern. The about page needs its own document with an appropriate title, h1, and content.

COMMON MISTAKES

<!-- Two different files, but both are still named: -->
<title>Untitled</title>

Generic tab titles make navigation harder. Give each page a distinct title that describes its role.

TRY TOGETHER

Practice clarifies understanding.

Complete the link back from about.html.

<a href="">Back to home</a>

Show a hint

The home page file is index.html.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Build a two-page foundation

Complete both documents: each needs full metadata, header/nav, main with one h1 and a paragraph, and footer. Link them in both directions and add at least one list on the home page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home — Story Garden</title>
</head>
<body>
<!-- Build header, main, and footer -->
</body>
</html>

index.htmlHTMLLn 1, Col 111 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Build the structure first, then the content.
Metadata and titles should suit each page.
Consistent navigation helps readers find their way back.

Document structureSemantic structureLink

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Landmark °Heading °Relative path °

Library: Read a web address without getting lost ↗Library: Three languages behind one page ↗

Next lesson →