Analyzing a Random Quote Generator_Question about what seems to be a missing closing div


#1

I am noticing that line 43 in the HTML code of the following random quote generator contains an opening div without its closing div. The code runs as intended. In what situations can we use stand-alone opening divs? Thank you for the help.

https://codepen.io/ksirgey/pen/XaNPoX?editors=1000

The code in question is <div class="ripples buttonRipples"> in

              <div class="randomBtn">
                <button class="btn btn-primary btn-lg buttonBlue" ng-click="randomQuote($event)">Random<div class="ripples buttonRipples"><span class="ripplesCircle"></span></button>
              </div><!-- End of Random Button -->

#2

I forked the pen and CodePen is now saying that I am the author. This was not intended.


#3

There aren’t any cases where it’s okay to omit the closing tag for an element unless it is a void element where closing tags are not expected. A <div> always requires a closing </div>.

When the HTML is invalid, as in this case with a missing </div>, it’s up to the browser to guess what needs to be done. We are encouraged to write valid HTML all the time so our code appears consistently across all browsers.

You can find more information over at w3.org: https://www.w3.org/wiki/Validating_your_HTML#Different_browsers_interpret_invalid_HTML_differently

And not to worry about making yourself look like the author - in the details view of your pen, it shows the original author: