HTML i Tag Closing Tag

2015/12/311 min read
bookmark this
Responsive image

I thought I understand most of HTML, but look following, when you write like this. 

<div>
<h1>
hi
</h1>
<i class="myclass" />
</div>

The code will output to the browser to the following, the i need a closing tag </i>. 

<body>
  <div>
<h1>
hi
</h1>
<i class="myclass">
</i></div><i class="myclass">
  
  <script>
  // 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"
    }], "*")
  }
</script>
</i></body>

How about this HTML..!?

<div>
  <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    
       <i class="glyphicon glyphicon-minus" />
    </div>
    </div>
    </div>
    </div>
    </div>
  </div>
</div>

Yes, it is become little crazy add i tag to all the parent dom.

<body>
  <div>
  <div>
    <div>
    <div>
    <div>
    <div>
    <div>
    
       <i class="glyphicon glyphicon-minus">
    </i></div><i class="glyphicon glyphicon-minus">
    </i></div><i class="glyphicon glyphicon-minus">
    </i></div><i class="glyphicon glyphicon-minus">
    </i></div><i class="glyphicon glyphicon-minus">
    </i></div><i class="glyphicon glyphicon-minus">
  </i></div><i class="glyphicon glyphicon-minus">
</i></div><i class="glyphicon glyphicon-minus">
  
  <script>
  // 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"
    }], "*")
  }
</script>
</i></body>
Html

More Blogs Like This