Structuring Text with HTML Elements

Why Structure Matters: Whitespace and Line Breaks

First, let's address a common point of confusion for newcomers to HTML. If you open your index.html file and type several lines of text inside the <body>, hitting "Enter" to separate them, you might be surprised by the result.

<body>
  This is the first line.
  This is the second line.
</body>

When you view this in your browser, it will appear as: "This is the first line. This is the second line."

This happens because HTML is whitespace insensitive. Browsers collapse multiple spaces, tabs, and newlines in your code into a single space when rendering the page. To control the structure, you need to use specific HTML tags.

The simplest way to force a line break is with the <br> tag. Let's watch a short video that explains this concept and introduces the <br> tag.

The <br> tag is what's known as a void element (or self-closing tag). It doesn't have content inside it, so it doesn't need a closing tag like </br>. You simply place it where you want a line break.

Creating Paragraphs

While <br> is useful for breaks within a single thought (like lines in a poem or an address), a more common and structured way to separate blocks of text is by using the paragraph tag, <p>.

Wrapping text in <p> and </p> tells the browser that this is a distinct paragraph. Browsers automatically add some vertical space (a margin) before and after each paragraph element, which helps to visually separate them.

This next video segment demonstrates how to create paragraphs and highlights the readability benefits in both the browser and your code.

Building a Hierarchy with Headings

Paragraphs and line breaks help organize the body of your text, but to create a clear structure for your entire page, you need headings. Headings give readers a quick sense of the page's content and how it's organized.

HTML provides six levels of headings, from <h1> to <h6>.

• <h1>: The most important heading, typically used once per page for the main title.
• <h2>: A major section heading.
• <h3>: A sub-section heading.
• ...and so on, down to <h6> for the least important subheading.

It's crucial to understand that these tags are for structural hierarchy, not just for styling text. Search engines and accessibility tools like screen readers rely on this hierarchy to understand your content's layout. You should use them in logical order (e.g., don't skip from an <h1> to an <h4>).

This quick video shows how the different heading tags look.

To give you a clear reference, this image shows the code and the typical browser rendering side-by-side.

Reading and Best Practices

To bring all this together and learn some important best practices, please read the following sections from a freeCodeCamp article. It will serve as a great summary and reference.

A key takeaway from the best practices is to not use tags for visual styling. For example, don't use a heading just to make text bold, and don't use <br> tags to create space between elements. We will learn the correct way to handle styling with CSS in a later module.

Practice: Structuring Your First Page

Now it's time to apply what you've learned. Open the index.html file you created in the last lesson and replace its empty <body> with the code below. Your task is to add the necessary <h1>, <h2>, <p>, and <br> tags to structure this text.

Instructions:

1. Make "My Journey into Web Development" the main heading of the page (<h1>).
2. Make "The Beginning" a secondary heading (<h2>).
3. The text block below "The Beginning" should be a single paragraph (<p>).
4. Make "My Goals" another secondary heading (<h2>).
5. The text block below "My Goals" should also be a single paragraph (<p>).
6. Inside the "My Goals" paragraph, add a line break (<br>) after "full-stack development".

Here is the unstructured text to put in your <body>:

My Journey into Web Development

The Beginning
This is the start of my coding adventure. I'm building my first webpage from scratch. It's exciting to see how a few lines of code can create something that appears in a web browser.

My Goals
I'm learning HTML to build a strong foundation. My ultimate goal is to become proficient in full-stack development. This means learning frontend technologies like CSS and JavaScript, as well as backend systems.

Once you've added your tags, save the file and view it in your browser using Live Server.

<body>
  <h1>My Journey into Web Development</h1>

  <h2>The Beginning</h2>
  <p>This is the start of my coding adventure. I'm building my first webpage from scratch. It's exciting to see how a few lines of code can create something that appears in a web browser.</p>

  <h2>My Goals</h2>
  <p>I'm learning HTML to build a strong foundation. My ultimate goal is to become proficient in full-stack development.<br>This means learning frontend technologies like CSS and JavaScript, as well as backend systems.</p>
</body>

Conclusion

Great work! You've taken your first steps in making web content meaningful and readable. By structuring text, you're not just organizing it for human eyes, but also for the machines that help us navigate the web.

Here are the key takeaways from this lesson:

• HTML ignores extra whitespace in your code; use tags to create structure.
• Headings (<h1>-<h6>) define the structural hierarchy of your content.
• Paragraphs (<p>) are used to group blocks of text.
• Line breaks (<br>) are used to force a new line within an element.

In the next lesson, we will continue exploring how to structure content by learning how to create ordered and unordered lists, which are essential for organizing items like navigation links, feature lists, and steps in a process.