<< Home

Chapter 3: Text, Headings, Lists, and Links

This chapter focuses on the core ingredients of written pages. You will shape paragraphs, choose clear headings, build lists that guide the eye, and create links that connect pages into a small yet purposeful site. These elements form the quiet backbone of HTML. Once you know them well, everything else becomes easier to reason about.

Paragraphs and headings with clear meaning

HTML gives you simple, expressive tools for structuring text. A <p> creates a paragraph that holds a single idea. Headings create a logical ladder from top level titles down to finer sections. Use <h1> for the main heading of the page and move downward from there. Avoid skipping levels because the sequence helps assistive technology understand your structure.

The following example shows a short block that uses these elements in a steady and readable way.

<h1>My Garden Notes</h1>
<h2>Spring</h2>
<p>The first shoots appear and the birds grow louder as the days warm.</p>
<h3>Seeds to plant</h3>
<p>Carrots, basil, lettuce and a few surprise herbs&hellip;</p>
💡 Treat headings as signposts that help readers follow your ideas. If the signposts are clear, the page feels calm and organized. Note that &hellip; is an entity that will be replaced with an ellipsis (…) when displayed.

Ordered and unordered lists

Lists help you group related thoughts into tidy, scannable units. HTML gives you two main types. An unordered list created with <ul> uses markers such as discs or circles. An ordered list created with <ol> uses sequence markers such as numbers or letters. Each entry sits inside its own <li> element, which keeps the structure predictable for both readers and browsers.

Choosing the right list

Use an unordered list when order does not matter. Use an ordered list when steps must happen in a specific sequence. This choice shapes how readers understand the content at a glance.

<ul>
  <li>Notebook</li>
  <li>Pencil</li>
  <li>Snacks</li>
</ul>

<ol>
  <li>Open the box</li>
  <li>Plug in the cable</li>
  <li>Press the power button</li>
</ol>

The default styles vary slightly between browsers, but unordered lists usually show small filled discs and ordered lists usually show numbers. These defaults are readable and work well for most pages.

Understanding list markers

You can change list markers directly in HTML without any CSS. Ordered lists accept a type attribute that switches the marker style. This keeps things simple at this early stage, and it shows how browsers can adjust the numbering on their own.

The type attribute works like this:

Here are some short examples that show each form in action.

<ol type="1">
  <li>One</li>
  <li>Two</li>
</ol>

<ol type="a">
  <li>Alpha</li>
  <li>Beta</li>
</ol>

<ol type="I">
  <li>First</li>
  <li>Second</li>
</ol>

Unordered lists do not support type in modern HTML. Browsers provide a simple filled disc by default which is enough for now. Later chapters will show how CSS can change markers for both list types in more flexible ways.

💡 Remember to pick a list marker that matches the style of the page. A subtle marker often feels calmer than a bold one.

Nested lists

You can place one list inside another to show sub-items. Browsers automatically indent nested lists and adjust their markers. This lets you show relationships without extra styling.

<ul>
  <li>Tasks
    <ul>
      <li>Prepare notes</li>
      <li>Review questions</li>
    </ul>
  </li>
  <li>Plan rest</li>
</ul>

Nesting is powerful, although it is best used lightly. Too many layers can make a page feel tangled.

⚠️ When creating a sublist, do not close the current list item before the nested list. Close the <li> only after the final </li> of any sub or sub-sub lists. This keeps the structure predictable. If a list starts to feel crowded, split the content into separate headings and paragraphs instead.

Links, anchors, and navigation basics

Links are the bridges that connect one page to another. You create a link with the <a> element and give it an href attribute that points to the destination. Readers expect links to be clear and specific, so choose link text that states what the user will see when they follow it.

Link examples

The following links demonstrate internal navigation and a path to another site.

<a href="/about">About me</a>
<a href="/projects">Projects</a>
<a href="https://example.com">Visit Example</a>

You can also create internal anchors inside a longer page by adding an id to an element, then linking to it with a hash.

<h2 id="details">Details</h2>
<a href="#details">Jump to details</a>
💡 Any element can act as a local anchor when it has an id. Headings are common because they mark clear sections, but you can attach an id to a paragraph, a list item, or even a small span of text. A link that points to #that-id will jump straight to it.

HTML entities and special characters

Some characters have special roles in HTML, so you write them using entities. For example you write &amp; to show an ampersand and &lt; to show a less than sign. Entities also let you use characters such as &copy; or &hellip; in a safe and predictable way.

Common entities

The table below shows a few everyday examples.

These controlled forms make your pages well behaved in every browser.

Controlling line and word breaks

Most of the time you allow paragraphs to wrap naturally. There are moments when you need a deliberate break. You can force a line break with <br>, create a thematic divider with <hr>, or allow an optional word break with <wbr>, which allows you to specify where abrowser is allowed to create a line break inside a long string if the content would overflow.

Practical break examples

<p>Line one<br>Line two</p>

<hr>

<p>A verylongwordthatmight<wbr>break cleanly</p>

Use these sparingly because too many manual breaks can interrupt the natural flow of text.

💡 Prefer clean paragraphs over frequent <br> tags. A healthy structure guides the reader without extra breaks.

By mastering these text based elements, you give your future pages a firm foundation. The next chapter will build on this stable base.