Working with Text

Foundations Course


Most content on the web is text-based, so you will find yourself needing to work with HTML text elements quite a bit.

In this lesson, we will learn about the text-based elements you are likely to use the most.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • How to create paragraphs.
  • How to create headings.
  • How to create bold text.
  • How to create italicized text.
  • The relationships between nested elements.
  • How to create HTML comments.


What would you expect the following text to output on an HTML page?

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.

  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.

It looks like two paragraphs of text, so you might expect it to display in that way. However, that is not the case, as you can see in the output below:

See the Pen no-paragraphs-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.

If we want to create paragraphs in HTML, we need to use the paragraph element, which will add a new line after each of our paragraphs. A paragraph element is defined by wrapping text content with a <p> tag.

Changing our example from before to use paragraph elements fixes the issue:

See the Pen pargraph-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.


Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings.

There are 6 different levels of headings starting from <h1> to <h6>. The number within a heading tag represents that heading’s level. The largest and most important heading is h1, while h6 is the tiniest heading at the lowest level.

Headings are defined much like paragraphs. For example, to create an h1 heading, we wrap our heading text in an <h1> tag.

See the Pen HTML-headings-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Using the correct level of heading is important as levels provide a hierarchy to the content. An h1 heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page.

Strong element

The <strong> element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a strong element. To define a strong element, we wrap text content in a <strong> tag.

You can use strong on its own:

See the Pen HTML-single-strong-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

But you will probably find yourself using the strong element much more in combination with other text elements, like this:

See the Pen HTML-strong-with-paragraph-exmample by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum.

Em element

The <em> element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasised element, wrap the text content in an <em> tag.

To use <em> on its own:

See the Pen HTML-single-em-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Again, like the strong element, you will find yourself mostly using the <em> element with other text elements:

See the Pen HTML-em-with-paragraph-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Nesting and indentation

You may have noticed that in all the examples in this lesson we indent any elements that are within other elements. This is known as nesting elements.

When we nest elements within other elements, we create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent.

In the following example, the body element is the parent and the paragraph is the child:

See the Pen HTML-nesting-parent-child by TheOdinProject (@TheOdinProjectExamples) on CodePen.

Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings.

For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other:

See the Pen HTML-nesting-siblings by TheOdinProject (@TheOdinProjectExamples) on CodePen.

We use indentation to make the level of nesting clear and readable for ourselves and other developers who will work with our HTML in the future. It is recommended to indent any child elements by two spaces.

The parent, child, and sibling relationships between elements will become much more important later when we start styling our HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships.

HTML comments

HTML comments are not visible to the browser; they allow us to comment on our code so that other developers or our future selves can read them and get some context about something that might not be clear in the code.

In order to write an HTML comment, we just enclose the comment with <!-- and --> tags. For example:

See the Pen HTML-comments-example by TheOdinProject (@TheOdinProjectExamples) on CodePen.

VSCode keyboard shortcut

If you find typing out the comments syntax tiring, the following shortcut will help you quickly create a new comment, convert any line to a comment, or uncomment any line:

  • Mac Users: Cmd + /
  • Windows and Linux Users: Ctrl + /


  1. Watch Kevin Powell’s HTML Paragraph and Headings Video.
  2. Watch Kevin Powell’s HTML Bold and Italic Text Video.
  3. To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use Lorem Ipsum to generate dummy text, in place of real text as you build your sites. VS Code includes a shortcut to generate lorem ipsum for you. To trigger the shortcut, type lorem on the line where you want the dummy text, then press the Enter key, and voila, you have generated dummy text without a hitch.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Support us!

The Odin Project is funded by the community. Join us in empowering learners around the globe by supporting The Odin Project!