HTMLLesson 2 of 10Jump to practice

HTML elements

Learn how start tags, end tags and content combine into elements, and how elements fit inside each other.

An HTML element is a start tag, some content, and an end tag:

<p>I am a paragraph.</p>
  • <p> is the start tag.
  • I am a paragraph. is the content.
  • </p> is the end tag. It has a slash before the name.

Elements inside elements

Elements can contain other elements. This is called nesting. Below, the <strong> element sits inside the paragraph and makes two words bold.

Nesting elements
Open in editor
<p>This sentence has <strong>two bold</strong> words.</p>
<p>And this one has an <em>emphasized</em> word.</p>
Result

Always close the inner element before the outer one. Think of it like boxes: you close the small box before closing the big box around it.

<!-- Correct -->
<p>Some <strong>bold</strong> text</p>

<!-- Wrong: tags cross over each other -->
<p>Some <strong>bold</p> text</strong>

Empty elements

A few elements have no content, so they have no end tag. The line break <br> is one of them.

A line break
Open in editor
<p>First line<br>Second line<br>Third line</p>
Result

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Close the paragraph element correctly.

    <p>I am learning HTML.

  2. Exercise 2

    Make the word important bold by wrapping it in the right element.

    <p>This is <>important</> news.</p>

  3. Exercise 3

    Add a line break between the two lines of the address.

    <p>12 Lake StreetChicago, IL 60601</p>

Quiz: 3 questions

1. In <p>Hello</p>, what is </p>?
2. Which nesting is correct?
3. Why does <br> have no end tag?

Finish the practice to complete this lesson.