Working with Text

Introduction

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.

Learning Outcomes

  • 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

Paragraphs

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

<body>
  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.
</body>

It looks like two paragraphs of text. And 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 it down into one single space. The result of which is that all our text is clumped together into one long line of text.

If we want to create paragraphs in HTML we need to use the paragraph element which will add a newline 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

Headings are different from other HTML text elements, they are displayed larger and bolder than other text to signify they are a heading.

There are 6 different levels of headings starting from <h1> to <h6>. The number within a heading tag represents that headings level. h1 is the most important and is larger than the other headings. And h6 is the lowest level and therefore the smallest of the headings.

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

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

Using the correct levels of headings is important as they provide a hierarchy to the content. An h1 headings 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 things like screen readers that users with visual impairments will rely on to use your website. The tone of voice on the screen reader will change to communicate the importance of the text within the 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 affects things like screen readers. To define an emphasised element we wrap text content in a <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 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.

For example 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 like 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.

Writing an HTML comment is simple, we just put <!-- and --> at either end of the comment, for example:

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

Assignment

  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, paragraphs and has some text in the paragraphs bolded and italicized. You can use Lorem Ipsum as the dummy text for the article content and headings.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

  • Note: In the examples, you have probably noticed we used some strange looking text. This is Lorem Ipsum, it is used to generate dummy text you can use in place of real text as you build your sites.

Knowledge Check

  • How do you create a paragraph in HTML?
  • How do you create a heading in HTML?
  • How many different levels of headings are there and what is the difference between them?
  • What element should you use to make text bold and important?
  • What element should you use to make text italicized to add emphasis to it?
  • What relationship does an element have with any nested elements within it?
  • What relationship do two elements have if they are at the same level of nesting?
  • How do you create HTML comments?
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord