Text Elements in HTML

Structuring Content with Headings and Paragraphs

Think about any document you've ever read—a news article, a book, a recipe. They all use titles, subtitles, and paragraphs to organize information and make it easy to read. In HTML, we do the same thing using heading and paragraph tags.

Headings: Creating a Hierarchy

Headings are used for titles. HTML gives us six levels, from <h1> to <h6>.

• <h1> is for the most important, top-level heading. You should generally only have one <h1> per page.
• <h2> is for a major sub-heading.
• <h3> is for a sub-sub-heading, and so on, down to <h6>.

Using headings correctly isn't just about making text big or small; it's about giving your page a logical structure. This is incredibly important for search engines (like Google) and for users with visual impairments who use screen readers to navigate the page. This concept is called semantics—using HTML tags to describe the meaning of the content, not just its appearance.

Let's dive into an excellent article from MDN Web Docs that explains this concept.

Paragraphs: The Building Blocks of Text

For regular blocks of text, we use the paragraph tag, <p>. It's one of the most common tags you'll use.

A key thing to understand is that browsers ignore extra spaces and line breaks in your HTML code. If you want to start a new paragraph, you must use a new <p> tag.

This video provides a great visual demonstration of both headings and paragraphs in action.

This image provides a perfect summary of what we've just discussed, showing the code on the left and the browser output on the right.

Let's Code: Adding Content to Your Page

Now, open your index.html file. Let's replace the single line of text in the <body> with a proper title and description for your future app.

Modify your <body> section to look like this:

<body>
  <h1>AI Writing Assistant</h1>
  <p>This tool will help you improve your writing. You can use it to check grammar, summarize text, and more.</p>
</body>

After saving the file, open it in your browser (or refresh the page if it's already open). You should now see a large, bold title and a paragraph of text below it.

<h2>Features</h2>
<p>Check your text for grammar and spelling mistakes.</p>

Adding More Text Elements

Besides headings and paragraphs, HTML provides other useful tags for formatting text.

Lists: Unordered and Ordered

When you have a list of items, like the features of your app, it's best to use list tags. The most common is the unordered list (<ul>), which creates a bulleted list. Each item in the list is wrapped in a list item tag (<li>).

Let's add a list of planned features to your index.html. Add this code below the paragraph you already have:

<h2>Planned Features</h2>
<ul>
  <li>Grammar & Spelling Correction</li>
  <li>Text Summarization</li>
  <li>Style Improvement</li>
</ul>

Save and refresh your browser. You'll see a new sub-heading and a neat, bulleted list.

Emphasis: Bold and Italic

Sometimes you need to make a word or phrase stand out. For this, you can use:

• <strong>: For text that has strong importance. Browsers typically render this as bold.
• <em>: For text that you want to emphasize. Browsers typically render this as italic.

Like headings, these tags have semantic meaning. <strong> tells screen readers to read the text with strong emphasis.

Let's see how to use them.

Let's update our first paragraph to include these. We can make the word "improve" stand out.

Modify your first <p> tag like this:

<p>This tool will help you <strong>improve</strong> your writing. You can use it to check grammar, summarize text, and <em>more</em>.</p>

Save and refresh. You will see "improve" is now bold and "more" is italic.

Summary and Next Steps

Fantastic work! You've taken a blank page and given it a clear, readable structure. This is a huge step forward.

Key Takeaways from this lesson:

• Use <h1> through <h6> to create a logical hierarchy for your content. Always start with one <h1>.
• Use the <p> tag to wrap paragraphs of text. Remember that browsers ignore whitespace in your code.
• Use <ul> and <li> to create bulleted lists.
• Use <strong> and <em> to add semantic importance or emphasis to your text.

Your index.html file should now look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web App</title>
  </head>
  <body>
    <h1>AI Writing Assistant</h1>
    <p>This tool will help you <strong>improve</strong> your writing. You can use it to check grammar, summarize text, and <em>more</em>.</p>

    <h2>Planned Features</h2>
    <ul>
      <li>Grammar & Spelling Correction</li>
      <li>Text Summarization</li>
      <li>Style Improvement</li>
    </ul>
  </body>
</html>

In our next lesson, we will move on to a critical part of our application: getting input from the user. You will learn how to create a web form with a text area and a submit button, which will be the first step in building the interface for your AI tool.