HTML First Steps - Lesson 1 - Tags h1-h6, p, strong

16/04/2025, by Ivan

Read about how to create HTML documents in HTML – First Steps.

In the previous lesson, we created our first HTML document.

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    HTML – My First Steps
  </body>
</html>

In this lesson, we’ll fill our document with text. Let’s add the most common tag in HTML, the <p></p> tag. Don’t forget that tags are written in Latin script – this is not the Russian 'р'. The <p> tag stands for paragraph and marks a block of text.

All text in HTML must be enclosed in a tag, so let’s wrap our text in a <p> tag:

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    <p>HTML – My First Steps</p>
  </body>
</html>

Visually, nothing has changed in the browser, but the HTML structure is now more correct. Let’s add a few more paragraphs:

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    <p>HTML – My First Steps</p>
    <p>Every hunter wants</p>
    <p>to know where</p>
    <p>the pheasant sits</p>
  </body>
</html>

As you can see, it’s quite simple. All <p> tags are placed at the same level.

Let’s add a heading to our document. Why use headings in HTML? First, to structure the text – structured text is easier and faster to read. Second, headings are important for SEO. So don’t neglect them.

We use <h1> through <h6> for headings. The number indicates the level of importance. The <h1> tag should only appear once per page and serves as the main topic indicator. You may then use <h2>, <h3>, and so on as needed – six levels are usually enough.

<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    <h1>My First HTML Document</h1><br>
    <h2>My First Steps</h2>
    <p>HTML – My First Steps</p>
    <h3>Another Step</h3><br>
    <h2>As the saying goes</h2>
    <p>Every hunter wants</p>
    <p>to know where</p>
    <p>the pheasant sits</p>
  </body>
</html>

You’ll notice that the size of the heading depends on the number: the smaller the number, the larger and bolder the text.

Another feature of <h1>-<h6> is that they are bold by default. To make text bold elsewhere, use the <strong> tag:

<p>Every <strong>hunter</strong> wants</p>

Note: Use <strong> to highlight text in bold. Never use <h1>-<h6> inside <p> – it may negatively impact your SEO rankings.

Correct:

<p>Very <strong>bold</strong> text</p>

Incorrect:

<p><h3>Don't do this</h3>!</p>

You’re now ready to add as much text as you want and highlight it properly – the right way.

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

HTML First Steps - Lesson 1 - Tags h1-h6, p, strong