Headings and Paragraphs

Use h1 for the main page heading and h2–h6 for subsections. Paragraphs belong in p elements; heading levels should follow a logical outline.

What you will learn

• Explain the purpose of headings and paragraphs in a real website.
• Read and adapt a working example instead of memorizing syntax.
• Test your result and recognize a common implementation mistake.

Understanding the concept

Use one descriptive h1 for the main topic and nest h2–h6 in logical order; heading levels are not font-size controls.

HTML is a markup language, not a programming language. Tags describe meaning and structure. Prefer meaningful elements over generic divs when a semantic element exists.

This topic is part of the HTML learning track. Read the example carefully, identify each important element or statement, and try changing one part at a time. Small experiments help you see cause and effect.

Example 1: Working code

<h1>Web Development</h1>
<h2>HTML Basics</h2>
<p>HTML organizes the content of a webpage.</p>

Save the example as index.html and open it in a browser. View Source to compare the markup with what the browser displays.

How to understand this example

1. Identify the syntax introduced by this lesson.
2. Read the code from top to bottom and predict what it will do.
3. Run the code, then compare the result with your prediction.
4. Change one value, selector, or element and run it again.

Example 2: A small experiment

<!-- Experiment: Headings and Paragraphs -->
<section aria-label="Practice area">
  <h2>Practice 3</h2>
  <p>Change this content and reload your browser.</p>
</section>

This second example is a practice scaffold. It is not a replacement for the main example; combine the ideas to make a small working page or script.

Common mistakes and best practices

• Check nesting carefully: close tags in the reverse order you open them.
• Open the file in a browser and inspect the page with Developer Tools.
• Do not copy examples without understanding the result; inspect and test them.
• Prefer clear, descriptive names and simple code over unnecessary complexity.

Hands-on exercise

Your task: Write an article with one h1, two h2 headings, and paragraphs.

Extra challenge: Improve the example for a real DevLearn student portfolio or small business website. Explain your changes in two sentences.

Show exercise guidance

Start with the example above, change the heading and paragraph to satisfy the exercise, then validate the markup and test keyboard navigation.

Quick knowledge check

1. What problem does headings and paragraphs solve?
2. Which part of the main code example would you modify first?
3. How would you test that your change works?

Suggested answers

Use one descriptive h1 for the main topic and nest h2–h6 in logical order; heading levels are not font-size controls. The relevant part depends on your change; test by running the code and inspecting the result using the browser and its developer tools.

Next steps

Complete the exercise without copying the solution. Save your code in a folder named html-lesson-03, then continue to the next lesson in this track.