Here is a amusing one: imagine the next HTML wherein the categories pink, blue and inexperienced render the specific background colour — what’s going to be rendered?

<div elegance="blue" />
  Blue
  <div elegance="pink" />
    Pink
    <div elegance="inexperienced" />
      Inexperienced
    </div>
  </div>
</div>

Smartly… did you spot the self-closing divs? That is tough, proper? Take a look at it beneath. 👇

<div elegance="blue" />
  Blue
  <div elegance="pink" />
    Pink
    <div elegance="inexperienced" />
      Inexperienced
    </div>
  </div>
</div>
<div elegance="blue" />
  Blue
  <div elegance="pink" />
    Pink
    <div elegance="inexperienced" />
      Inexperienced
    </div>
  </div>
</div>


.blue {
  background: #1c6ea5;
}

.pink {
  background: #863f43;
}

.inexperienced {
  background: #637b40;
}

div { 
  colour: white;
  padding: 0.5rem;
  margin: 0.5rem;
}
.blue {
  background: #1c6ea5;
}

.pink {
  background: #863f43;
}

.inexperienced {
  background: #637b40;
}

div { 
  colour: white;
  padding: 0.5rem;
  margin: 0.5rem;
}

🤯 Jake Archibald revealed an actual banger entering the argument of self-closing HTML components, and it is greater than value a learn.

Here is the tl;dr!

Self-closing components are most commonly a relict from the XHTML technology. XHTML used to be this unforgiving buddy who made a large scene about the entirety. It required builders to put in writing 100% right kind markup. No longer cool — all of us make errors, proper?

HTML, then again, is your pleasant buddy that tries to make the most efficient out of what you throw at it — even while you reduce to rubble and write invalid HTML.

And it is humorous that each time you shut an hr, br or enter part (so-called void components), the / has no impact by any means!

Here is the WHATWG spec describing get started tags of void components:

Can that be actual? For those who head over to the W3C HTML validator, you get the next outcome for self-closed components:

For those who self-close HTML components, you both write invalid HTML and the browser will deal with it as an open tag or it has purposefully no impact on void components.

As at all times, HTML simply makes the most efficient of the entirety. The tag identify is the one factor that issues for the HTML parser to guage if a component is void and “self-contained”.

So, while you have a look at the HTML at first of this newsletter, the closed divs (<div />) don’t have any impact by any means. It is 3 nested divs, and the browser closes the weather when it discovers the matching remaining tag (</div>).

Wild!