Headings and Paragraphs

Introduction

Well-structured writing is easier to read, understand, and navigate. On a webpage, HTML gives your content a structure that both people and browsers can understand. In this lesson, you will use headings and paragraphs to build the text section of a simple webpage for a project called Weekend Explorers.

Headings act like titles and subtitles. Paragraphs hold related sentences and ideas. When you choose the right element for each piece of content, your page becomes clearer and more organized.

HTML is not just about making text appear. It is about describing what each piece of content means.

Understanding Headings

HTML provides six heading levels: <h1> through <h6>. The <h1> is the most important heading, and <h6> is the least important.

• h1: The main title of the page. Usually, a page has one main <h1>.
• h2: A major section of the page.
• h3: A subsection inside an <h2> section.
• h4 through h6: More detailed subsections when they are genuinely needed.

Choose headings based on meaning and importance, not on how large or bold you want the text to look. Visual appearance can be changed later with CSS. For now, focus on the content hierarchy.

A useful structure might look like this:

<h1>Weekend Explorers</h1>
<h2>Choose an Activity</h2>
<h3>Walking Trails</h3>
<h3>City Tours</h3>
<h2>Plan Your Trip</h2>

Notice that the headings create an outline. The <h3> elements describe topics within the <h2> section.

Understanding Paragraphs

Use the <p> element for a paragraph of related sentences. Each paragraph should usually communicate one main idea. The browser automatically places space between paragraphs, making separate ideas easier to identify.

<p>Exploring a new place can be a simple way to spend your weekend. You can walk, visit a museum, or try a local restaurant.</p>

<p>Start by choosing an activity that matches your time, budget, and interests.</p>

Do not use several spaces or many line breaks to create the appearance of separate paragraphs. Use separate <p> elements instead. HTML elements describe the structure, while CSS controls visual details.

Worked Example

Imagine that you are writing the introduction for the Weekend Explorers project. First, identify the page title, the main section, and the supporting information.

<h1>Weekend Explorers</h1>

<p>Discover simple ways to make the most of your weekend. Find ideas for outdoor adventures, creative activities, and relaxing local trips.</p>

<h2>Outdoor Adventures</h2>

<p>Spend time outside by walking a trail, visiting a park, or exploring a nearby nature area. Choose an activity that fits your experience and available time.</p>

<h2>Creative Activities</h2>

<p>You can also use your weekend to learn or make something. Try photography, sketching, cooking, or another activity that interests you.</p>

The <h1> identifies the entire page. Each <h2> introduces a major topic, and each <p> explains that topic.

Guided Activity: Build a Project Introduction

Open your HTML editor and create the text structure for a page about a hobby, local place, or activity you enjoy. Follow these steps:

1. Write one clear <h1> for the page.
2. Add a short introductory paragraph explaining what the page is about.
3. Create at least two <h2> sections.
4. Under each section, write one paragraph with two or three sentences.
5. Read the page outline from top to bottom. Check that each heading describes the content that follows it.

For example, a page about cooking could include an <h1> called “Simple Cooking at Home,” followed by sections such as “Useful Ingredients” and “Beginner Recipes.” Keep your writing specific and useful to a visitor.

Common Mistake: Choosing Headings for Appearance

A common beginner mistake is using <h1> because it looks large, or using <h4> because it looks smaller. This creates a confusing structure for people using screen readers and for anyone scanning the page.

Instead, select the heading level that matches the organization of your information. If a heading needs to look smaller or larger, that is a job for CSS later. Also avoid skipping levels without a reason, such as moving from <h1> directly to <h4>. A clear hierarchy usually moves from <h1> to <h2>, then to <h3> when needed.

Independent Challenge

Create a webpage outline for a beginner-friendly guide called My First Skill. Write HTML that includes:

• One <h1> for the guide title.
• One introductory <p>.
• Three <h2> sections.
• One paragraph beneath each section.
• At least one <h3> beneath one of your sections, followed by a paragraph explaining that subsection.

Before you finish, ask yourself: Does every paragraph explain one main idea? Does every heading accurately describe the content below it? If the answer is yes, you have created a strong content structure.