Last updated:
The main Playcode123.com HTML page introduces a page with a header, main area, and footer. This extra project shows how to choose meaningful sections when your page grows. You will organize a small notebook instead of memorizing a list of tags.
Plan the content before choosing tags
Our sample notebook needs a title, links to its sections, a supplies list, two diary entries, and an optional tip. Write those pieces as plain text first. Ask which parts belong together and which entry could make sense on its own.
The gardening text is fictional sample content for practising page structure. Replace it with a hobby or project you know. The HTML structure should follow your content rather than forcing every page to contain every possible element.
Create the notebook file
Save the complete example as notebook.html. Open it locally and read it from top to bottom. The navigation should offer Supplies and Diary, and both links should lead to sections that actually exist.
Complete example to try locally
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My seed-growing notebook</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.6;margin:0;padding:24px;color:#172b3a;background:white}main{max-width:720px;margin:auto}a{color:#145da0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #145da0;outline-offset:3px}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}
header,footer{max-width:720px;margin:24px auto}section{margin:32px 0}aside{border-left:4px solid #145da0;padding-left:16px}
</style>
</head>
<body>
<a href="#main-content">Skip to the notebook</a>
<header>
<h1>My seed-growing notebook</h1>
<nav aria-label="Notebook sections">
<a href="#supplies">Supplies</a> · <a href="#diary">Diary</a>
</nav>
</header>
<main id="main-content">
<section id="supplies">
<h2>Supplies</h2>
<ul><li>A clean pot</li><li>Compost</li><li>Seeds</li></ul>
</section>
<section id="diary">
<h2>Growing diary</h2>
<article>
<h3>Preparing the pot</h3>
<p>I filled the pot and labelled it before sowing the seeds.</p>
</article>
<article>
<h3>Checking the first shoots</h3>
<p>I recorded what I could see and took a picture for comparison.</p>
</article>
</section>
<aside aria-labelledby="tip-title">
<h2 id="tip-title">Notebook tip</h2>
<p>Use the same filename pattern for each practice photo.</p>
</aside>
</main>
<footer><p>A sample notebook made for HTML practice.</p></footer>
</body>
</html>Why each part has its own place
The header introduces the notebook, and nav groups its main section links. Main contains the page’s primary material. In this simple page, use one main area rather than placing a separate main element inside every entry.
The supplies and diary sections each have a heading. The two article elements hold separate diary entries that could be reused independently. The aside contains a related tip, while the footer holds the closing note. An aside does not automatically appear in a side column; placement is a CSS decision.
Read the heading outline
There is one page title at level one. Supplies, Growing diary, and Notebook tip are level-two headings. The diary entry titles sit underneath Growing diary at level three.
Choose heading levels for the relationship between sections, not for the text size you prefer. Change the appearance with CSS. If a heading looks too large, replacing it with a lower-level heading changes the document structure as well as its appearance.
Check links and the skip link
Select Diary in the navigation and check that the address ends with #diary. The destination has id="diary". The top skip link points to main-content, allowing a visitor to bypass the introduction.
A short page may not scroll very far because the destination is already visible. The fragment in the address and the matching section still establish the relationship. Test again after adding longer diary entries.
Mistakes that make structure confusing
- Using section for every small styling wrapper: use div when there is no meaningful section to name.
- Using article for every paragraph: first ask whether the content is a self-contained item.
- Copying an id into several sections: each destination id must be unique in the document.
- Making navigation links to missing sections: keep the href fragment and destination id synchronized.
- Expecting semantic tags to guarantee a search ranking: they describe content, but do not guarantee visibility or approval.
Exercise: add a new diary entry
Create another article after “Checking the first shoots”. Give it a level-three heading, “Comparing two photos”, and a paragraph describing what changed. Keep it inside the diary section.
Solution: place <article><h3>Comparing two photos</h3><p>I compared the new picture with the previous one.</p></article> before the diary section closes. The outline should now contain three level-three diary titles.
Extend the notebook carefully
Add a figure inside one diary entry when you have a photo ready. Keep its caption with that photo rather than moving it into the page footer. You are now combining structure and content: the image belongs to a specific entry, not to the whole website.
Continue your project
Internal links is a useful next step. Return to the HTML examples on Playcode123.com whenever you want to review the basic syntax.
Further reference
Technical reference: MDN: semantics.