
<p>
  I thought I understand most of HTML, but look following, when you write like
  this.
</p>
<pre class="language-html">
&lt;div&gt;
&lt;h1&gt;
hi
&lt;/h1&gt;
&lt;i class="myclass" /&gt;
&lt;/div&gt;
</pre>
<p>
  The code will output to the browser to the following, the
  <code>i</code> need a closing tag <code>&lt;/i&gt;</code>.
</p>
<pre class="language-html">
&lt;body&gt;
  &lt;div&gt;
&lt;h1&gt;
hi
&lt;/h1&gt;
&lt;i class="myclass"&gt;
&lt;/i&gt;&lt;/div&gt;&lt;i class="myclass"&gt;
  
  &lt;script&gt;
  // tell the embed parent frame the height of the content
  if (window.parent &amp;&amp; window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
&lt;/script&gt;
&lt;/i&gt;&lt;/body&gt;
</pre>
<p>How about this HTML..!?</p>
<pre class="language-html">
&lt;div&gt;
  &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    
       &lt;i class="glyphicon glyphicon-minus" /&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Yes, it is become little crazy add i tag to all the parent dom.</p>
<pre class="language-html">
&lt;body&gt;
  &lt;div&gt;
  &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    &lt;div&gt;
    
       &lt;i class="glyphicon glyphicon-minus"&gt;
    &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
    &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
    &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
    &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
    &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
  &lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
&lt;/i&gt;&lt;/div&gt;&lt;i class="glyphicon glyphicon-minus"&gt;
  
  &lt;script&gt;
  // tell the embed parent frame the height of the content
  if (window.parent &amp;&amp; window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
&lt;/script&gt;
&lt;/i&gt;&lt;/body&gt;
</pre>
<script src="http://jsfiddle.net/keke78ui9/y06dd3yq/embed/" async=""></script>


Category Html

HTML i Tag Closing Tag