HTML i Tag Closing Tag

Table of Contents

1. Introduction
2. Missing i Tag Closing Tag
3. The Cascading Effect
4. Conclusion

Introduction

I thought I understood most of HTML, but look at the following example. When you write like this, an unclosed <i> tag can cause unexpected behavior.

Missing i Tag Closing Tag

hi

*```


  The code will output to the browser as follows. The
  `i` tag needs a closing tag `*`.

hi

**// tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "None" }], "") }*

## The Cascading Effect

How about this HTML?

*```

Yes, it becomes a little crazy — the unclosed i tag applies italic styling to all the parent DOM elements.

  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }*

Conclusion

Always remember to close your HTML <i> tags. An unclosed <i> tag will cascade italic styling to all subsequent and parent DOM elements, which can cause unexpected rendering issues in the browser.