Hello! Welcome back to your course on building an educational website.
In our last session, we created the foundational "boilerplate" for an HTML page. You learned how to set up the essential structure with <!DOCTYPE html>, and the <html>, <head>, and <body> tags. Right now, your index.html file is a perfectly structured but empty canvas.
Today, we'll start filling that canvas. This lesson focuses on how to use heading and paragraph tags to structure text content. This is the most fundamental skill for presenting readable information on the web. By the end of this lesson, you'll be able to take a block of plain text and give it a clear, logical structure that both your users and search engines can understand.
Let's begin by looking at what headings and paragraphs look like in their final form.
Why We Need Tags for Text
You might wonder, "Can't I just type my text into the <body> and hit Enter to make new paragraphs?" It's a great question. Let's see what happens when we try.
Open your index.html file and inside the <body> tags, type the following text exactly as it appears, with the line break in the middle:
My Awesome Course
This course will teach you everything you need to know.
Save the file and look at it in your browser (using Live Server). You'll notice the text all runs together on one line. This is because HTML browsers ignore most whitespace, including line breaks and extra spaces in your code.
To give our text structure, we need to be explicit. We must "declare" what each piece of text is. Is it a paragraph? A main title? A subtitle? We do this using tags.
Creating Paragraphs with <p>
The most common tag for text is the paragraph tag, <p>. It tells the browser, "This block of text is a paragraph."
The following short video explains this concept perfectly. As you watch, pay close attention to how wrapping text in <p> tags changes the output in the browser.
HTML & CSS for Beginners Part 3: Paragraphs and Headings
This clip from Kevin Powell's "HTML & CSS for Beginners" series demonstrates why paragraph tags are essential and how to use them.
Watch from 00:43 to 02:57. Notice how the browser renders text without tags versus with <p> and </p> tags.
Now, let's apply this. Go back to your index.html file. Modify your text by wrapping it in paragraph tags, like this:
<p>My Awesome Course</p>
<p>This course will teach you everything you need to know.</p>
Save your file and look at the browser. You'll see that the two lines of text are now properly separated into two distinct blocks, with a nice space between them. You've just created your first HTML paragraphs!
Creating a Hierarchy with Headings <h1> - <h6>
While paragraphs are great for the main body of text, pages also need titles and subtitles to create a clear hierarchy. For this, we use heading tags.
HTML provides six levels of headings:
<h1>: The most important heading, typically used only once per page for the main title.<h2>: A subheading, used for major sections.<h3>: A sub-subheading.- ...and so on, down to
<h6>, the least important heading.
The key to using headings is to think about structure and meaning, not just how they look. <h1> means "this is the main title," not "make this text big." The visual appearance is just the browser's default way of showing importance. We'll learn to control the exact size and style later with CSS.
This next video explains this concept of semantic meaning very well and shows you how to implement heading tags.
In this segment from Kevin Stratvert's "HTML Tutorial for Beginners," you'll learn how to use heading tags and why choosing the right level is about conveying meaning.
Watch from 06:24 to 09:08. Pay close attention to the explanation of why you should choose a heading based on its meaning (e.g., using an <h2> for a sub-header), not just its default size.
Based on what you just learned, let's refine our index.html file. The line "My Awesome Course" is clearly the main title of the page, so it should be an <h1>, not a <p>.
Update your code to reflect this:
<h1>My Awesome Course</h1>
<p>This course will teach you everything you need to know.</p>
Save and view the result. You now have a semantically correct and well-structured piece of content!
Practice and Deeper Understanding
To solidify your understanding, let's turn to a written resource and a small coding challenge. The Mozilla Developer Network (MDN) is an excellent, authoritative source for web developers.
The following reading explains the importance of structure and semantics in more detail and includes a hands-on exercise for you to try right in your browser.
Headings and paragraphs - Learn web development | MDN
This article from MDN, "Headings and paragraphs," reinforces what we've covered and provides an interactive editor to practice your new skills.
First, read the short section "Implementing structural hierarchy" to see an example of headings in action. Then, scroll down to the section "Giving content structure" and complete the code challenge in the interactive editor. Finally, read "Why do we need semantics?" to reinforce the important idea of using tags for meaning.
Test your understanding!
Imagine you are creating a course page for your educational website. You have the following text content:
Introduction to Accounting
The fundamentals of financial record-keeping.
Module 1: The Balance Sheet
In this module, we will explore the core components of the balance sheet.
How would you mark up this text using <h1>, <h2>, and <p> tags to create a logical structure?
Show answer
A correct way to structure this would be:
<h1>Introduction to Accounting</h1>
<p>The fundamentals of financial record-keeping.</p>
<h2>Module 1: The Balance Sheet</h2>
<p>In this module, we will explore the core components of the balance sheet.</p>
Reasoning:
<h1>is used for the main title of the page ("Introduction to Accounting").<h2>is used for the major section title ("Module 1: The Balance Sheet"), as it's a direct subsection of the main topic.<p>is used for the descriptive text under each heading.
Conclusion
Great work! You've taken another crucial step in your web development journey. You can now take unstructured text and give it meaning and a clear hierarchy, which is essential for user readability and accessibility.
Key Takeaways:
- Browsers ignore whitespace like line breaks, so you must use tags to structure content.
- Use the
<p>tag to define a paragraph of text. - Use heading tags
<h1>through<h6>to create a logical document hierarchy. - An
<h1>should be used for the main title and appear only once per page. - Choose heading levels based on their semantic meaning and importance, not their default visual appearance.
Preview of the Next Lesson:
Now that you can structure sentences and titles, what about lists of items? In our next lesson, we will learn how to create ordered and unordered lists, which are perfect for outlining course contents, listing features, or presenting steps in a process.