CS 100 (Learn) — CS 100 (Web) — Module 07

HTML :: Optional Closing Tags

Let's revisit the example from the previous section.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Hello, World!</p>

    <p>Here is a bullet list:
      <ul>
        <li>First bullet item</li>
        <li>Second bullet item has some <em>emphasis</em> in it</li>
      </ul>
    </p>
  </body>
</html>

web browser

Hello, World!

Here is a bullet list:

First bullet item
Second bullet item has some emphasis in it

It just so happens that we can make this example a little less cluttered.

In the latest version of HTML (HTML5) there are a few paired tags for which the closing tag is optional.

For example, the closing paragraph tag </p> is optional. This is because it is always clear that a paragraph ends when a new paragraph begins. You cannot have paragraphs nested inside of each other.

Another optional closing tag is the </head> tag. The header section must be over when the <body> section begins.

Similarly, the closing </body> and </html> tags are always at the end of the doucment and can also be omitted.

One final example of a closing tag that can be omitted is the closing </li> (list item) tag. Every </li> closing tag is immediately followed by either a new list item (<li>) or the end of the list (in this example, </ul>).

If we remove all of the optional closing tags, our example becomes a little cleaner:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello</title>
  <body>
    <p>Hello, World!

    <p>Here is a bullet list:
      <ul>
        <li>First bullet item
        <li>Second bullet item has some <em>emphasis</em> in it
      </ul>

web browser

Hello, World!

Here is a bullet list:

First bullet item
Second bullet item has some emphasis in it

Some beginner HTML tutorials recommend keeping the closing tags, but most modern HTML guides recommend omitting the optional closing tags, and so in this course we will not require them (unless we explicity request them). You may omit the following closing tags: `

`. If you prefer, you may keep them. Of course, most paired tags require a closing tag. Omitting the closing `` (emphasis) does not make sense. There are a few tags where even the _opening_ tag is optional, but we are not going to go _that_ far in this course.