Learn
01.2 | HEADINGS, PARAGRAPHS, LISTS AND LINKS
01 | MAKE YOUR PAGE EASY TO READ
A page with one long block of text is difficult to scan. Headings divide it into topics, paragraphs separate ideas, lists group related items, and links connect readers to useful information.
In this lesson, build a page for a robotics club. Your goal is not just to make the text look organized. Choose HTML elements that describe what each piece of content means.
Keep the complete document structure from 01.1 Your First HTML Page. The examples below belong inside its <body>, unless a complete document is shown.
02 | HEADINGS FORM A HIERARCHY
<h1>Robotics Club</h1>
<h2>Our projects</h2>
<h3>Delivery robot</h3>
<p>We are building a robot that carries small parcels.</p>
<h3>Robot hand</h3>
<p>We are designing a hand with moving fingers.</p>
<h2>Join the club</h2>HTML has heading levels <h1> to <h6>. They indicate importance within the document structure, not just different font sizes.
- h1: the main page heading. Use one clear main heading for this beginner page.
- h2: a main section beneath it.
- h3: a subsection of that h2 section.
“Delivery robot” and “Robot hand” are equal-level topics within “Our projects”, so both use h3. “Join the club” starts another main section, so it uses h2.
Do not choose h4 simply because it looks smaller. Use the appropriate heading level, then use CSS later to change appearance. A sensible hierarchy also helps people navigating by headings with assistive technology.
03 | PARAGRAPHS AND LINE BREAKS
<p>We meet each Wednesday after school.</p>
<p>Beginners are welcome. You do not need coding experience.</p>Use <p> for a paragraph. One paragraph should usually develop one idea. Pressing Enter several times in your source file does not create several displayed paragraphs: ordinary whitespace is usually collapsed by the browser.
A <br> creates a line break within content, without starting a new paragraph. Use it when the line break is part of the meaning, such as lines in an address or a poem. It is a void element, so it has no closing tag.
<p>Robotics Club<br>
Room 12<br>
Science Building</p>Do not stack br tags to create large gaps or empty paragraphs for spacing. CSS controls spacing; paragraphs describe content.
04 | IMPORTANCE AND EMPHASIS
<p><strong>Wear safety glasses</strong> when using the workshop tools.</p>
<p>You can build a robot <em>without</em> previous experience.</p><strong> marks importance. <em> marks stress emphasis that can affect the meaning of a sentence. Browsers commonly display these as bold and italic, but their purpose is semantic.
Nest the elements correctly: open p, open strong, close strong, then close p. Use emphasis selectively so it remains meaningful.
05 | UNORDERED AND ORDERED LISTS
<h2>Bring these items</h2>
<ul>
<li>A notebook</li>
<li>A charged laptop</li>
<li>Your curiosity</li>
</ul>
<h2>How to join</h2>
<ol>
<li>Speak to the club leader.</li>
<li>Choose a project.</li>
<li>Attend your first session.</li>
</ol>An unordered list, ul, is useful when the item order is not essential. An ordered list, ol, is useful when sequence or numbering matters. Each item belongs in an <li> element inside the list.
Do not type bullet characters or “1.”, “2.” and “3.” into separate paragraphs as a substitute for a list. Proper list markup describes the grouping and allows the browser to manage numbering.
A nested list belongs inside the relevant li, not as a sibling after it:
<ul>
<li>Robot parts
<ul>
<li>Motors</li>
<li>Sensors</li>
</ul>
</li>
<li>Tools</li>
</ul>06 | LINKS HAVE A DESTINATION AND TEXT
<a href="https://www.raspberrypi.org/">Explore Raspberry Pi projects</a>The <a> element creates a link. Its href attribute specifies the destination, and the text between the tags is what readers select.
“Explore Raspberry Pi projects” tells readers where the link leads. “Click here” gives little context, especially when a person browses a list of links using assistive technology.
Links open in the same tab by default. That is a sensible starting point. If a new tab is useful, make it clear:
<a href="https://www.raspberrypi.org/" target="_blank" rel="noopener">Raspberry Pi projects (opens in a new tab)</a>Here, target="_blank" requests a new browsing tab or window. rel="noopener" prevents the new page from accessing the opener through that relationship.
07 | LINK TO ANOTHER FILE OR A PAGE SECTION
<a href="projects.html">Our projects</a>
<a href="pages/join.html">Join the club</a>These are relative paths. From index.html, projects.html refers to a file in the same folder. pages/join.html refers to join.html inside the pages folder.
Use forward slashes in web paths. Check spelling and capitalization, because many web servers distinguish Projects.html from projects.html. From a file inside pages, ../index.html points back to index.html in the parent folder.
<a href="#join">Jump to joining information</a>
<h2 id="join">Join the club</h2>
<p>Speak to the club leader at the next session.</p>A link beginning with # points to an element’s id in the current page. Each id must be unique within the document. The href uses #join, while the heading’s id is simply join.
You can combine a filename and fragment, such as projects.html#delivery-robot, if that other page contains an element with the matching id.
08 | EDIT THE CLUB PAGE
Add a new project with the correct heading level, improve the introduction, and add an item to each list. Run the preview to check the result.
Rendered page content
Document title:
The preview is for text structure. External navigation, scripts and resources are blocked. Save your code in your own index.html and test links in your browser. Create local target files before testing relative links.
09 | CHECK MEANING, THEN TEST
Review your page in two ways. First, read the source: are the headings in a sensible hierarchy, are items inside li elements, and are the tags correctly nested? Then use the browser: can you scan the content, follow the steps and understand where each link leads?
A link can look correct yet point to a missing file. Test every destination. A browser can also recover from malformed markup, so a page appearing readable is not proof of correct structure.
Further reading: MDN: headings and paragraphs and MDN: creating links.